preact/table-state

Wire Preact components to TanStack Table state with useTable selectors and Subscribe boundaries.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you wire TanStack Table’s Preact adapter so your datagrid updates efficiently and correctly as sorting, pagination, selection, and other state slices change—without over-rendering.

Core Features & Use Cases

  • Wiring reactivity with useTable: Use useTable (including the optional selector) to connect your Preact component to TanStack Store-backed table state.
  • Reading the right state with atoms vs store: Access table state via table.state, table.store, and table.atoms.<slice> while keeping subscriptions intentional.
  • Fine-grained rendering with <table.Subscribe> / <Subscribe>: Subscribe at component boundaries for slice-level reactivity, and use the standalone <Subscribe> inside cell/header render contexts where table.Subscribe is unavailable.
  • External state integration: Own slices externally using useCreateAtom + options.atoms, or use classic state + on*Change patterns plus createTableHook for reusable shared table configuration.

Quick Start

Ask an AI to show you how to implement a Preact TanStack Table v9 with useTable plus a narrow selector, and use <table.Subscribe> (or standalone <Subscribe> in cells) to render pagination and row selection updates without unnecessary re-renders.

Frequently Asked Questions about preact/table-state

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

FAQPage Schema
How do I set up fine-grained reactive state in a Preact TanStack Table datagrid?

Fine-grained reactive state is wired using the Preact adapter for TanStack Table, utilizing `useTable` with selectors and `<table.Subscribe>` boundaries to ensure datagrids update efficiently without over-rendering.

Why does my Preact TanStack Table component re-render unnecessarily when pagination or sorting changes?

Unnecessary re-renders occur when subscriptions are too broad. Fix this by applying fine-grained rendering techniques like using `useTable` with narrow selectors and subscribing at component boundaries with `<table.Subscribe>` for slice-level reactivity.

When should I use `<table.Subscribe>` versus a standalone `<Subscribe>` in TanStack Table cells?

Use `<table.Subscribe>` at component boundaries for slice-level reactivity. Use the standalone `<Subscribe>` inside cell or header render contexts where `table.Subscribe` is unavailable to maintain fine-grained updates.

Can I own TanStack Table state slices externally with my own Preact atoms?

Yes, you can own state slices externally by creating atoms with `useCreateAtom` and passing them to the table via `options.atoms`, allowing external state integration for sorting, pagination, and selection.

Does TanStack Table support classic state and on*Change patterns in Preact?

Yes, TanStack Table supports classic `state` and `on*Change` patterns in Preact. You can also use `createTableHook` to create reusable shared table configurations alongside these traditional state management approaches.