新）複数登録機能の技術選定

[shari-sushi]

v-karaにて、複数登録機能を実装したい。https://github.com/shari-sushi/V-Kara-Lists/issues/181

• react-form 現状使える技術 react-fotmでも実装可能だが、複数登録で良いUIを作れるか
• react-table(tanstack-table) 確実にUIが保証されているものにtanstac-tableがあるが、今使っているのはreact-tableである。可能なら混在したくないが、今後を考えるとできるものからtanstack-tableに移行したほうが良い。 (tanstack-tableの前身がreact-table) そもそも、react-tableでもこの機能があるのかわかっていない。

[shari-sushi]

react-table

• 記事: React_Tableで編集可能なtableを作ってみる https://scrapbox.io/takker/React_Tableで編集可能なtableを作ってみる

• tanstack :editdata https://tanstack.com/table/v8/docs/framework/react/examples/editable-data

• sandbox: rowのcreate/delete https://codesandbox.io/p/sandbox/fancy-rgb-7k16x?file=%2Fsrc%2FTable.tsx

• need/should

  • rowの作成
  • オブジェクトの配列に空のオブジェクトを渡す
  • 最大番号は記録しておき、作成時は常に最大+1 →削除しても順番が崩れない
  • rowの削除(削除ボタンカラムを配置して、配列の番号を指定して削除？
  • rowの並び替え
  • ドラッグドロップ or １つ上/下へ(上下ボタンカラム)
  • 配列の番号を入れ替える