Data Table III

Generalise the table into one reusable component. The previous tables hard-coded the columns and the data; here you pass both in as props — a columns config and a data array — so the same <DataTable> works for users, products, or anything else. It folds together the two earlier features: column-driven sorting (Data Table II) and pagination (Data Table), in that order.

Signature

type Column = { key: string; header: string; sortable?: boolean };
type Row = { id: number; [key: string]: string | number };

function DataTable(props: {
  columns: Column[];
  data: Row[];
  pageSize: number;
}): JSX.Element;

Examples

<DataTable columns={userCols} data={users} pageSize={5} />
<DataTable columns={productCols} data={products} pageSize={10} />
  → same component, different config, no code changes

sort by Age, then page → page 2 holds the next-oldest five,
NOT a re-sort of page 2's rows in isolation (sort the whole set first)

Notes

• Config drives the UI. Headers and cells come from columns; cells read row[col.key]. No field names baked in.
• Sort, then paginate. Sort the entire dataset, then slice the page — order matters.
• Sorting resets the page. A new sort should drop you back to page 0.
• Out of scope. Per-column filtering — that's Data Table IV. Here: generic sort + page.