getting-started

最初に intent load @tanstack/table-core#core を読み込み、ヘッドレスモデル、安定した入力、列の推論について確認します。

セットアップ

import Alpine from 'alpinejs'
import {
  FlexRender,
  createTable,
  tableFeatures,
  type ColumnDef,
} from '@tanstack/alpine-table'

type Person = { id: string; name: string }
const features = tableFeatures({})
const columns: Array<ColumnDef<typeof features, Person>> = [
  { accessorKey: 'name', header: 'Name' },
]

Alpine.data('peopleTable', () => {
  const local = Alpine.reactive({
    data: [{ id: '1', name: 'Ada' }] as Array<Person>,
  })
  const table = createTable({
    features,
    columns,
    get data() {
      return local.data
    },
    getRowId: (row) => row.id,
  })

  return { table, FlexRender }
})

window.Alpine = Alpine
Alpine.start()

x-for で実際のテーブル構造をレンダリングします。レンダラーの出力に対してのみ、x-html="FlexRender({ header })" または x-html="FlexRender({ cell })" を使用します。

構築とレンダリング

変更されるデータを Alpine.reactive でラップし、get data() で公開します。アダプターはオプションのゲッターを追跡します。data: local.data はスナップショットを取得するため、その後の配列の置き換えには追従しません。静的な列と機能はゲッターの外に置いてください。

返されるテーブルはリアクティブプロキシです。Subscribe コンポーネントは不要です。Table API を x-text、x-for、x-if、またはバインドされた属性で直接読み取ります。

テーブル構造とインタラクティブなコントロールは、実際の Alpine マークアップとして構築します。レンダラーの出力には、x-html="FlexRender({ header })" または x-html="FlexRender({ cell })" を使用します。Alpine は x-html の文字列内にあるディレクティブを初期化しません。ボタンや入力には、テンプレートまたは Alpine.bind バンドルを使用してください。

タスクに必要な情報を読む

• オプション機能を追加または設定する場合は、intent load @tanstack/table-core#table-features を読み込み、要求された動作に関するリファレンスのみを確認します。
• 状態の所有権やリアクティブな読み取りについては、table-state を読みます。
• テーブル間で機能、デフォルト、または再利用可能な UI を共有する場合は、create-table-hook を読みます。

API の確認

node_modules/@tanstack/alpine-table/dist/index.d.ts、createTable.d.ts、reactivity.d.ts を確認します。コア機能の API は node_modules/@tanstack/table-core/dist/features/ にあります。