typescript

このスキルは core と table-features を基盤としています。フィーチャーオブジェクトとヘルパーによって、ユーザー側のコードまで型を引き継げるようにします。

セットアップ

import {
  createColumnHelper,
  metaHelper,
  tableFeatures,
} from '@tanstack/table-core'

type Person = { id: string; age: number }
type ColumnMeta = { align?: 'start' | 'end' }
const features = tableFeatures({ columnMeta: metaHelper<ColumnMeta>() })
const helper = createColumnHelper<typeof features, Person>()
export const columns = helper.columns([
  helper.accessor('age', { meta: { align: 'end' } }),
])

基本パターン

アクセサーごとの値型を保持する

const columns = helper.columns([
  helper.accessor('id', { header: 'ID' }),
  helper.accessor('age', { header: 'Age' }),
])

columns() は、各アクセサーの TValue を拡張せずに保持します。

ヘルパーを使ってオプションを組み合わせる

const defaults = tableOptions<typeof features, Person>({
  defaultColumn: { meta: { align: 'start' } },
})

再利用可能な要素には tableOptions を使います。一度しか使わない場合は、アダプターのオプションを直接指定すれば十分です。

よくある間違い

[HIGH] アクセサーの値型推論を失わせる

誤り：

const columns: ColumnDef<typeof features, Person, unknown>[] = [
  helper.accessor('age', {}),
]

正しい例：

const columns = helper.columns([helper.accessor('age', {})])

広範な型注釈によって、アクセサー固有の number 値型が失われています。

参照先：docs/guide/helpers.md#createcolumnhelper

[MEDIUM] 内部フィーチャーのジェネリクスを手動で引き継ぐ

誤り：

type Features = TableFeatures

正しい例：

type Features = typeof features

具体的なレジストリが、フィーチャーによって制御される API とレジストリキーの情報源です。

参照先：packages/table-core/src/types/TableFeatures.ts

[MEDIUM] テーブルごとのメタをグローバルにマージする

誤り：

declare module '@tanstack/table-core' {
  interface ColumnMeta<TData, TValue> {
    align?: string
  }
}

正しい例：

const features = tableFeatures({
  columnMeta: metaHelper<{ align?: 'start' | 'end' }>(),
})

V9 の型専用フィーチャースロットにより、メタの型はテーブルファクトリーのスコープ内に保たれます。

参照先：docs/guide/table-and-column-meta.md

API の確認

node_modules/@tanstack/table-core/dist/helpers/ と、dist/index.d.ts で再エクスポートされているシグネチャを確認してください。アプリケーションコードに内部の複雑なジェネリクスシグネチャをコピーするのは避けてください。