Chapter 3: Devtools

Core Idea

TanStack Table ships a devtools adapter that plugs into the shared TanStack Devtools multi-panel UI, letting you inspect registered table instances (features, state, options, rows, columns) live, and switch between multiple tables in one app.

Key Concepts

• Dev-only by default: framework adapters include the live devtools only in development builds; production builds export no-op stubs unless you explicitly import the /production entrypoint.
• key is required. Every table you want visible in devtools must set a unique key table option — omitting it logs Missing table key. Add a 'key' option to your table to use devtools. and the table is skipped. The key also becomes its label in the devtools table selector.
• Setup has three parts: (1) unique key per table, (2) mount <TanStackDevtools> at the app root with tableDevtoolsPlugin(), (3) call useTanStackTableDevtools(table) (React) — or injectTanStackTableDevtools in Angular — right after creating the table.
• Multiple registered tables show a selector in the devtools Table panel so you can switch between them.
• Coverage: React, Preact, Vue, Solid, and Angular have dedicated table-devtools adapters. Octane, Lit, Svelte, Alpine, and vanilla currently do not.

Code Examples

// 1. give the table a key
const table = useTable({ key: 'users-table', features, columns, data })

// 2. mount TanStackDevtools once at the app root
// <TanStackDevtools plugins={[tableDevtoolsPlugin()]} />

// 3. register the table right after creating it
useTanStackTableDevtools(table)

• What it demonstrates: the minimal three-step wiring — a table with no key never appears, and a table not passed to useTanStackTableDevtools never appears either.

Key Takeaways

1. Add @tanstack/react-devtools + @tanstack/react-table-devtools during development; there's no runtime cost in production once you use the standard adapter (dev-only by default).
2. Give every table you create a descriptive, unique key from the start — it's cheap insurance for future debugging even on tables you don't plan to inspect yet.
3. Devtools are additive: they never change table behavior, only visibility into state/options/rows/columns.

Connects To

• Framework Adapters & Installation: exact npm install commands per framework.
• Table Instance Guide: what the inspectable table object actually is.