メニュー
Connect Vue Table v9 refs or instances to Devtools with tableDevtoolsPlugin and useTanStackTableDevtools. Load for missing targets, reactive table replacement, required options.key, enabled state, cleanup, or development gating.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SOC 職業分類に基づく
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/TanStack/table --skill devtoolsコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
Share Alpine tableFeatures, defaults, createAppTable, and createAppColumnHelper with createTableHook. Load when multiple Alpine tables repeat infrastructure; unlike JSX adapters, Alpine has no registered table/cell/header component or context registry.
Create an Alpine TanStack Table v9 table with createTable, explicit tableFeatures, Alpine.reactive data getters, x-for rendering, and FlexRender through x-html. Load for first-table setup, reactive options, or when nested Alpine directives rendered by x-html do not initialize.
Read automatically reactive Alpine table APIs in bindings and own slices with Alpine.reactive getters plus on*Change or external TanStack Store atoms. Load for controlled state, updater callbacks, selector gating, atom precedence, or code incorrectly adding table.Subscribe.
| name | devtools |
| description | Connect Vue Table v9 refs or instances to Devtools with tableDevtoolsPlugin and useTanStackTableDevtools. Load for missing targets, reactive table replacement, required options.key, enabled state, cleanup, or development gating. |
| metadata | {"type":"framework","library":"@tanstack/vue-table-devtools","framework":"vue","library_version":"9.2.0"} |
| requires | ["@tanstack/table-core#core","@tanstack/table-devtools#devtools"] |
| sources | ["TanStack/table:docs/devtools.md","TanStack/table:packages/vue-table-devtools/src/index.ts","TanStack/table:packages/vue-table-devtools/src/useTanStackTableDevtools.ts"] |
This skill builds on @tanstack/table-core#core and @tanstack/table-devtools#devtools.
<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.
The hook accepts a table or ref-like table and tracks replacement. Keep that reactive wrapper intact rather than unwrapping once.
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
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
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
Inspect node_modules/@tanstack/vue-table-devtools/dist/index.d.ts and useTanStackTableDevtools.d.ts for current ref handling.