devtools
Connect Solid Table v9 instances to Devtools with tableDevtoolsPlugin and useTanStackTableDevtools in the proper reactive owner. Load for missing targets, required options.key, enabled state, cleanup, or development versus explicit production exports.
ソース情報
- リポジトリ
- TanStack/table
- ソースの最終更新活動
- 2026年10月12日 16:41
- 検出された SKILL.md の言語
- 英語
- スター
- 28,493
- フォーク
- 3,589
インストール方法
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
ソースファイルを確認
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SKILL.md を表示中
SKILL.md
ソースの指示 · 読み取り専用プレビュー- name
- devtools
- description
- Connect Solid Table v9 instances to Devtools with tableDevtoolsPlugin and useTanStackTableDevtools in the proper reactive owner. Load for missing targets, required options.key, enabled state, cleanup, or development versus explicit production exports.
- metadata
- {"type":"framework","library":"@tanstack/solid-table-devtools","framework":"solid","library_version":"9.3.1"}
- requires
- ["@tanstack/table-core#core","@tanstack/table-devtools#devtools"]
- sources
- ["TanStack/table:docs/devtools.md","TanStack/table:packages/solid-table-devtools/src/index.ts","TanStack/table:packages/solid-table-devtools/src/useTanStackTableDevtools.ts"]
This skill builds on @tanstack/table-core#core and @tanstack/table-devtools#devtools.
## Setup
```tsx
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`.
GitHubで見る