preact/compose-with-tanstack-store

Integrate TanStack Table Preact reactivity with TanStack Store atoms.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Composing TanStack Table (Preact) with TanStack Store can be confusing, especially when you need predictable ownership of state slices and fine-grained reactivity across components.

Core Features & Use Cases

  • Three reactive surfaces: Use table.atoms.<slice> for per-slice readonly reads, table.store for flat projections of full table state, and table.baseAtoms.<slice> for internal writable state when the table owns the slice.
  • Slice ownership via external atoms: Provide your own atoms using options.atoms so useTable treats them as the source of truth and keeps table feature updates in sync.
  • Imperative persistence and cross-component sharing: Use atom.subscribe(...) for syncing with storage or external systems, and reuse the same atom identity across components for consistent state.

Quick Start

Use the preact/compose-with-tanstack-store skill to connect your table state slices to external TanStack Store atoms, then read them with useSelector and let feature APIs write back to the owned atoms.

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

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

FAQPage Schema
How do I sync Preact TanStack Table state with external atoms?

You can sync Preact TanStack Table state with external atoms by providing your own atoms through `options.atoms`, making them the source of truth that keeps table feature updates in sync. Use `useSelector` and `Subscribe` for reactive reads.

What reactive surfaces are available when composing TanStack Table with TanStack Store in Preact?

Three reactive surfaces are available: `table.atoms.<slice>` for per-slice readonly reads, `table.store` for flat projections of full table state, and `table.baseAtoms.<slice>` for internal writable state when the table owns the slice.

How do I persist TanStack Table state to external storage in Preact?

To persist TanStack Table state to external storage in Preact, use `atom.subscribe(...)` on your externally owned atoms to sync state changes with storage or other external systems imperatively.

Can I share TanStack Table state across multiple Preact components?

Yes, you can share TanStack Table state across multiple Preact components by reusing the same atom identity across components, which ensures consistent state synchronization and cross-component reactivity.

How do I write updates to externally owned table state slices in Preact?

To write updates to externally owned table state slices in Preact, rely on TanStack Table feature APIs to write to the correct owning atom surface, ensuring the application-owned slice atoms remain the source of truth.

When should I use external slice ownership for Preact datagrids?

Use external slice ownership for Preact datagrids when you need externally persisted state, cross-component synchronization, or narrowly scoped slice subscriptions that require predictable ownership and fine-grained reactivity.