Agent Skills
› NeverSight/learn-skills.dev
› tanstack-table
tanstack-table
GitHub基于 TanStack Table v8 构建无头 UI 数据表格和网格。支持 React，涵盖列定义、排序、过滤、分页、分组、展开、选择、虚拟化和状态管理等核心功能，提供框架无关的核心 API 及详细参考指南。
Trigger Scenarios
build a data table
add sorting to a table
paginate results
filter table data
create a datagrid
add row selection
virtualize a large table
Install
npx skills add NeverSight/learn-skills.dev --skill tanstack-table -g -y
SKILL.md
Frontmatter
{
"name": "tanstack-table",
"description": "Build tables and datagrids with TanStack Table v8. Covers column definitions, row models, sorting, filtering, pagination, grouping, expanding, row selection, column sizing\/ordering\/pinning\/visibility, virtualization, row pinning, faceting, fuzzy filtering, custom features, state management, and rendering. React adapter primary, core API is framework-agnostic. Use when asked to \"build a data table\", \"add sorting to a table\", \"paginate results\", \"filter table data\", \"create a datagrid\", \"add row selection\", \"virtualize a large table\", or any task involving 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:
- Columns - define accessors, headers, groups, sizing, ordering, pinning, visibility: references/columns.md
- Data & Row Models - data shape, row model pipeline, Row/Cell types: references/data.md
- Sorting - sort state, multi-sort, custom sort functions, manual sorting: references/sorting.md
- Filtering - column filters, global filters, faceting (column + global): references/filtering.md
- Fuzzy Filtering -
@tanstack/match-sorter-utilsintegration: references/fuzzy-filtering.md - Pagination - client-side and server-side pagination: references/pagination.md
- Row Selection - checkbox patterns, single/multi select, sub-row selection: references/selection.md
- Grouping - grouping state, aggregation, rendering grouped cells: references/grouping.md
- Expanding - sub-rows, detail panels, expand/collapse APIs: references/expanding.md
- Row Pinning - pin rows to top/bottom, keep pinned rows option: references/row-pinning.md
- Virtualization - @tanstack/react-virtual integration, row/column virtualization: references/virtualization.md
- State - controlled vs uncontrolled, onChange handlers, auto-reset: references/state.md
- Rendering - flexRender, table structure, types, framework adapters: references/rendering.md
- Advanced - editable cells, DnD reordering, div-based tables: references/advanced.md
- Custom Features - extending table with
_featuresand TypeScript declaration merging: references/custom-features.md
Principles
getCoreRowModel()is the only required row model - everything else is opt-in- Memoize column definitions with
useMemoor 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
flexRenderrenders cells and headers from column defs- For server-side operations - set
manualSorting/manualFiltering/manualPaginationand manage state yourself createColumnHelper<T>()for maximum type safety
Version History
- e0220ca Current 2026-07-05 22:13
