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

solid/table-state

Wire TanStack Table state into Solid's reactivity model for datagrids.

28.3k|3.6k|Updated Oct 20, 2016
Search Tags:#reactivity#pagination#sorting#tanstack table#solid-js#table state#solid-store
One-click install
npx skills add https://github.com/TanStack/table --skill solid-table-state
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: solid/table-state
Source: https://github.com/TanStack/table/tree/main/packages/solid-table/skills/solid/table-state
Command: npx skills add https://github.com/TanStack/table --skill solid-table-state

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It solves the confusion and bugs caused by misunderstanding how TanStack Table state works in Solid, especially around reactive getters and the fact that table.state is an accessor that must be called.

Core Features & Use Cases

  • Correctly wire Solid reactivity into createTable by using reactive getters for options like data, so the table recomputes when upstream signals change.
  • Read table state properly with table.state() to access pagination, sorting, filtering, and other slices as Solid accessors, not as direct values.
  • Choose the right state ownership model using initialState, state/on*Change (signal-backed), or external atoms via @tanstack/solid-store for shared state across components.
  • Render with FlexRender and optionally createTableHook to standardize table components and conventions across an app, including header/cell rendering patterns.

Quick Start

Use the solid/table-state skill to correctly implement createTable with reactive getters, read state via table.state().<slice>, and optionally connect shared slices with @tanstack/solid-store selectors.

Frequently Asked Questions about solid/table-state

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

FAQPage Schema
How do I make TanStack Table state reactive in a Solid-js datagrid?▼

To make TanStack Table state reactive in Solid-js, treat table.state as an accessor that must be called, and use reactive option getters for signal-driven inputs like data so the table recomputes when upstream signals change.

Why is my Solid-js table state not updating when pagination or sorting changes?▼

Solid-js table state fails to update when you read table.state properties as direct values instead of calling table.state() as an accessor, which breaks Solid's reactivity tracking for pagination and sorting slices.

How do I share TanStack Table state across multiple Solid-js components?▼

To share TanStack Table state across Solid-js components, integrate with @tanstack/solid-store using createAtom and useSelector to externalize slices, or use signal-backed state and on*Change callbacks for controlled state ownership.

What is the correct way to wire createTable options in Solid-js?▼

The correct way to wire createTable options in Solid-js is using reactive getters for options like data, ensuring the table recomputes when upstream signals change rather than passing static values.

Can I use @tanstack/solid-store to manage external table state slices?▼

Yes, you can use @tanstack/solid-store to manage external table state slices by integrating createAtom and useSelector, enabling shared reactive state across components for pagination, sorting, and filtering.

When should I use initialState versus controlled state in a Solid-js TanStack table?▼

Use initialState for unmanaged default table state in Solid-js, or switch to signal-backed state with on*Change callbacks when you need controlled state ownership and external synchronization across components.

Related Skills

Explore More Software Engineering Skills→
TanStackTanStack
28.3k

solid/compose-with-tanstack-devtools

Registers Solid Table instances with TanStack Devtools for interactive state inspection.

Official
Basic
TanStackTanStack
28.3k

solid/getting-started

Set up TanStack Table v9 in Solid with typed features and row models.

Official
Intermediate
TanStackTanStack
28.3k

solid/compose-with-tanstack-store

Compose TanStack Table state with TanStack Store atoms in Solid applications.

Official
Intermediate
TanStackTanStack
28.3k

lit/table-state

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

Official
Intermediate