React Tableを使ってみる - くたくたじゅうよん

React Tableを使ってみる

React Tableの使い方を理解する

まずは基本的な使い方を知る

18:24:59 Getting Started: Quick Start | React Table | TanStackに沿って作ってみる

/icons2/CodeSandBox.iconhttps://codesandbox.io/s/objective-bassi-u77h6?file=/src/App.tsx

18:43:30 @types/react-table入れても型がおかしい

直してみよう

18:44:18 @types/という名前のdirectoryを作れないので、別な名前にする

型定義ファイルをNodeで使うを参考にする

src/typesにした

19:24:13 型を工夫する必要があった

予めcolumnsに型を明示しないとlinter errorが出る

19:29:59 完成

https://codesandbox.io/s/objective-bassi-u77h6?file=/src/Table.tsx

注意点は後でまとめる

てかここにも同じのあった

Hooks対応したreact-tableをTypeScriptで使う · nametake.info

解説はないが、同じ対処を施したコードが載っている

19:36:55 このコードをいじって仕組みを調べてみる

coreはuseTable()

入力

出力

code:ts

const {

getTableProps,

getTableBodyProps,

headerGroups,

rows,

prepareRow,

} = useTable({ columns, data });

TableInstance<>.getTableProps()

TableInstance<>.prepareRow()

一行ごとにデータの前処理を行う

実際に画面に表示されるデータだけをrenderingするために使う

cf. ここのprepareRow: Function(Row)の項目

Footerをつける

型定義ファイルを直す必要がある？

少なくともcompileは通るみたい