tanstack-table

TanStack Table is a headless UI library for building data tables and datagrids. It provides logic for sorting, filtering, pagination, grouping, expanding, column pinning/ordering/visibility/resizing, and row selection - without rendering any markup or styles. Package: @tanstack/react-table Utilities: @tanstack/match-sorter-utils (fuzzy filtering) Current Version: v8 - Column Definitions - describe columns (data access, rendering, features) - Table Instance - central coordinator with state and APIs - Row Models - data processing pipeline (filter -> sort -> group -> paginate) - Headers, Rows, Cells - renderable units - Always memoize data and columns to prevent infinite re-renders - Use flexRender for all header/cell/footer rendering - Use table.getRowModel().rows for final rendered rows (not getCoreRowModel) - Import only needed row models - each adds processing to the pipeline - Use getRowId for stable row keys when data has unique IDs - Use manualX options for server-side operations - Pair controlled state with both state.X and onXChange - Use module augmentation for custom meta, filter fns, sort fns - Use column helper for type-safe column definitions - Set autoResetPageIndex: true when filtering should reset pagination - Defining columns inline (creates new ref each render) - Forgetting getCoreRowModel() (required for all tables) - Using row models without importing them -...