solid/compose-with-tanstack-store

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the challenge of integrating TanStack Solid Table state with TanStack Store so your table can share, isolate, and read state slices predictably across components.

Core Features & Use Cases

  • External atom ownership for shared state: Provide atoms: { ... } to let multiple parts of your app coordinate on a single pagination/sorting/etc. source of truth.
  • Three Solid-friendly read surfaces: Use table.atoms.<slice> for fine-grained reactive reads, table.store for snapshot-style access, and table.state() for Solid-idiomatic selector reads.
  • Targeted subscriptions with shallow comparison: Use useSelector (with optional shallow compare) or table.Subscribe for isolated rendering boundaries that avoid over-subscribing.

Quick Start

Provide external atoms in your createTable call via the atoms option for the slices you want to own, then read them using table.atoms.<slice>.get() or table.state() in tracked Solid scopes.

Frequently Asked Questions about solid/compose-with-tanstack-store

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

FAQPage Schema
How do I share TanStack Solid Table state across multiple components?

To share TanStack Solid Table state across components, provide external TanStack Store atoms in the `atoms` option during `createTable`, establishing a single source of truth for slices like pagination or sorting that multiple components can coordinate on.

What is the atom-wins rule when using TanStack Store with Solid Table?

The atom-wins rule dictates that when you provide an external TanStack Store atom for a specific state slice, that atom takes precedence over any `state` and `on*Change` props configured for the same slice, ensuring predictable external ownership and reactive reads.

How do I read reactive table state slices in Solid without over-subscribing?

You can read reactive table state slices in Solid without over-subscribing by using `useSelector` with optional `shallow` compare for isolated rendering boundaries, or by using `table.state()` for Solid-idiomatic selector reads within tracked scopes.

Can I use TanStack Store to drive Solid Table pagination from URL or server updates?

Yes, you can use TanStack Store to drive Solid Table pagination from URL or server updates by assigning external atoms to the pagination slice, allowing cross-component synchronization and external updates to flow predictably into the table state.

What are the different ways to access TanStack Solid Table state when using atoms?

When using atoms, you can access TanStack Solid Table state through three Solid-friendly surfaces: `table.atoms.<slice>.get()` for fine-grained reactive reads, `table.store` for snapshot-style access, and `table.state()` for selector reads.