svelte/table-state

Wire TanStack Table v9 state in Svelte 5 using runes and subscriptions.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you correctly wire TanStack Table v9 state in Svelte 5 so your datagrid updates predictably, efficiently, and without stale renders.

Core Features & Use Cases

  • Rune-based state reactivity: Use $state, $derived.by, and $effect.pre to keep table state in sync with the DOM before rendering.
  • Correct slice-based state access: Read table.state via selectors and use table.atoms / table.baseAtoms while respecting which features are registered.
  • Fine-grained subscriptions: Use subscribeTable(atom, selector?) with .current to limit rerenders to the parts of your UI that need updates.
  • State ownership patterns: Choose between initialState, external atoms (via @tanstack/svelte-store), or state + on[State]Change for controlled slices.

Quick Start

Ask an AI coding agent to “Set up TanStack Table v9 state in Svelte 5 using tableFeatures(), createTable(), table.state selector projection, and subscribeTable() for a single fine-grained UI update.”

Frequently Asked Questions about svelte/table-state

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

FAQPage Schema
How do I manage TanStack Table v9 state in Svelte 5 using runes?

To manage TanStack Table v9 state in Svelte 5 using runes, wire `createTable` with selector support and integrate `$state`, `$derived.by`, and `$effect.pre` to sync table state with the DOM before rendering for predictable reactive updates.

What is the best way to prevent stale renders in a Svelte 5 datagrid?

Preventing stale renders in a Svelte 5 datagrid requires fine-grained subscriptions using `subscribeTable(atom, selector?)` with `.current`, limiting rerenders to specific UI parts that need updates via slice-safe state selection.

How do I access specific state slices in a TanStack Table v9 Svelte adapter?

Access specific state slices in a TanStack Table v9 Svelte adapter by reading `table.state` via selectors and using `table.atoms` or `table.baseAtoms`, ensuring you respect which features are registered in your table configuration.

Can I use external atoms for controlled state ownership in Svelte 5 table state?

Yes, you can use external atoms via `@tanstack/svelte-store` for controlled state ownership in Svelte 5 table state, or choose between `initialState` and `state` plus `on[State]Change` callbacks for managing controlled state slices.

Why does my Svelte 5 table UI update inefficiently when table state changes?

Svelte 5 table UI updates inefficiently when lacking fine-grained subscriptions; applying `subscribeTable` with shallow selection semantics ensures only the UI components depending on changed atoms rerender, optimizing reactive performance.