Tanstack Table

TanStack Table

Headless UI library for building tables and datagrids. Framework-agnostic core, React adapter (@tanstack/react-table) primary.

Workflow

Determine which feature applies and load the relevant reference:

1. Columns - define accessors, headers, groups, sizing, ordering, pinning, visibility: references/columns.md
2. Data & Row Models - data shape, row model pipeline, Row/Cell types: references/data.md
3. Sorting - sort state, multi-sort, custom sort functions, manual sorting: references/sorting.md
4. Filtering - column filters, global filters, faceting (column + global): references/filtering.md
5. Fuzzy Filtering - @tanstack/match-sorter-utils integration: references/fuzzy-filtering.md
6. Pagination - client-side and server-side pagination: references/pagination.md
7. Row Selection - checkbox patterns, single/multi select, sub-row selection: references/selection.md
8. Grouping - grouping state, aggregation, rendering grouped cells: references/grouping.md
9. Expanding - sub-rows, detail panels, expand/collapse APIs: references/expanding.md
10. Row Pinning - pin rows to top/bottom, keep pinned rows option: references/row-pinning.md
11. Virtualization - @tanstack/react-virtual integration, row/column virtualization: references/virtualization.md
12. State - controlled vs uncontrolled, onChange handlers, auto-reset: references/state.md
13. Rendering - flexRender, table structure, types, framework adapters: references/rendering.md
14. Advanced - editable cells, DnD reordering, div-based tables: references/advanced.md
15. Custom Features - extending table with _features and TypeScript declaration merging: references/custom-features.md

Principles

• getCoreRowModel() is the only required row model - everything else is opt-in
• Memoize column definitions with useMemo or define outside the component
• Keep data references stable - avoid inline data={fetch()}, use state/memo
• Row models are composable - pipeline: Core → Filtered → Grouped → Sorted → Expanded → Paginated
• Only import row models you need - each is tree-shakeable
• flexRender renders cells and headers from column defs
• For server-side operations - set manualSorting/manualFiltering/manualPagination and manage state yourself
• createColumnHelper<T>() for maximum type safety