Chapter 2: Framework Adapters & Installation

Core Idea

@tanstack/table-core is the framework-agnostic engine; each supported framework gets a thin adapter package that wraps it. Install only the adapter for your framework — this skill focuses on @tanstack/react-table.

Reference Tables

Framework	Package	Minimum version
React	@tanstack/react-table	React 18+
Preact	@tanstack/preact-table	Preact 10+
Octane (Ember Classic)	@tanstack/octane-table	Octane 0.1.21 (needs a TS/TSRX compiler integration, e.g. the Octane Vite plugin)
Vue	@tanstack/vue-table	Vue 3.2+
Solid	@tanstack/solid-table	Solid 1.3+
Svelte	@tanstack/svelte-table	Svelte 5 (runes-based; use Table v8 for Svelte 3/4)
Angular	@tanstack/angular-table	Angular 19+ (built on Angular Signals)
Ember	@tanstack/ember-table	Ember 5.8+ (v2 addon, Glimmer tracking, .gts/.gjs + Glint support)
Lit	@tanstack/lit-table	Lit 3.1.3+ (needs @lit/context peer dep)
Alpine	@tanstack/alpine-table	Alpine 3+
Vanilla / unsupported framework	@tanstack/table-core directly	— write your own thin adapter; browse the official adapters' source as a template

Key Concepts

• No framework listed for your stack? Use @tanstack/table-core directly — an adapter is usually just a thin wrapper managing state/rendering glue for that framework.
• Devtools (React): npm install @tanstack/react-devtools @tanstack/react-table-devtools. Devtools plug into the shared TanStack Devtools multi-panel UI and are dev-only by default (production builds ship no-op stubs unless you opt into the /production entrypoint).
• Devtools require a unique key table option per table — without it, the devtools log an error and skip that table. The key also labels the table in the devtools panel selector when multiple tables are registered.
• Setup pattern for devtools: (1) give each table a key, (2) mount TanStackDevtools at the app root with tableDevtoolsPlugin(), (3) call useTanStackTableDevtools(table) right after creating each table.
• Octane, Lit, Svelte, Alpine, and vanilla currently have no dedicated table-devtools adapter.

Code Examples

const table = useTable({
  key: 'users-table', // required for devtools to pick up this table
  features,
  columns,
  data,
})

• What it demonstrates: the minimum needed to make a table visible in TanStack Devtools' Table panel.

Key Takeaways

1. For this project's stack, install @tanstack/react-table — everything else in this skill assumes the React adapter unless stated otherwise.
2. Add devtools (@tanstack/react-devtools + @tanstack/react-table-devtools) during development; give every table a key from day one so devtools work without retrofitting.
3. @tanstack/table-core is a safe fallback for any framework/meta-framework not in the official list.

Connects To

• Introduction: why the core/adapter split exists (headless, framework-agnostic core).
• Quick Start: first working table after install.
• React Adapter API: useTable, createTableHook, and the rest of the React-specific surface.