compose-with-tanstack-devtools

name: compose-with-tanstack-devtools description: > Internal implementation of TanStack Table devtools. Consumers should NOT depend on @tanstack/table-devtools directly — install the framework-specific adapter (@tanstack/react-table-devtools, @tanstack/vue-table-devtools, @tanstack/solid-table-devtools, or @tanstack/preact-table-devtools) instead. This skill explains the underlying solid-js-based implementation for maintainers and contributors investigating internals. type: composition library: tanstack-table library_version: '9.0.0-alpha.48' requires: - state-management sources: - TanStack/table:docs/devtools.md - TanStack/table:packages/table-devtools/src/index.ts - TanStack/table:packages/table-devtools/src/production.ts - TanStack/table:packages/table-devtools/src/core.tsx - TanStack/table:packages/table-devtools/src/tableTarget.ts

For consumers: stop reading and install the framework adapter:

• React: @tanstack/react-table-devtools
• Vue: @tanstack/vue-table-devtools
• Solid: @tanstack/solid-table-devtools
• Preact: @tanstack/preact-table-devtools

Angular, Lit, Svelte, and the vanilla @tanstack/table-core package do not currently ship table devtools adapters. There is no supported way to mount the devtools in those frameworks today.

See the per-framework skills under tanstack-table/<framework>/compose-with-tanstack-devtools for setup. This skill documents internals only.

Setup (internals)

@tanstack/table-devtools is the shared core that every framework adapter wraps. It is not meant to be installed by application code. Its package.json declares dependencies on solid-js, @tanstack/solid-store, @tanstack/devtools-ui, @tanstack/devtools-utils, and goober — pulling it directly into a React/Vue/Preact app drags Solid's runtime into the bundle for no benefit, since the framework adapter already does the right thing.

The package exports two surfaces:

• @tanstack/table-devtools — TableDevtoolsCore resolves to a no-op when process.env.NODE_ENV !== 'development'.
• @tanstack/table-devtools/production — TableDevtoolsCore always resolves to the real implementation.

Both surfaces also re-export the registration target store:

import {
  getTableDevtoolsTargets,
  removeTableDevtoolsTarget,
  setTableDevtoolsTarget,
  subscribeTableDevtoolsTargets,
  upsertTableDevtoolsTarget,
} from '@tanstack/table-devtools'

These are the functions the framework adapter hooks (useTanStackTableDevtools) call to register/unregister Table instances by id.

Architecture

Solid-based core

The panel UI is built in Solid even when it is mounted inside a React/Vue/Preact tree:

• core.tsx constructs TableDevtoolsCore via constructCoreClass from @tanstack/devtools-utils/solid and lazy-loads ./TableDevtools (the Solid panel component).
• useTableStore.ts uses @tanstack/solid-store to back the panel's reactive state.
• Styling is handled with goober (atomic CSS-in-JS), keeping the bundle small and side-effect free.

Framework adapters mount this Solid component inside the host framework via @tanstack/devtools-utils interop helpers:

• @tanstack/devtools-utils/react (createReactPlugin) — used by react-table-devtools and preact-table-devtools plugin builders.
• @tanstack/devtools-utils/solid — used directly by solid-table-devtools.
• The vue adapter uses its own interop in packages/vue-table-devtools/src/plugin.ts.

Each adapter exports tableDevtoolsPlugin() (returns a plugin descriptor for the TanStackDevtools host) and a useTanStackTableDevtools(table, options?) hook idiomatic to the framework. The hook's only job is to call upsertTableDevtoolsTarget(...) on mount/update and runs the returned cleanup on unmount.

Registration target store (tableTarget.ts)

The target store is the bridge between framework-specific hooks and the Solid panel:

• upsertTableDevtoolsTarget({ table }) — register or update a table by table.options.key.
• removeTableDevtoolsTarget(id) — unregister on cleanup.
• setTableDevtoolsTarget(...) — register a table through the same key-based path (used internally).
• subscribeTableDevtoolsTargets(listener) — the Solid panel subscribes here to keep its selector in sync.
• getTableDevtoolsTargets() — snapshot for non-reactive reads.

Devtools use table.options.key as the stable registration id. No adapter generates ids automatically.

Dev vs. production swap

Every entrypoint (root and adapters) re-exports a development binding and a no-op binding. The default index file picks between them based on process.env.NODE_ENV; the /production entrypoint always returns the real binding. Bundlers (Vite, Rollup, webpack, esbuild) tree-shake the unused branch.

Common Mistakes

Importing @tanstack/table-devtools directly into a non-Solid framework app

You will pay for Solid's runtime in your bundle and you will not get a working integration — there is no React/Vue/Preact-aware hook on this package. Install @tanstack/<framework>-table-devtools instead and import tableDevtoolsPlugin + useTanStackTableDevtools from there.

Confusing this with the framework adapter packages

The framework-specific packages (react-table-devtools, etc.) re-export adapter hooks and plugins; this package re-exports only the registration target store and a Solid TableDevtoolsCore class. The names overlap (tableDevtoolsPlugin exists only on adapters; TableDevtoolsCore exists only here), so reading source code requires noting which package you are in.

Expecting Angular/Lit/Svelte/vanilla support

There is no @tanstack/angular-table-devtools, -lit-, -svelte-, or -table-core-devtools package today. Document this gap when answering user questions — do not invent an import path. A future release may add adapters; until then the only way to inspect a table in those frameworks is to log table.getState() and table.getRowModel() manually.