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.