Data Table IV

Requirements

• Implement one reusable DataTable receiving rows, columns, rowKey, caption, tableId, initialPageSize and pageSizes. Keep the supplied people, inventory and empty-data instances independent. Derive cells and filters from column keys; do not hardcode user fields. Inputs are supplied synchronously and row keys are unique.
• Add immediate global search across all configured column values. Match a trimmed, case-insensitive substring of the string representation of each value; null/undefined are empty text. A row matches global search if any column matches. An empty or whitespace-only query matches all rows.
• Provide independent column filters for every column unless filterable is false. Use the same substring rule. Combine all nonempty column filters with AND, and combine that result with global search using AND. Numeric filters are text matches, not numeric comparisons. Store the raw input text so editing is stable.
• Apply the pipeline to the full input: filter, stable sort, then paginate. Never mutate input rows, columns or records. Show N of M rows, where N is the filtered count before slicing and M is the source count.
• Changing global search, any column filter, sorting or page size returns to page one. Retain the other filters, sort choice and page size. Clear filters empties global and all column inputs, resets page one, and preserves sorting and page size.
• People starts with 3 rows per page and supports 3, 5 and 10; inventory starts with 2 and supports 2, 3 and 5. First, Previous, Next and Last controls clamp to valid pages and are disabled at boundaries. Display Page N of M. Zero matches or empty data displays Page 0 of 0, No rows. and all navigation disabled. The count remains 0 of M rows, and clearing filters recovers the data.
• Sortable headers cycle ascending, descending, then original filtered input order. A different column starts ascending. String sorting is case-insensitive English locale ordering; numeric sorting compares numbers. Ties preserve original row order in either direction, and null/undefined values sort after non-null values in either direction. Respect sortable:false and synchronize aria-sort and direction indicators.
• The complete semantic table markup, labelled search controls and basic CSS are supplied. Implement state and data operations in logic.js. No substantial HTML/CSS authoring, network fetching, persistence, virtualization or table library is required.

Examples

Input: People: search "  A  " and filter Age by "36"
Output: Ada and Donald match; the filtered count is 2 of 8 rows.

Input: Inventory: filter Price by "20", then sort Product ascending
Output: Monitor, Mouse and Stand match; pagination operates on these three records.

Input: Filter on the last page, then Clear filters
Output: Each action returns to page one; sorting and rows per page remain selected.