Devtools

TanStack Table provides framework-specific devtools adapters that plug into the TanStack Devtools multi-panel UI.

The table devtools let you inspect registered table instances, switch between multiple tables, and inspect features, state, options, rows, and columns in real time.

Note

By default, the framework adapters only include the live devtools in development mode. In production builds they export no-op implementations unless you opt into the /production entrypoints.

Installation

Install the TanStack Devtools host package and the Table adapter for your framework.

npm install @tanstack/react-devtools @tanstack/react-table-devtools

Octane, Lit, Svelte, Alpine, and vanilla do not currently ship dedicated table devtools adapters.

The Required `key` Table Option

The devtools identify each table by the key table option. Registration requires it. If you register a table without a key, the devtools log an error (Missing table key. Add a 'key' option to your table to use devtools.) and skip the table entirely.

const table = useTable({
  key: 'users-table', // needed for devtools, omit if you don't want to use the devtools
  features,
  columns,
  data,
})

The key is also the label shown in the devtools panel selector, so give each table a unique, descriptive key.

Setup Pattern

The recommended setup has three parts:

Give each table a unique key option
Mount TanStackDevtools at the app root with tableDevtoolsPlugin()
Register each table with useTanStackTableDevtools(table) (or injectTanStackTableDevtools in Angular) immediately after creating it

If you register multiple tables, the Table panel shows a selector so you can switch between them.

Setup

import React from 'react'
import ReactDOM from 'react-dom/client'
import { useTable } from '@tanstack/react-table'
import { TanStackDevtools } from '@tanstack/react-devtools'
import {
  tableDevtoolsPlugin,
  useTanStackTableDevtools,
} from '@tanstack/react-table-devtools'

function App() {
  const table = useTable({
    key: 'users-table', // needed for devtools
    // ...
  })

  useTanStackTableDevtools(table)

  return <AppContent table={table} />
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
    <TanStackDevtools plugins={[tableDevtoolsPlugin()]} />
  </React.StrictMode>,
)

See the React row-selection example.

Disabling Registration

Each registration function accepts an enabled option if you want to conditionally register a table:

useTanStackTableDevtools(table, { enabled: false })

Production Builds

If you need the live devtools in production, import from the /production entrypoint for your framework package:

import {
  tableDevtoolsPlugin,
  useTanStackTableDevtools,
} from '@tanstack/react-table-devtools/production'