React Tableで編集可能なtableを作ってみる
React Tableを使ってみる調査の一環
参考ページ
React Tableの公式サイトにexampleがあるので、それを使う
coding方針
参考ページのcodeを単純化して適用する
dataは固定
pagenationは削除
styleは
で作る
10:17:33 実装開始
10:19:26 footerはいらないので削除した
10:20:41 exampleは
EditableCell と Table でcomponentを分けているようだまずは
EditableCell を移植してみる10:26:25 defaultColumn?に設定するのか？
EditableCell の引数が変なことになってる10:34:10 これがわからん
tsx// Create an editable cell renderer
const EditableCell = ({
value: initialValue,
row: { index },
column: { id },
updateMyData, // This is a custom function that we supplied to our table instance
}) => {
...
}どうやって
で表現するんだ？
多分これ、
value を initialValue という名前で使うとかそういう意味ではないか？10:40:45 とりあえず全部の別名表記を消した
<Table> で対処すればなんとかなるだろう10:43:24 いやだめだ。
useTable に渡す変数だから、関数の型は同じでないといけないこれReact Tableのsource code見たほうが早いな
10:49:26
useTable のcode defaultColumn で検索をかけたところ、この部分を見るとわかりそうな感じ decorateColumn(d, defaultColumn) `makeHeaderGroups(visibleColumns, defaultColumn)
直接使っているのはこの部分
column に合体させているみたい`なんかこれもう型が無茶苦茶になってそう
@types/react-table を読んだほうが早い気がしてきた11:05:33 みた。
Partial<Column<D>> で定義されていた Column<D> をoptionalにしたやつなのか。としたら Column<D> の中身を知る必要があるな。11:08:02 だんだんわかってきた。
Column<D> には次のようなobjectを入れられるts{
accessor: 'accessor',
Header: 'Header',
Cell: ({ row: { original } }) => (
<button
onClick=(() => console.log(original))
>
Button text
</button>
),
},この
Cell に、今回の話題である EditableCell が入ってくる Cell の型は ColumnInterfaceBasedOnValue 引数の型はこれだ
tsexport type CellProps<D extends object, V = any> = TableInstance<D> & {
column: ColumnInstance<D>;
row: Row<D>;
cell: Cell<D, V>;
value: CellValue<V>;
}; TableInstance<D> とintersectionしている理由がわからんが、ともあれproperitiesはこの通りに作ればよさそうだ。Reference
Cellをcustomizeする方法が2つ書かれている
defaultColumn を使う方法元dataに
cell propertyを生やす方法11:37:39 できた
updateMyData はまだ設定していない型がわからない
あとで設定する
11:46:35
skipPageReset はいらないので消す12:13:05
defaultColumn の型定義が通らない…… updateTableData ( updateMyData の名前を変えた) が余計な引数として入ってしまうのがだめみたい？12:16:17 https://codesandbox.io/s/github/ggascoigne/react-table-example?file=/src/Table/Table.tsx に
defaultColumn の定義例がある。それを参考にしてみよう。17:07:07 これ単純に
{{Cell: EditableCell}} にしていないだけだった17:44:50 とりあえず編集できるようになった
EditableCell は React.FC<CellProps<TableData, string>> にした defaultColumns は Partial<Column<TableData>> にした updateTableData は useTable のpropertyにはないが、 useTable の options の末尾に渡すことで、react tableが勝手に EditableCell に渡してくれる17:55:57 値の更新処理関数が適当だったのでなおした
ついでにデータをlogに出力できるようにした
17:51:29 とりあえず動くsampleはできた
編集可能
要素の追加削除はなし
この後試すこと
要素の追加削除
対して難しくないと思う
元dataに要素を追加削除すればいいだけ
D&D
Pagenation
これは一番後だな
data driven
与えられたdataのを変換して表示するのに使えそうな雰囲気
Selection
18:41:27 これやらないと任意の要素のdeleteができない