TanStack Tableメモ

useReactTable

data

TDataの配列

columns

columnHelper.accessor等を使って作成する

TanStack TableのTData

TanStack TableのTDataはデーブルの行を表すオブジェクトの型です。

Accessor Columns

accessor key

columnHelper.accessor()の第1引数またはaccessorKeyにはTDataのキーを指定します。

動的に値を生成する

columnHelper.accessor()の第1引数もしくはaccessorFnにaccessor functionsを渡します。

id

accessor keyはidにになる。

footerとheader

Accessor columnsのfooterとheaderの例

• https://github.com/TanStack/table/blob/main/examples/react/basic/src/main.tsx

• https://tanstack.com/table/latest/docs/framework/react/examples/basic

aggregatedCell

Accessor columnsのaggregatedCellの例

• https://github.com/TanStack/table/blob/main/examples/react/grouping/src/main.tsx

• https://tanstack.com/table/latest/docs/framework/react/examples/grouping

State

on[State]ChangeはonColumnFiltersChangeやonSortingChange等の総称です。[State]にはstateのキーが入ります。

on[State]ChangeやonStateChangeの引数には値かReactのsetState()コールバック関数が渡される。
https://tanstack.com/table/latest/docs/framework/react/guide/table-state#on-state-change-callbacks

State用の型がある。