skills.rest
TanStack
TanStackOFFICIAL
Explore all skills by this author →
Website𝕏@tan_stackGitHub

row-selection

Implements TanStack Table v9 row selection with stable IDs for filtered, grouped, and paginated views.

28.3k|3.6k|Updated Oct 20, 2016
Search Tags:#state management#grouping#tanstack-table#row selection#manual pagination#getRowId#indeterminate checkbox
One-click install
npx skills add https://github.com/TanStack/table --skill row-selection
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: row-selection
Source: https://github.com/TanStack/table/tree/main/packages/table-core/skills/row-selection
Command: npx skills add https://github.com/TanStack/table --skill row-selection

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you manage row selection state in TanStack Table v9 so selected rows remain consistent across filtering, grouping, and server-side pagination.

Core Features & Use Cases

  • Selection state modeling: Track selection via rowSelection with stable row IDs using rowSelection: Record<rowId, boolean | undefined>.
  • Selection APIs for different row scopes: Use getSelectedRowModel, getFilteredSelectedRowModel, and getGroupedSelectedRowModel to derive the right selected set for your UI.
  • Row and header interactions: Implement per-row selection (getIsSelected, getIsSomeSelected for indeterminate, getCanSelect, getCanMultiSelect, getToggleSelectedHandler) and header “select all” behavior (getIsAllRowsSelected, getIsSomeRowsSelected, getToggleAllRowsSelectedHandler, plus page-aware variants).
  • Selection modes and hierarchies: Configure enableRowSelection (boolean or predicate), switch between multi-select and radio-style single-select (enableMultiRowSelection: false), and control sub-row propagation (enableSubRowSelection).
  • Correctness under manualPagination: Emphasize that getRowId is essentially mandatory, and selection counts/actions should read from state.rowSelection to avoid page-scoped row models.

Quick Start

Tell your AI agent to “set up TanStack Table row selection with stable getRowId, a header select-all checkbox, per-row checkbox cells, and server-pagination-safe bulk actions reading from state.rowSelection.”

Frequently Asked Questions about row-selection

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I keep TanStack Table row selection state consistent across filtering and pagination?▼

To keep TanStack Table row selection consistent, use a stable getRowId function and read from state.rowSelection rather than page-scoped row models, ensuring selected rows remain tracked across filtering and manual pagination.

How do I implement a select all checkbox with indeterminate state in TanStack Table v9?▼

Implement a select all checkbox using getIsAllRowsSelected, getIsSomeRowsSelected, and getToggleAllRowsSelectedHandler on the header, while per-row cells use getIsSelected and getToggleSelectedHandler to manage individual row selection state.

Does TanStack Table support radio-style single row selection instead of multi-select?▼

Yes, TanStack Table supports radio-style single row selection by setting enableMultiRowSelection to false, which restricts the row selection state to one row at a time and disables multi-select behavior across the datagrid.

Why do my TanStack Table row selection counts reset when changing pages with manual pagination?▼

Row selection counts reset during manual pagination when getRowId is missing or improperly configured, causing ID collisions; reading directly from state.rowSelection instead of page-scoped row models ensures accurate cross-page selection tracking.

How do I control sub-row selection propagation in grouped TanStack Table views?▼

Control sub-row selection propagation in grouped views by configuring enableSubRowSelection as a boolean or predicate function, determining whether selecting a grouped parent row automatically selects its child rows within the table hierarchy.

Related Skills

Explore More Software Engineering Skills→
TanStackTanStack
28.3k

row-pinning

Pin user-specified rows to top or bottom regions in TanStack Table.

Official
Intermediate
AlexKapadiaAlexKapadia
6

bulk-export

Bundle selected Pixie runs or artefacts into a single server-side zip file.

Community
Advanced
xyqyearxyqyear

shadcn-datatable

Create data tables with TanStack Table v8 and shadcn/ui components.

Community
Intermediate
danghungtb26danghungtb26
3

tanstack-table-guide

Implement TanStack Table data tables with sorting, filtering, pagination, and row selection in React.

Community
Intermediate