table-state

React テーブルの状態

開始する前に、状態の共有所有権、初期化、更新、リセットについては intent load @tanstack/table-core#table-state を実行して確認してください。状態の修復にセットアップガイダンスを読み込む必要はありません。

リアクティブな状態を読み取る

useTable はデフォルトで、登録済みのすべての状態を選択します。任意の第 2 引数のセレクターは、再レンダリングと table.state の形状を制御します。table.atoms.<slice>.get() と table.store.state は現在のスナップショットであり、React のサブスクリプションではありません。

所有側のレンダーでは、選択した table.state を使用してください。より限定された境界には、table.Subscribe または @tanstack/react-store の useSelector を使用します。source がない場合、table.Subscribe は table.store から選択します。source がある場合は、そのアトムまたはストアを購読します。レンダーコストを抑える必要が生じるまでは、デフォルトのセレクターを使用してください。

スライスを制御する

フィーチャー、カラム、データは安定させてください。制御するスライスを所有するフィーチャーを登録します。この例では、クライアント側の行処理を追加せずにページネーションを制御します。

import { useState } from 'react'
import {
  rowPaginationFeature,
  tableFeatures,
  useTable,
  type PaginationState,
} from '@tanstack/react-table'

const features = tableFeatures({ rowPaginationFeature })
const columns = [{ accessorKey: 'name' }]
const data = [{ name: 'Ada' }]

export function PageControl() {
  const [pagination, setPagination] = useState<PaginationState>({
    pageIndex: 0,
    pageSize: 20,
  })
  const table = useTable({
    features,
    columns,
    data,
    state: { pagination },
    onPaginationChange: setPagination,
  })
  return (
    <button onClick={() => table.setPageSize(50)}>
      {table.state.pagination.pageSize} rows per page
    </button>
  )
}

React のセッターは、値と関数型アップデーターの両方を受け取ります。現在の state.pagination を onPaginationChange とともに指定してください。コールバックだけでは、テーブルの同期を維持できません。

外部所有のアトムには、@tanstack/react-store の useCreateAtom を使用して作成し、atoms.<slice> に渡してください。他の UI でその値が必要な場合は、useSelector で購読します。

リアクティブな境界

React Compiler でメモ化された子コンポーネントでは、ビルダーメソッドの読み取りを隠すコンポーネント内に Subscribe を配置するか、選択した値を変化する props として渡してください。値を無視する外側のサブスクリプションでは、安定した子コンポーネントを更新できません。コアの型が付いたセル／ヘッダーコンテキストでは、スタンドアロンの Subscribe をインポートしてください。

外部アトムの例、セレクターの依存関係、細かい境界、React Compiler の問題については、リアクティビティの詳細を参照してください。このタスクで処理フィーチャーを変更する場合は、intent load @tanstack/table-core#table-features を実行し、関連するフィーチャーのリファレンスを読んでください。

API の確認

node_modules/@tanstack/react-table/dist/useTable.d.ts と Subscribe.d.ts、およびインストール済みの @tanstack/react-store にあるアトムフックの宣言を確認してください。