Tanstack Vue Table Devtools

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

Setup

<script setup lang="ts">
import { useTable, tableFeatures } from '@tanstack/vue-table'
import { useTanStackTableDevtools } from '@tanstack/vue-table-devtools'

const table = useTable({
  key: 'users-table',
  features: tableFeatures({}),
  columns: [],
  data: [],
})

useTanStackTableDevtools(table)
</script>

<template><div>Users table registered</div></template>

Mount the Vue TanStackDevtools host once with tableDevtoolsPlugin({}), following docs/devtools.md.

Hooks and Components

The hook accepts a table or ref-like table and tracks replacement. Keep that reactive wrapper intact rather than unwrapping once.

Common Mistakes

HIGH Ref unwrapped before registration

Wrong: read a ref once and register only that snapshot.

Correct: pass the ref/maybe-ref shape accepted by the hook.

The adapter watches the resolved table and cleans up when it changes.

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

HIGH Missing or duplicate key

Wrong: omit key or reuse a key across mounted tables.

Correct: use one descriptive stable key for each target.

The registry skips keyless tables and replaces duplicate targets.

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

MEDIUM Development gate mistaken for broken plugin

Wrong: expect the default panel/plugin/hook in production.

Correct: keep normal Devtools development-only unless explicitly importing /production.

The package index selects no-op exports outside development.

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

API Discovery

Inspect node_modules/@tanstack/vue-table-devtools/dist/index.d.ts and useTanStackTableDevtools.d.ts for current ref handling.