import { useState, useMemo } from 'react'; const USERS = Array.from({ length: 45 }, (_, i) => ({ id: i + 1, name: `User ${['Zoe', 'Alice', 'Mark', 'Bob'][i % 4]} ${i + 1}`, age: Math.floor(Math.random() * 40) + 20, occupation: ['Engineer', 'Designer', 'Manager', 'Analyst'][i % 4] })); export default function App() { const [currentPage, setCurrentPage] = useState(1); const [rowsPerPage, setRowsPerPage] = useState(10); const [sortConfig, setSortConfig] = useState({ key: 'id', direction: 'asc' }); // 1. Sort the entire dataset before paginating const sortedUsers = useMemo(() => { let sortableItems = [...USERS]; if (sortConfig.key !== null) { sortableItems.sort((a, b) => { if (a[sortConfig.key] < b[sortConfig.key]) { return sortConfig.direction === 'asc' ? -1 : 1; } if (a[sortConfig.key] > b[sortConfig.key]) { return sortConfig.direction === 'asc' ? 1 : -1; } return 0; }); } return sortableItems; }, [sortConfig]); // 2. Paginate the sorted data const totalPages = Math.ceil(sortedUsers.length / rowsPerPage); const startIndex = (currentPage - 1) * rowsPerPage; const currentData = sortedUsers.slice(startIndex, startIndex + rowsPerPage); const requestSort = (key) => { let direction = 'asc'; if (sortConfig.key === key && sortConfig.direction === 'asc') { direction = 'desc'; } setSortConfig({ key, direction }); }; const getSortIcon = (key) => { if (sortConfig.key !== key) return '↕️'; return sortConfig.direction === 'asc' ? '🔼' : '🔽'; }; return (

{['id', 'name', 'age', 'occupation'].map((key) => ( ))} {currentData.map(user => ( ))}

requestSort(key)}> {key.toUpperCase()} {getSortIcon(key)}
{user.id}	{user.name}	{user.age}	{user.occupation}

Page {currentPage} of {totalPages}

); }