Implement a Table v9 plugin when built-ins and typed meta are insufficient. Covers FeatureMaps, runtime lifecycle hooks, prototypes, and a complete checked example.
日本語の概要は準備中です。原文の説明を表示しています。
Use TanStack Table v9 core architecture, stable data and columns, and inferred types. Route setup, missing APIs, row models, state, features, and framework-specific work.
インストール方法を見るインストールする前に、エージェントに与えられる指示の中身を確認できます。
TanStack Table coordinates state and row processing. The renderer owns markup, styles, semantics, and interaction accessibility. Use the installed framework adapter in UI code; use constructTable for framework-neutral integrations.
import {
constructTable,
createColumnHelper,
tableFeatures,
} from '@tanstack/table-core'
import { storeReactivityBindings } from '@tanstack/table-core/store-reactivity-bindings'
type Person = { id: string; name: string }
const features = tableFeatures({
coreReactivityFeature: storeReactivityBindings(),
})
const helper = createColumnHelper<typeof features, Person>()
const columns = helper.columns([helper.accessor('name', { header: 'Name' })])
const data: Person[] = [{ id: '1', name: 'Ada' }]
const table = constructTable({
features,
columns,
data,
getRowId: (row) => row.id,
})
for (const row of table.getRowModel().rows) {
console.log(row.getAllCells().map((cell) => cell.getValue()))
}
features, data, and columns stable between meaningful changes. Derive changing arrays with the adapter's memo/computed mechanism; an inline .map(), .filter(), column factory, or fresh [] fallback invalidates model work and can cause render loops.createColumnHelper and helper.columns() preserve accessor value types. Derive feature types from the concrete registry when an explicit boundary is needed.row.getValue('name') or a callback that calls it; extracting const { getValue } = row loses its this receiver.table.getRowModel().rows. The table object itself is not a DOM component.| Task | Read |
|---|---|
| Add or repair optional features, processing slots, or prerequisites | Feature architecture, then its relevant feature reference |
| Choose state ownership, initialize or reset state | Shared state |
Fix ColumnDef inference, reusable options, or scoped meta | TypeScript inference |
| Diagnose a missing export, option, state slice, or instance method | API discovery |
| Implement row numbers, identity, or display-index behavior | Rows |
| Author behavior beyond built-ins or typed meta | Custom features |
| Migrate an existing v8 table | Migration audit |
For framework construction and rendering, load the installed package's getting-started skill with intent load <package>#getting-started, replacing <package> with the actual adapter package, such as @tanstack/react-table. For reactive reads or controlled wiring, load that package's table-state skill directly.
Start at node_modules/@tanstack/table-core/dist/index.d.ts and follow exported declarations. Adapter declaration layouts and missing-API diagnosis are in API discovery; read it when the expected export or declaration path is absent.
まだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
Implement a Table v9 plugin when built-ins and typed meta are insufficient. Covers FeatureMaps, runtime lifecycle hooks, prototypes, and a complete checked example.
日本語の概要は準備中です。原文の説明を表示しています。
Connect React Table v9 instances to Devtools with tableDevtoolsPlugin and useTanStackTableDevtools. Load for missing Table panels, registration lifecycle, required options.key, enabled state, or development versus explicit production exports.
日本語の概要は準備中です。原文の説明を表示しています。
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.
日本語の概要は準備中です。原文の説明を表示しています。
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.
日本語の概要は準備中です。原文の説明を表示しています。
Register Angular Table v9 instances with injectTanStackTableDevtools inside injection context. Load for reactive table registration, required options.key, enabled or undefined tables, cleanup, Angular isDevMode gating, or explicit production exports.
日本語の概要は準備中です。原文の説明を表示しています。
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.
日本語の概要は準備中です。原文の説明を表示しています。