core

TanStack Table コア

TanStack Table は状態と行の処理を調整します。マークアップ、スタイル、セマンティクス、操作のアクセシビリティはレンダラーが担います。UI コードではインストール済みのフレームワークアダプターを使用し、フレームワークに依存しない統合では constructTable を使用してください。

最小構成

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()))
}

重要な制約

• コアの行モデルは自動的に適用されます。オプションの API と状態は、対応する機能が登録された後にのみ利用できます。
• 意味のある変更がない限り、features、data、columns を安定させてください。変化する配列はアダプターのメモ化／computed の仕組みを使って導出してください。インラインの .map()、.filter()、列ファクトリー、新しい [] のフォールバックはモデル処理を無効にし、レンダリングループを引き起こす可能性があります。
• createColumnHelper と helper.columns() を使って、アクセサーの値の型を維持してください。明示的な境界が必要な場合は、具体的なレジストリーから機能の型を導出してください。
• 行、セル、列、ヘッダーのメソッドは、それぞれのインスタンスで呼び出してください。row.getValue('name')、またはそれを呼び出すコールバックを使用してください。const { getValue } = row のように取り出すと、this のレシーバーが失われます。
• 最終的な table.getRowModel().rows をレンダリングしてください。table オブジェクト自体は DOM コンポーネントではありません。

現在のタスクに応じて読む資料

タスク	読む資料
オプション機能、処理スロット、前提条件の追加または修正	機能アーキテクチャ、続けて該当する機能リファレンス
状態の所有者の選択、状態の初期化またはリセット	共有状態
ColumnDef の型推論、再利用可能なオプション、スコープ付きメタデータの修正	TypeScript の型推論
エクスポート、オプション、状態スライス、インスタンスメソッドが見つからない場合の調査	API の確認
行番号、識別子、表示インデックスの動作の実装	行
組み込み機能を超える動作や、型付きメタデータの作成	カスタム機能
既存の v8 テーブルの移行	移行の監査

フレームワークでの構築とレンダリングについては、intent load <package>#getting-started を使って、インストール済みパッケージの getting-started スキルを読み込んでください。<package> は、たとえば @tanstack/react-table のような実際のアダプターパッケージに置き換えてください。リアクティブな読み取りや制御された接続については、そのパッケージの table-state スキルを直接読み込んでください。

インストール済み API の確認

node_modules/@tanstack/table-core/dist/index.d.ts を起点に、エクスポートされた宣言をたどってください。アダプターの宣言ファイルの配置と、見つからない API の診断方法については、API の確認を参照してください。想定されるエクスポートまたは宣言ファイルのパスが見つからない場合に読んでください。