lit/table-state

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.