# Devtools

Connect native Preact Table v9 instances to Devtools with tableDevtoolsPlugin and...

- Repository: https://github.com/TanStack/table (28539 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-10-21
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add TanStack/table --skill devtools -g -a claude-code -y`
Codex: `npx skills add TanStack/table --skill devtools -g -a codex -y`
Cursor: `npx skills add TanStack/table --skill devtools -g -a cursor -y`
Gemini CLI: `npx skills add TanStack/table --skill devtools -g -a gemini-cli -y`

## Description

Connect native Preact Table v9 instances to Devtools with tableDevtoolsPlugin and useTanStackTableDevtools. Load for React-package mixups, missing targets, required options.key, enabled state, cleanup, or development gating.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

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

## Setup

```tsx
import { TanStackDevtools } from '@tanstack/preact-devtools'
import { useTable, tableFeatures } from '@tanstack/preact-table'
import {
  tableDevtoolsPlugin,
  useTanStackTableDevtools,
} from '@tanstack/preact-table-devtools'

const features = tableFeatures({})
const columns = [{ accessorKey: 'id' }]
const data: Array<{ id: string }> = []

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

## Hooks and Components

Use the native Preact packages throughout. Pass `{ enabled }` rather than conditionally calling the registration hook.

## Common Mistakes

### HIGH React Devtools package mixed into Preact

Wrong: import the hook from `@tanstack/react-table-devtools` through compat.

Correct: use `@tanstack/preact-table-devtools` with `@tanstack/preact-devtools`.

The native adapter owns Preact effect lifecycle and plugin types.

Source: TanStack/table:docs/devtools.md

### HIGH Missing or duplicate key

Wrong: omit `key` or reuse `users-table` for multiple mounted tables.

Correct: give each live table one stable unique key.

Keyless registration is skipped; duplicate keys replace targets.

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

### MEDIUM Production no-op mistaken for failure

Wrong: expect the default entrypoint to stay active in a production bundle.

Correct: keep Devtools development-only unless an explicit production import is required.

The default index deliberately selects no-op implementations outside development.

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

## API Discovery

Inspect `node_modules/@tanstack/preact-table-devtools/dist/index.d.ts` and `useTanStackTableDevtools.d.ts`; do not copy React adapter imports.