Data Table IV

The fully generalized table: per-column filtering on top of sorting and pagination (Data Table III). Each column gets a filter input, and the data flows through three stages in a fixed order — filter, then sort, then paginate. Get the order right and each stage is a one-liner; get it wrong and pages, sorts, and filters fight each other.

Signature

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

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

Examples

filter Name = "a", sort by Age, page 1
  → keep rows whose name contains "a", order them by age, show the first 5

filters live in one object: { name: "a", occupation: "" }
a row survives only if EVERY column's filter matches (empty = matches all)

Notes

• Three stages, fixed order. filter → sort → paginate. Filtering changes the row set, so it must come first.
• One filters object. { [key]: text }; a row passes when columns.every(...) of its filters match.
• Filtering resets the page. A changed filter resizes the result, so jump back to page 0.
• Out of scope. Debouncing the inputs, fuzzy matching, multi-sort — plain substring filtering here.