Skip to content

Each capability below is one page with a runnable demo, its variations, the ways it can be customised, its known limitations and links to the generated reference.

What is in scope: rendering, querying and interacting with tabular data, in the browser or against a server. What is deliberately out: fetching (bring your own), charting, pivot tables and spreadsheet-style editing. Inline editing is specified and planned; see the roadmap.

Core features

  • Columns

    Accessors, headers, types and formatting: the column definition is where most of a table is decided.

  • Sorting

    Click to sort, shift-click to add a column, and comparators that understand text, dates and your own domain order.

  • Global search

    One input that matches across every searchable column, with debouncing, a minimum length and optional match highlighting.

  • Column filters

    Per-column filters in a panel, a popover or a filter row, with a control chosen from the column's type and values drawn from the data.

  • Faceting

    Filter options and counts computed from the data: from the loaded rows in client mode, from your API in server mode.

  • Pagination

    Six presentations of the same state (numbered, compact, simple, load-more, infinite or none), including cursor-based paging.

  • Row selection

    Checkboxes or radios, range selection with shift-click, a selection bar for bulk actions, and select-all that survives server paging.

  • Expansion

    Detail panels that open under a row, lazily rendered, animated, and pinned to the viewport width so a wide table cannot scroll them away.

  • Client and server

    The same table and the same props, with the work done in the browser, on your API, or split feature by feature.

Advanced features

  • Tree data

    Hierarchical rows with indentation, expand toggles and children that can be loaded from the server when a branch is opened.

  • Grouping

    Group rows by one column or several, with aggregates in the group row and totals in the footer.

Display & layout

  • Column pinning

    Freeze columns to either edge, stacked and responsive, with a shadow that appears only when content actually scrolls underneath.

  • Column sizing

    Percentage or pixel widths, a keyboard-operable resize handle, and double-click autosizing that measures the rendered rows.

  • Column ordering

    Drag headers to reorder, or move them from the columns menu with the keyboard. Pinned groups and locked positions are respected.

  • Column visibility

    A columns menu for the reader, a per-column menu for actions, and responsive hiding that needs no state at all.

  • Column footers

    A footer row with per-column totals, computed over the current page or over everything the filters left.

  • Row pinning

    Keep chosen rows at the top or the bottom while the rest of the table sorts, filters and pages away beneath them.

  • Row numbers

    A numbered column that counts through the whole result set, or restarts on every page.

  • Row appearance

    Striping, hover and per-row classes, styles and props: the way a row shows what it is without a custom renderer.

  • Sticky header and footer

    Keep the header and the totals in view while the rows scroll, in both axes when columns are pinned.

  • Surface

    The panel the table sits on: a bordered card with its pagination attached, or nothing at all, with corners you choose.

  • Density

    Three row heights the reader can switch between (compact, standard and comfortable), driven entirely by tokens.

  • Virtualization

    Render the rows on screen instead of all of them: a hundred thousand rows with the same markup, the same keyboard model and the same counts for screen readers.

  • Responsive

    Breakpoint-aware props, a card layout for small screens, and a server-rendered first paint that does not jump.

Interaction

  • Toolbar

    The strip above the table (search, filters, columns, density, export), either as one component or as parts you place yourself.

  • Loading and empty states

    Skeletons, a delayed overlay, an empty state that knows why it is empty, and errors that keep the rest of the table usable.

  • Keyboard navigation

    The WAI-ARIA data grid pattern: arrow keys between cells, one tab stop for the whole table, and Enter to reach interactive content.

Automation

  • Export

    CSV of the page, the selection or everything matching, chunked through your API when the result is larger than the browser holds.

  • Persistence

    Put table state in the URL, in storage, or in both, so a link reproduces a view and a reload does not lose one.

Developer tools

  • Headless

    The engine without the markup: every feature, none of the table. Use it for cards, lists, charts, or a table you draw yourself.

  • Localization

    Every string the table can show, in one object, with number, date and currency formatting that follows the same locale.