TanStack Table
元 react-table
https://gyazo.com/24653994bacf7fbf72351b261b4dfbf2
ヘッドレス
UI は提供しない、モデルだけ
const table = useReactTable(...) で定義して
table.getHeaderGroups().map(...)
able.getRowModel().rows.map(...)
などして自分で要素をレンダリングしていく
フィルタなどが簡単に実装できる
Core Objects and Types
Column Defs
Table
Table Data
Columns
Rows
Header Groups
Headers
Cells
マークアップする必要があるものはどれ
Column Def Types
columnHelper 何
createColumnHelper<T>() で返ってきたインスタンスを使う
メソッドは accessor, display, group だけ
helper に数字渡してもダメ、replace 呼べない
flexRender 何
カラム定義に基づいてレンダリングするくん?
header.getContext() is 何
{table, column, header } を返す
その他いろいろなオブジェクトで getContext ある
cell とかもこのコンテキストを受け取る
getCoreRowModel 何
getXXXRowModel
isPlaceholder とか state を何をどこまで考慮すればよいのか?
meta
ColumnMetaの概念がある、Column への追加の情報を渡したいときに使う??
cell のレンダリングの props の型どうやって書く?
CellContext<Data, カラムの型> を受け取る
function CellBox(props: CellContext<TData, TData[0]>) { ... } とか
行にアクセス
context.row でアクセス
row.getValue(key) とか row.original で元データに触れる(TableMode的にいいかは知らん)
subRow
元のデータ型に対してのアクセサを定義する
useReactTable({ ..., getSubRows: row => row.subRows })
グループの子要素は paddingLeft でへこましている
state みて表示整えるのは cell のレンダリング、テーブルとしてはループで深さ関係なく返ってくる
開いてる状態とかもフラットな state にある
getRowModel とかからどう読む?
無限ループ
data: result.table?.data? || [] などしていると起きがち
データがない場合に空の Array リテラル[] を渡すと毎回差分が検知され再描画され続けてしまう
定数でコンポーネント外に const emptyData = []; して
data: result.table?.data? || emptyData などする
Examples
折りたたみ例
subRow の概念がある
ツリーの見た目にする例
カラムにユニークな要素数を出す
折りたたみで好きな要素出す
Links
これやる例
https://gyazo.com/46b308e9088508b54f45a07c1eef2aba
カラム定義で cell の関数でフォーマット整えたり、フィルタ例