メニュー
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.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use TanStack Table v9 as a headless data-grid state and row-processing engine. Load for first-table architecture, stable data and columns, row numbering with getDisplayIndex, semantic rendering, framework adapter choice, or deciding what Table owns versus the renderer.
Author a TanStack Table v9 feature plugin across every FeatureMap and API installation surface: state, options, column definitions, table, column, row, cell, header, row-model functions/caches, defaults, prototypes, and table/row/column instance data lifecycles. Load for initTableInstanceData, resetTableInstanceData, constructTableAPIs, or reusable behavior not covered by built-ins, meta, or option composition.
Maintain rowSelection ID state with stable getRowId, single, multi, subrow, and Shift-range rules, selected row models, handler anchors, and manual-pagination semantics. Load when implementing getToggleSelectedHandler, enableRowRangeSelection, selectChildren, or selected IDs that outlive loaded Row objects.
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 | 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. |
| metadata | {"type":"framework","library":"@tanstack/angular-table-devtools","framework":"angular","library_version":"9.0.0-beta.43"} |
| requires | ["@tanstack/table-core#core","@tanstack/table-devtools#devtools"] |
| sources | ["TanStack/table:docs/devtools.md","TanStack/table:packages/angular-table-devtools/src/index.ts","TanStack/table:packages/angular-table-devtools/src/injectTanStackTableDevtools.ts"] |
This skill builds on @tanstack/table-core#core and @tanstack/table-devtools#devtools.
import { Component } from '@angular/core'
import { injectTable, tableFeatures } from '@tanstack/angular-table'
import { injectTanStackTableDevtools } from '@tanstack/angular-table-devtools'
const features = tableFeatures({})
const columns = [{ accessorKey: 'id' }]
const data: Array<{ id: string }> = []
@Component({ selector: 'users-table', template: 'Users table registered' })
export class UsersTable {
readonly table = injectTable(() => ({
key: 'users-table',
features,
columns,
data,
}))
constructor() {
injectTanStackTableDevtools(() => ({ table: this.table }))
}
}
Provide the Angular TanStack Devtools host once at application configuration level as documented in docs/devtools.md.
The injector options function may return table: undefined or an enabled function to remove/disable registration reactively.
Wrong: call injectTanStackTableDevtools from an arbitrary callback after bootstrap.
Correct: call it in a component/service field initializer or constructor injection context.
The adapter uses Angular injection and effects for lifecycle cleanup.
Source: TanStack/table:packages/angular-table-devtools/src/injectTanStackTableDevtools.ts
Wrong: register an otherwise valid table without options.key.
Correct: assign a stable unique key before injection registration.
Core registration logs an error and skips keyless targets.
Source: TanStack/table:packages/table-devtools/src/tableTarget.ts
Wrong: expect default Angular exports to render production Devtools.
Correct: keep standard setup development-only; use /production only when explicitly requested.
The package index switches exports using Angular isDevMode().
Source: TanStack/table:packages/angular-table-devtools/src/index.ts
Inspect node_modules/@tanstack/angular-table-devtools/src/index.ts and injectTanStackTableDevtools.ts for current injection options.