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

react/table-state

Integrates TanStack Table v9 state with React via selectors and atoms.

28.3k|3.6k|Updated Oct 20, 2016
Search Tags:#state management#tanstack table#atoms#useTable selector#FlexRender#react reactivity#fine-grained subscriptions
One-click install
npx skills add https://github.com/TanStack/table --skill react-table-state
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react/table-state
Source: https://github.com/TanStack/table/tree/main/packages/react-table/skills/react/table-state
Command: npx skills add https://github.com/TanStack/table --skill react-table-state

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the challenge of wiring TanStack Table v9 state into React components without sacrificing performance or creating re-render bugs.

Core Features & Use Cases

  • UseTable state consumption with a selector: Use the second argument selector to control when the component re-renders versus opting out for custom subscriptions.
  • Fine-grained subscriptions: Render with table.Subscribe at the component level and use standalone Subscribe in header/cell contexts where table.Subscribe is not available.
  • External slice ownership via atoms: Own table slices with useCreateAtom and pass them through options.atoms so the table writes directly to your external state.
  • Flexible rendering integration: Use table.FlexRender for headers and cells while keeping reactivity scoped correctly.
  • Reusable shared configuration: Package shared feature/row-model/cell config using createTableHook to produce useAppTable and App components*.

Quick Start

Use the react/table-state Skill to wire your React TanStack Table so state reads happen through useTable selectors and Subscribe walls, while updates flow through options.atoms using atoms created with useCreateAtom.

Frequently Asked Questions about react/table-state

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

FAQPage Schema
How do I prevent unnecessary re-renders in a React TanStack Table component?▼

To prevent unnecessary re-renders in React TanStack Table, use the second argument selector of the useTable hook to control exactly when the component re-renders based on specific state slices.

How does fine-grained subscription work for TanStack Table headers and cells?▼

Fine-grained subscriptions for TanStack Table headers and cells work by using standalone Subscribe in header and cell contexts where table.Subscribe is unavailable, ensuring scoped reactivity.

How do I wire external state atoms into a TanStack Table v9 datagrid?▼

Wire external state atoms into a TanStack Table datagrid by creating slices with useCreateAtom and passing them through options.atoms so the table writes directly to your external state with correct precedence.

What is the best way to render TanStack Table headers and cells while keeping reactivity scoped?▼

The best way to render TanStack Table headers and cells while keeping reactivity scoped is using table.FlexRender for flexible rendering combined with useTable selectors for state consumption.

Can I package shared TanStack Table configuration for reuse across multiple datagrids?▼

You can package shared TanStack Table configuration for reuse across multiple datagrids by using createTableHook to produce a useAppTable hook and shared App components for consistent feature and row-model setup.

Related Skills

Explore More Software Engineering Skills→
TanStackTanStack
28.3k

preact/getting-started

Set up a TanStack table in Preact v9 with sorting and pagination.

Official
Intermediate
TanStackTanStack
28.3k

lit/table-state

Wire reactive TanStack Table v9 state into LitElement hosts with TableController.

Official
Intermediate
TanStackTanStack
28.3k

react/compose-with-tanstack-store

Compose TanStack Table with TanStack Store to manage table state slices externally.

Official
Intermediate
timequitytimequity
6

react-native-expert

Standardize React Native navigation, state management, and performance optimization.

Official
Advanced