Tanstack Solid Table Devtools

This skill builds on @tanstack/table-core#core and @tanstack/table-devtools#devtools.

Setup

import { TanStackDevtools } from '@tanstack/solid-devtools'
import { createTable, tableFeatures } from '@tanstack/solid-table'
import {
  tableDevtoolsPlugin,
  useTanStackTableDevtools,
} from '@tanstack/solid-table-devtools'

const features = tableFeatures({})

export function App() {
  const table = createTable({
    key: 'users-table',
    features,
    columns: [],
    data: [],
  })
  useTanStackTableDevtools(table)
  return <TanStackDevtools plugins={[tableDevtoolsPlugin()]} />
}

Hooks and Components

Register inside the component's Solid owner. Pass { enabled } to the hook for conditional registration.

Common Mistakes

HIGH Registration created outside an owner

Wrong: call the Solid registration hook at module scope.

Correct: call it in the component that owns the table.

The hook uses Solid reactive cleanup to unregister the target.

Source: TanStack/table:packages/solid-table-devtools/src/useTanStackTableDevtools.ts

HIGH Missing or reused table key

Wrong: omit options.key or share one key between mounted tables.

Correct: assign a stable unique key per live table.

The target registry skips missing keys and replaces duplicate identities.

Source: TanStack/table:packages/table-devtools/src/tableTarget.ts

MEDIUM Production entrypoint assumed active

Wrong: expect normal Devtools exports to inspect a production table.

Correct: keep default guidance development-only; use /production only on explicit request.

The package index selects no-op implementations outside development.

Source: TanStack/table:packages/solid-table-devtools/src/index.ts

API Discovery

Inspect node_modules/@tanstack/solid-table-devtools/dist/index.d.ts, useTanStackTableDevtools.d.ts, and production.d.ts.