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

preact/getting-started

Set up a TanStack table in Preact v9 with sorting and pagination.

28.3k|3.6k|Updated Oct 20, 2016
Search Tags:#getting started#preact#tanstack table#feature registry#row models#type-safe columns#FlexRender
One-click install
npx skills add https://github.com/TanStack/table --skill preact-getting-started
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: preact/getting-started
Source: https://github.com/TanStack/table/tree/main/packages/preact-table/skills/preact/getting-started
Command: npx skills add https://github.com/TanStack/table --skill preact-getting-started

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Table users often get stuck wiring up a Preact table correctly in v9, especially around explicitly declaring enabled features and the corresponding row-model factories.

Core Features & Use Cases

  • End-to-end v9 setup for Preact: install the adapter, configure _features, and provide _rowModels so sorting/pagination actually work.
  • Type-safe columns: define a data type once and create strongly typed columns via createColumnHelper.
  • Correct rendering pattern: use useTable with stable references and render headers/cells/footers with table.FlexRender.
  • Common v9 pitfalls called out: avoid calling feature APIs that weren’t registered and avoid missing row-model factories that prevent row transformations.

Quick Start

Follow the steps in this Skill to create a working Preact v9 table by installing @tanstack/preact-table, declaring _features and _rowModels, defining typed columns, calling useTable, and rendering with table.FlexRender.

Frequently Asked Questions about preact/getting-started

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

FAQPage Schema
How do I set up a TanStack Table in Preact v9?▼

To set up a TanStack Table in Preact v9, install @tanstack/preact-table, declare _features and _rowModels, define typed columns via createColumnHelper, call useTable, and render with table.FlexRender.

Why does sorting or pagination not work in my Preact TanStack Table?▼

Sorting and pagination fail when you miss wiring _rowModels factories or fail to register required features, preventing row transformations. Properly declaring _features and _rowModels resolves this.

How do I create type-safe column definitions for a Preact data grid?▼

You create type-safe column definitions by defining your data type once and generating strongly typed columns using the createColumnHelper function before passing them to useTable.

What is the correct way to render headers and cells in a Preact TanStack Table?▼

The correct way to render headers and cells is calling useTable with stable references and using table.FlexRender to properly output headers, cells, and footers.

Do I need to explicitly declare features in TanStack Table v9?▼

Yes, in TanStack Table v9 you must explicitly declare enabled features using the tableFeatures registry. Failing to register features means you cannot call their APIs without encountering errors.

Related Skills

Explore More Software Engineering Skills→
TanStackTanStack
28.3k

preact/migrate-v8-to-v9

Migrate TanStack Table v8 code to the v9 Preact adapter.

Official
Advanced
TanStackTanStack
28.3k

angular/compose-with-tanstack-virtual

Compose TanStack Table with @tanstack/angular-virtual to render large row sets.

Official
Advanced
TanStackTanStack
28.3k

react/compose-with-tanstack-store

Compose TanStack Table with TanStack Store to manage table state slices externally.

Official
Intermediate
TanStackTanStack
28.3k

react/getting-started

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

Official
Intermediate