# React Tablekit

> A React data table with a framework-agnostic core. Pagination, search, filters, sorting, grouping, expansion, selection and faceting each run in the browser or on your server. Every part is a replaceable slot, every interaction is overridable, and every visual value is a CSS variable.

Every page below in one file, with the source of every example: [llms-full.txt](https://react-tablekit.vercel.app/llms-full.txt)

## Getting started

- [Overview](https://react-tablekit.vercel.app/react-tablekit/index.md): A headless-core React data table where every feature works on the client and on the server.
- [Installation](https://react-tablekit.vercel.app/react-tablekit/getting-started/installation/index.md): Install the package, import the stylesheet and render your first table.
- [Quickstart](https://react-tablekit.vercel.app/react-tablekit/getting-started/quickstart/index.md): A complete first table: data, columns and the features that are on by default.
- [AI context](https://react-tablekit.vercel.app/react-tablekit/getting-started/ai-context/index.md): The whole documentation as one Markdown file, with the source of every example, for coding agents.
- [Requirements and compatibility](https://react-tablekit.vercel.app/react-tablekit/getting-started/requirements/index.md): Supported React versions, browsers, bundlers and rendering environments.
- [FAQ](https://react-tablekit.vercel.app/react-tablekit/getting-started/faq/index.md): Short answers about licensing, scope, styling and how this library compares.
- [Support](https://react-tablekit.vercel.app/react-tablekit/getting-started/support/index.md): Where to ask a question, report a bug and request a feature.
- [Versions](https://react-tablekit.vercel.app/react-tablekit/getting-started/versions/index.md): Which versions are supported, and what a minor release is allowed to change.

## Features

- [All features](https://react-tablekit.vercel.app/react-tablekit/all-features/index.md): Every capability the table ships with, grouped the way the sidebar groups them.
- [Columns](https://react-tablekit.vercel.app/react-tablekit/columns/index.md): Accessors, headers, types and formatting: the column definition is where most of a table is decided.
- [Sorting](https://react-tablekit.vercel.app/react-tablekit/sorting/index.md): Click to sort, shift-click to add a column, and comparators that understand text, dates and your own domain order.
- [Global search](https://react-tablekit.vercel.app/react-tablekit/global-search/index.md): One input that matches across every searchable column, with debouncing, a minimum length and optional match highlighting.
- [Column filters](https://react-tablekit.vercel.app/react-tablekit/column-filters/index.md): 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](https://react-tablekit.vercel.app/react-tablekit/faceting/index.md): Filter options and counts computed from the data: from the loaded rows in client mode, from your API in server mode.
- [Pagination](https://react-tablekit.vercel.app/react-tablekit/pagination/index.md): Six presentations of the same state (numbered, compact, simple, load-more, infinite or none), including cursor-based paging.
- [Row selection](https://react-tablekit.vercel.app/react-tablekit/row-selection/index.md): Checkboxes or radios, range selection with shift-click, a selection bar for bulk actions, and select-all that survives server paging.
- [Expansion](https://react-tablekit.vercel.app/react-tablekit/expansion/index.md): 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](https://react-tablekit.vercel.app/react-tablekit/client-and-server/index.md): The same table and the same props, with the work done in the browser, on your API, or split feature by feature.
- [Tree data](https://react-tablekit.vercel.app/react-tablekit/tree-data/index.md): Hierarchical rows with indentation, expand toggles and children that can be loaded from the server when a branch is opened.
- [Grouping](https://react-tablekit.vercel.app/react-tablekit/grouping/index.md): Group rows by one column or several, with aggregates in the group row and totals in the footer.
- [Column pinning](https://react-tablekit.vercel.app/react-tablekit/column-pinning/index.md): Freeze columns to either edge, stacked and responsive, with a shadow that appears only when content actually scrolls underneath.
- [Column sizing](https://react-tablekit.vercel.app/react-tablekit/column-sizing/index.md): Percentage or pixel widths, a keyboard-operable resize handle, and double-click autosizing that measures the rendered rows.
- [Column ordering](https://react-tablekit.vercel.app/react-tablekit/column-ordering/index.md): Drag headers to reorder, or move them from the columns menu with the keyboard. Pinned groups and locked positions are respected.
- [Column visibility](https://react-tablekit.vercel.app/react-tablekit/column-visibility/index.md): A columns menu for the reader, a per-column menu for actions, and responsive hiding that needs no state at all.
- [Column footers](https://react-tablekit.vercel.app/react-tablekit/column-footers/index.md): A footer row with per-column totals, computed over the current page or over everything the filters left.
- [Row pinning](https://react-tablekit.vercel.app/react-tablekit/row-pinning/index.md): Keep chosen rows at the top or the bottom while the rest of the table sorts, filters and pages away beneath them.
- [Row numbers](https://react-tablekit.vercel.app/react-tablekit/row-numbers/index.md): A numbered column that counts through the whole result set, or restarts on every page.
- [Row appearance](https://react-tablekit.vercel.app/react-tablekit/row-appearance/index.md): 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](https://react-tablekit.vercel.app/react-tablekit/sticky-header-and-footer/index.md): Keep the header and the totals in view while the rows scroll, in both axes when columns are pinned.
- [Surface](https://react-tablekit.vercel.app/react-tablekit/surface/index.md): The panel the table sits on: a bordered card with its pagination attached, or nothing at all, with corners you choose.
- [Density](https://react-tablekit.vercel.app/react-tablekit/density/index.md): Three row heights the reader can switch between (compact, standard and comfortable), driven entirely by tokens.
- [Virtualization](https://react-tablekit.vercel.app/react-tablekit/virtualization/index.md): 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](https://react-tablekit.vercel.app/react-tablekit/responsive/index.md): Breakpoint-aware props, a card layout for small screens, and a server-rendered first paint that does not jump.
- [Toolbar](https://react-tablekit.vercel.app/react-tablekit/toolbar/index.md): The strip above the table (search, filters, columns, density, export), either as one component or as parts you place yourself.
- [Loading and empty states](https://react-tablekit.vercel.app/react-tablekit/loading-and-empty-states/index.md): 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](https://react-tablekit.vercel.app/react-tablekit/keyboard-navigation/index.md): The WAI-ARIA data grid pattern: arrow keys between cells, one tab stop for the whole table, and Enter to reach interactive content.
- [Export](https://react-tablekit.vercel.app/react-tablekit/export/index.md): CSV of the page, the selection or everything matching, chunked through your API when the result is larger than the browser holds.
- [Persistence](https://react-tablekit.vercel.app/react-tablekit/persistence/index.md): Put table state in the URL, in storage, or in both, so a link reproduces a view and a reload does not lose one.
- [Headless](https://react-tablekit.vercel.app/react-tablekit/headless/index.md): The engine without the markup: every feature, none of the table. Use it for cards, lists, charts, or a table you draw yourself.
- [Localization](https://react-tablekit.vercel.app/react-tablekit/localization/index.md): Every string the table can show, in one object, with number, date and currency formatting that follows the same locale.

## Demos

- [Demos](https://react-tablekit.vercel.app/react-tablekit/demos/index.md): Complete application screens, rather than one feature at a time.
- [Account list](https://react-tablekit.vercel.app/react-tablekit/demos/account-list/index.md): A server-mode list screen: search in the page header, debounced requests, numbered pages, and the loading, refetch and empty states that go with them.
- [Asset list](https://react-tablekit.vercel.app/react-tablekit/demos/asset-list/index.md): Interactive content inside a cell: a chip list that collapses past three items, where each chip is a button and the row click still behaves.
- [Reading history](https://react-tablekit.vercel.app/react-tablekit/demos/reading-history/index.md): A server-sorted time series against a REST endpoint whose parameter names are nothing like the table's, mapped in one place.
- [Asset picker](https://react-tablekit.vercel.app/react-tablekit/demos/asset-picker/index.md): A table inside a dialog: single selection with radio semantics, row-click to choose, and a client-side dataset small enough to filter instantly.
- [Playground](https://react-tablekit.vercel.app/react-tablekit/demos/playground/index.md): Every prop of DataTable, generated from the types, with a live table and the code for whatever you have configured.
- [Theme editor](https://react-tablekit.vercel.app/react-tablekit/demos/theme-editor/index.md): Change any design token and watch the table follow, then copy the CSS or the theme object into your own project.

## Reference

- [API reference](https://react-tablekit.vercel.app/react-tablekit/api/index.md): Generated reference for every exported symbol, prop, slot, handler, token and key.
- [DataTableProps](https://react-tablekit.vercel.app/react-tablekit/api/data-table-props/index.md): Every prop of the all-in-one component, the view props shared with DataTable.Root, and the imperative handle.
- [ColumnDef](https://react-tablekit.vercel.app/react-tablekit/api/column-def/index.md): The shape of a column: accessors, rendering, types, sizing, pinning, filtering, grouping and export.
- [TableInstance](https://react-tablekit.vercel.app/react-tablekit/api/table-instance/index.md): The headless instance returned by useDataTable and createTable, with its row, column, cell and header objects.
- [TableState](https://react-tablekit.vercel.app/react-tablekit/api/table-state/index.md): Every state slice, the engine options that own them, and the normalized TableQuery sent to a server.
- [Hooks](https://react-tablekit.vercel.app/react-tablekit/api/hooks/index.md): Every exported hook: the table itself, server data, state selection, detail panels, breakpoints, virtualization and persistence.
- [Utilities](https://react-tablekit.vercel.app/react-tablekit/api/utilities/index.md): The column helper, data-source adapters, CSV export, pagination items, theming helpers and the headless engine factory.
- [TableSlots](https://react-tablekit.vercel.app/react-tablekit/api/slots/index.md): Every replaceable component, with the element it renders and the props it receives.
- [Handlers](https://react-tablekit.vercel.app/react-tablekit/api/handlers/index.md): Every overridable interaction, with the intent it receives and what calling next does.
- [Theme tokens](https://react-tablekit.vercel.app/react-tablekit/api/theme-tokens/index.md): Every design token, its CSS custom property and its value in each preset.
- [Localization keys](https://react-tablekit.vercel.app/react-tablekit/api/localization-keys/index.md): Every string the table can render, with its English default.
- [Icons](https://react-tablekit.vercel.app/react-tablekit/api/icons/index.md): Every icon the table renders, and the name to pass when replacing one.

## Customization

- [How to customize](https://react-tablekit.vercel.app/react-tablekit/customization/index.md): Nine levels of customization, from a class name to replacing the renderer entirely.
- [Theming](https://react-tablekit.vercel.app/react-tablekit/customization/theming/index.md): Pick a preset, override the tokens you disagree with, and get dark mode without a second stylesheet.
- [Design tokens](https://react-tablekit.vercel.app/react-tablekit/customization/tokens/index.md): What the token families control, how they cascade, and where to override them so a change reaches the whole table.
- [Overriding structure](https://react-tablekit.vercel.app/react-tablekit/customization/structure/index.md): Unstyled mode, primitive slots and composable parts: how to put a design system's own components in charge without losing the engine.
- [Slots](https://react-tablekit.vercel.app/react-tablekit/customization/slots/index.md): Replace any part of the table with your own component, and wrap the default rather than reimplementing it.
- [Rows and cells](https://react-tablekit.vercel.app/react-tablekit/customization/rows-and-cells/index.md): Prop getters, class and style callbacks, and full row renderers that still let you keep the default markup.
- [Cell building blocks](https://react-tablekit.vercel.app/react-tablekit/customization/cell-building-blocks/index.md): Chips, truncated text, two-line text, tooltips and a row actions menu: the small components a cell usually needs, already themed and accessible.
- [Handler middleware](https://react-tablekit.vercel.app/react-tablekit/customization/handlers/index.md): Wrap any interaction to observe it, change its input or cancel it, without reimplementing what it does.
- [Recipes](https://react-tablekit.vercel.app/react-tablekit/customization/recipes/index.md): Short answers to the questions that come up once a table is real: saved views, row navigation, custom sort orders, bulk actions and more.

## Guides

- [Guides](https://react-tablekit.vercel.app/react-tablekit/guides/index.md): Long-form guides for the decisions that span more than one capability.
- [Server data](https://react-tablekit.vercel.app/react-tablekit/guides/server-data/index.md): Wiring a table to an API end to end: the query, the adapter, the states, and the decisions that are easy to get wrong.
- [Best practices](https://react-tablekit.vercel.app/react-tablekit/guides/best-practices/index.md): The choices that make a table pleasant to use and cheap to maintain, and the ones that quietly make it neither.
- [Performance](https://react-tablekit.vercel.app/react-tablekit/guides/performance/index.md): Where a table's time actually goes, what the library does about it, and the four things you control that matter most.
- [Testing](https://react-tablekit.vercel.app/react-tablekit/guides/testing/index.md): How to write tests against a table that survive a redesign: query by role, drive the engine directly, and control the clock.
- [Accessibility](https://react-tablekit.vercel.app/react-tablekit/guides/accessibility/index.md): What the table does for you, what it announces, and the four ways a customization can undo it.
- [Security](https://react-tablekit.vercel.app/react-tablekit/guides/security/index.md): What the table does with the data you give it, what it sends, and the places where a table can become an injection or disclosure problem.

## Integrations

- [Integrations](https://react-tablekit.vercel.app/react-tablekit/integrations/index.md): Working with the libraries a React application usually already has.
- [React Query](https://react-tablekit.vercel.app/react-tablekit/integrations/react-query/index.md): Let TanStack Query own the fetching and caching while the table owns the query: one effect, no duplicated state.
- [React Router](https://react-tablekit.vercel.app/react-tablekit/integrations/react-router/index.md): Put the table's state in the URL through the router's own history, so filters are navigations and the back button works.
- [Next.js](https://react-tablekit.vercel.app/react-tablekit/integrations/next-js/index.md): Server components, the client boundary, and rendering a first paint that does not jump when it hydrates.
- [Tailwind CSS](https://react-tablekit.vercel.app/react-tablekit/integrations/tailwind/index.md): Utility classes on any part of the table, tokens driven from your Tailwind theme, and why the cascade layer means no !important.
- [i18next](https://react-tablekit.vercel.app/react-tablekit/integrations/i18next/index.md): Build the table's localization object from your existing catalogue, so its strings live where all your other strings live.

## Migration

- [Migration](https://react-tablekit.vercel.app/react-tablekit/migration/index.md): How upgrades between major versions will be documented. 1.0.0 is the first stable release, so there is nothing to migrate yet.

## Discover more

- [Discover more](https://react-tablekit.vercel.app/react-tablekit/discover-more/index.md): Where the project is going, and what has already shipped.
- [Roadmap](https://react-tablekit.vercel.app/react-tablekit/discover-more/roadmap/index.md): What is planned after 1.0, what is deliberately not planned, and how to influence either.
- [Changelog](https://react-tablekit.vercel.app/react-tablekit/discover-more/changelog/index.md): What changed in each release, and where the authoritative record lives.