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

lit/table-state

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

28.3k|3.6k|Updated Oct 20, 2016
Search Tags:#state management#tanstack table#atoms#lit#FlexRender#reactive controller#table Subscribe
One-click install
npx skills add https://github.com/TanStack/table --skill lit-table-state
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: lit/table-state
Source: https://github.com/TanStack/table/tree/main/packages/lit-table/skills/lit/table-state
Command: npx skills add https://github.com/TanStack/table --skill lit-table-state

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the challenge of wiring TanStack Table v9 state into Lit components so your UI stays correctly in sync with sorting, filtering, pagination, and selection—without brittle manual event handling or duplicated controller instances.

Core Features & Use Cases

  • Lit TableController lifecycle: Create one TableController per LitElement host and reuse it across renders so subscriptions and state wiring remain consistent.
  • Reactive state reading and rendering: Read and render from table.state, table.store, and atom slices (including table.atoms.<slice>) using FlexRender and table model getters.
  • Fine-grained subscriptions with table.Subscribe: Project specific state slices during template rendering for targeted UI updates.
  • External atom ownership via createAtom + options.atoms: Move slice ownership outside the table while keeping updates consistent when calling table actions like table.setSorting(...).
  • Reusable configuration via createTableHook: Package shared _features, _rowModels, and app-level cell/header/footer render helpers for consistent table setups across components.
  • Use cases: Building a sortable datagrid in Lit, integrating externally-owned state (atoms) for pagination or selection, and sharing a standardized table composition across multiple Lit components.

Quick Start

Use the lit/table-state Skill to implement a LitElement that creates a single TableController, calls .table(options, selector?) from render(), and renders headers and rows with FlexRender while optionally projecting state slices using table.Subscribe.

Frequently Asked Questions about lit/table-state

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

FAQPage Schema
How do I make a TanStack Table reactive inside a LitElement?▼

To make a TanStack Table reactive inside a LitElement, create a single TableController per host and call .table(options, selector?) from the render() method to wire state and render with FlexRender.

What is the best way to manage TanStack Table v9 state in Lit without duplicating controllers?▼

The best way to manage TanStack Table v9 state in Lit is using a single TableController per host, which keeps subscriptions and state wiring consistent across renders without brittle manual event handling.

Can I use external atoms to control table state like sorting and pagination in Lit?▼

Yes, you can use external atoms to control table state in Lit by creating atoms with createAtom and passing them through options.atoms, keeping updates consistent when calling table actions like table.setSorting.

How do I render specific state slices in a Lit datagrid without triggering full table re-renders?▼

To render specific state slices in a Lit datagrid without full re-renders, project targeted state during template rendering using table.Subscribe for fine-grained subscriptions.

Does building a sortable, filterable datagrid in Lit require special feature setup?▼

Building a sortable, filterable datagrid in Lit requires correct setup of _features and _rowModels in your table configuration to ensure the table model processes the data correctly.

How do I share a standard TanStack Table configuration across multiple Lit components?▼

To share a standard TanStack Table configuration across multiple Lit components, use createTableHook to package shared _features, _rowModels, and render helpers for consistent table setups.

Related Skills

Explore More Software Engineering Skills→
TanStackTanStack
28.3k

react/getting-started

Build a minimal TanStack Table v9 React datagrid with type-safe columns.

Official
Intermediate
TanStackTanStack
28.3k

lit/lit-table-controller

Integrate TanStack Table with LitElement via a ReactiveController.

Official
Intermediate
TanStackTanStack
28.3k

preact/table-state

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

Official
Advanced
TanStackTanStack
28.3k

lit/migrate-v8-to-v9

Migrate TanStack Table for Lit from v8 to v9 APIs.

Official
Advanced