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

state-management

Coordinate TanStack Table v9 state slices across initialState, controlled state, and atoms.

28.3k|3.6k|Updated Oct 20, 2016
Search Tags:#state management#server-side pagination#tanstack table#atoms#controlled components#sorting state#reset semantics
One-click install
npx skills add https://github.com/TanStack/table --skill state-management-tanstack
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: state-management
Source: https://github.com/TanStack/table/tree/main/packages/table-core/skills/state-management
Command: npx skills add https://github.com/TanStack/table --skill state-management-tanstack

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Table v9 state ownership can become confusing when mixing initialState, controlled React state, and shared external atoms, leading to “stuck” UI, silently ignored updates, and incorrect server-side behavior.

Core Features & Use Cases

  • Coordinate state ownership: Choose exactly one source of truth per slice among internal defaults, initialState, state+on*Change (v8-style), and atoms (v9 preferred).
  • Apply correct slice precedence: Atoms override state and initialState, and baseAtoms provide the fallback layer—so precedence is deterministic.
  • Support server-side / manual modes: Correctly pair manualSorting, manualFiltering, manualPagination, manualGrouping, and manualExpanding with server-prepared rows.
  • Use reset safely: Understand how reset() differs from feature-specific reset APIs when slices are owned externally.
  • Work with state shapes: Correctly use SortingState, PaginationState, RowSelectionState, ColumnFiltersState, and GroupingState for consistent updates.

Quick Start

Configure TanStack Table by picking a single ownership pattern for each state slice, then wire the matching setters (feature APIs or on*Change) so UI actions update the same state source you read from.

Frequently Asked Questions about state-management

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

FAQPage Schema
How do I manage TanStack Table state ownership when mixing initialState, controlled state, and atoms?▼

TanStack Table state ownership requires choosing exactly one source of truth per state slice among internal defaults, initialState, state with on*Change, and v9 atoms to prevent stuck UI and silently ignored updates.

What is the correct state precedence for atoms and initialState in TanStack Table v9?▼

State precedence in TanStack Table v9 is deterministic: atoms override both controlled state and initialState, while baseAtoms provide the fallback layer to ensure consistent slice behavior across the datagrid.

How do I configure TanStack Table sorting and pagination for server-side data?▼

Server-side pagination and sorting require pairing manualSorting, manualFiltering, and manualPagination flags with server-prepared rows, ensuring the external state correctly drives the remote data fetching.

Does TanStack Table reset work differently when state is controlled externally?▼

Yes, reset semantics change when state is controlled externally; the global reset() API differs from feature-specific reset APIs, requiring careful handling of atom-aware state slices to avoid unintended data loss.

What state shapes do I need for consistent TanStack Table v9 updates?▼

Consistent TanStack Table v9 updates require using typed state shapes like SortingState, PaginationState, RowSelectionState, ColumnFiltersState, and GroupingState to ensure predictable slice synchronization.

Why does my TanStack Table UI get stuck when mixing controlled state with atoms?▼

A stuck TanStack Table UI happens when multiple state sources compete for the same slice; you must select a single ownership pattern per slice and wire the matching setters to update that exact source.

Related Skills

Explore More Software Engineering Skills→
TanStackTanStack
28.3k

svelte/migrate-v8-to-v9

Migrate TanStack Svelte Table v8 apps to the v9 Svelte 5 rune-based API.

Official
Advanced
TanStackTanStack
28.3k

preact/compose-with-tanstack-query

Implement server-side data loading for Preact tables with TanStack Query.

Official
Intermediate
buchananwillbuchananwill
2

scaffold-dashboard-patterns

Codify dashboard SPA patterns for Mantine, TanStack Router, and TanStack Query.

Community
Advanced
nccasianccasia

react-state-management

Guide modern React state management with Redux Toolkit, Zustand, Jotai, and React Query.

Official
Advanced