lit/getting-started

Builds a typed TanStack Table in LitElement using TanStack Lit Table v9's TableController and FlexRender.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Confidently implementing a working TanStack Table in a Lit app can be confusing because v9 requires explicit feature registration, row-model factories, and the correct TableController lifecycle for rendering.

Core Features & Use Cases

  • End-to-end Lit setup: Install the adapter and required peer dependencies for @tanstack/lit-table.
  • Explicit v9 feature and row-model wiring: Declare _features with tableFeatures() and register matching _rowModels factories so the right behaviors are available.
  • Typed columns and controller-driven rendering: Create typed ColumnDef (or a column helper), then render headers/rows/footers using FlexRender from a per-host TableController.

Quick Start

Install @tanstack/lit-table with lit and @lit/context, declare your _features with tableFeatures(), register the needed _rowModels, and render a working table via a single TableController instance inside your LitElement’s render() method.

Frequently Asked Questions about lit/getting-started

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

FAQPage Schema
How do I set up a typed TanStack Table in a Lit app?▼

To set up a typed TanStack Table in Lit, install `@tanstack/lit-table` with peer dependencies `lit` and `@lit/context`, declare features via `tableFeatures()`, register matching `_rowModels` factories, and render using a `TableController` instance.

Why does my Lit table require explicit feature registration in v9?▼

TanStack Table v9 requires explicit feature registration so you only bundle the table behaviors you need. You declare required behaviors using `tableFeatures()` and wire corresponding `_rowModels` factories to enable row data processing.

What dependencies do I need to build a Lit table with TanStack?▼

Building a TanStack Table in Lit requires installing the `@tanstack/lit-table` adapter alongside the `lit` and `@lit/context` peer dependencies to support controller-driven rendering.

How do I render headers and cells in a LitElement table?▼

You render headers and cells in a LitElement by instantiating a `TableController` per host element and using `FlexRender` within your `render()` method to output typed column headers, rows, and footers.

How do I create typed column definitions for a Lit table?▼

You create typed column definitions for a Lit table by defining typed `ColumnDef` objects or using a column helper, ensuring your data structure is strongly typed before passing it to the `TableController`.

Can I use TanStack Table features without registering row models in Lit?▼

No, you cannot use table features without registering row models in Lit. You must register matching `_rowModels` factories for any features declared with `tableFeatures()` to ensure the correct row behaviors are available.