Data table
Usage
Sortable, searchable, paginated table over `@tanstack/react-table`'s headless row model (MIT) — the reference used jQuery DataTables plus a dozen of its extension plugins, none of which fit a React app. Only the DOM and styling are ours, driven by brand tokens; the sort/filter/pagination state machine is reused, not reimplemented.import { Datatable } from '@summonware/ui';Best practices
DoRender status/tone information with `Badge`, not raw text — a table of plain strings is much harder to scan.
DoKeep the global search for "find this row" — column-specific filters belong in a toolbar above the table, not bolted onto every header.
Don'tPut more than ~6-7 columns in front of a user at once. Past that, a detail view or a narrower default column set serves them better.
Anatomy
SearchFilters every visible cell, not just one column.
Header *Sortable when the column defines it — click to cycle ascending/descending.
PaginationPrev/next, sized by `pageSize`.
Examples
Common configurations, variations and states.Orders table
6 of 6
| ORD-2043 | Acme Ltd | Paid | $1,004.36 |
| ORD-2044 | Globex | Pending | $248.00 |
| ORD-2045 | Initech | Overdue | $97.50 |
| ORD-2046 | Umbrella Corp | Paid | $3,412.00 |
Page 1 of 2
Search, sort by clicking a header, and page through results — all real, not decorative.
Reference variants
0 of 72 labels from the reference are demonstrated above.DOM/JqueryColumn RenderingMultiple Table Control ElementsComplex Headers With Column VisibilityLanguage FileSetting DefaultsRow GroupingFooter CallbackCustom Toolbar ElementsRow Created CallbackAdd RowsIndividual Column Searching (Text Inputs)Individual Column Searching (Select Inputs)Row Selection (Multiple Rows)Row Selection And Deletion (Single Row)Form InputsShow / Hide Columns DynamicallySearch API (Regular Expressions)Auto FillKeyTable IntegrationColumn SelectorScrolling DataTableCustom ButtonClass NamesKeyboard ActivationMulti-Level CollectionsMultiple Button GroupsBasic Column ReorderRealtime UpdatingState SavingPredefined Column OrderingHTML5 Export ButtonsColumn SelectorsExcel - Cell BackgroundCustom File (JSON)Left and Right Fixed ColumnsRight Fixed ColumnBasic initializationHeader And Footer FixedColReorder IntegrationScrolling TableFocus Cell Custom StylingConfiguration OptionNew ConstructorImmediately Show Hidden DetailsBasic Row ReorderFull Row SelectionResponsive IntegrationReorder EventsBasic Table ScrollAPISimple InitializationMulti Item SelectionCell SelectionButtonsAPI Plug-in MethodsOrdering Plug-ins (with type detection)Custom Filtering - Range SearchLive DOM OrderingHTML (DOM) Sourced DataJavascript Sourced DataBase StyleNo Styling ClassesBase Style - CompactBase Style - HoverColumn ManipulationDatetime SortingDynamic ImportBasic TableFetch APIFiltersTables Methods