69Implement server-side pagination with sorting and filtering

Build <UsersTable fetchUsers={fetchUsers} pageSize={10} />. The server does the work: fetchUsers({ page, pageSize, sortKey, sortDir, filter }) resolves to { rows, total }, where rows are { id, name, email }.

Render:

• <input aria-label="Filter">;
• a <table> whose Name and Email headers contain a <button> that sorts by that column, with aria-sort="ascending" | "descending" | "none" on the <th>;
• one <tr> per row in <tbody>;
• <span>Page {page} of {pages}</span> with Previous and Next buttons, disabled at the ends.

Requirements

• Start with page 1, sorted by name ascending, no filter.
• Clicking a header sorts by that column ascending; clicking it again flips the direction. Any sort change goes back to page 1.
• Changing the filter goes back to page 1.
• Keep the old rows on screen while the next page loads (no empty flash), and mark the table with aria-busy="true".
• Ignore responses for older requests.