What is this?
TanStack Table is a headless table library for building powerful datagrids in TypeScript and JavaScript. You may know it by its adapter names — React Table, Vue Table, Solid Table, Svelte Table.
TanStack Table is a headless table library for building powerful datagrids in TypeScript and JavaScript. You may know it by its adapter names — React Table, Vue Table, Solid Table, Svelte Table.What does it mean that the tables are headless?It ships logic instead of pixels: a framework-agnostic core handles table state and behavior while you bring your own UI, components and styles, so markup and looks stay 100 percent yours.
It ships logic instead of pixels: a framework-agnostic core handles table state and behavior while you bring your own UI, components and styles, so markup and looks stay 100 percent yours.How do I add it to a project?Install the adapter for your framework from npm — for React that is @tanstack/react-table — and assemble your table from its hooks and options, rendering the markup yourself.
Install the adapter for your framework from npm — for React that is @tanstack/react-table — and assemble your table from its hooks and options, rendering the markup yourself.Which frameworks does it work with?Adapters exist for React, Preact, Solid, Vue, Svelte, Angular, Ember, Lit, Alpine and Octane around one shared core. You pick the package for your stack, like @tanstack/react-table.
Adapters exist for React, Preact, Solid, Vue, Svelte, Angular, Ember, Lit, Alpine and Octane around one shared core. You pick the package for your stack, like @tanstack/react-table.Will it hold up with really big tables?Yes — it is explicitly lightweight, virtualizable and server-side friendly, so large datasets are usually handled by pairing it with a virtualizer. Virtualization itself is not built in.
Yes — it is explicitly lightweight, virtualizable and server-side friendly, so large datasets are usually handled by pairing it with a virtualizer. Virtualization itself is not built in.I have heard of React Table — is that a separate project?No — React Table is the React-facing name of TanStack Table. Each binding is published as its own Table package around one shared core, which is why the README introduces itself through that list of names.
No — React Table is the React-facing name of TanStack Table. Each binding is published as its own Table package around one shared core, which is why the README introduces itself through that list of names.Why pick a headless table over a ready-made grid component?Upfront effort: you write the markup, styles and component chrome yourself instead of dropping in a pre-styled grid. In exchange nothing in the UI is locked in, so fully custom designs stay straightforward.
Upfront effort: you write the markup, styles and component chrome yourself instead of dropping in a pre-styled grid. In exchange nothing in the UI is locked in, so fully custom designs stay straightforward.How mature is the project?It has been around since 2016, has roughly 28.5k GitHub stars, and sits in the wider TanStack ecosystem next to Query, Router, Form and Virtual.
It has been around since 2016, has roughly 28.5k GitHub stars, and sits in the wider TanStack ecosystem next to Query, Router, Form and Virtual.What are similar projects?ag-grid, handsontable, shaders, bootstrap-table, mitosis, canvas-ui, query, x-spreadsheet
ag-grid, handsontable, shaders, bootstrap-table, mitosis, canvas-ui, query, x-spreadsheet