`<DataTable />`における一意キー指定を柔軟にする

[youchann]

export type DataTableBaseData = {
  id: number;
  selectDisabled?: boolean;
};

<DataTable />で扱うdatapropsの中にあるidをもっと柔軟にする。

• stringを入れることを可能にする
• 一意であるプロパティであれば良いので、idではないプロパティも指定できるようにする

[youchann]

type SampleData = {
  key: string;
  name: string;
}[]

例えば↑のような形でもそのまま<DataTable data={sampleData} key="key" />といったように格納できるようにする。

[youchann]

• Tabが内包される実装となっていて、複雑
• rowSpanがいじれる構造となっていて、複雑
• sortの機能を内包していて、複雑
• ページネーションの機能を内包していて、複雑

総じて複雑なので、根本から対応したくなっている。 事業的には情報をテーブルで一覧表示するケースは多く、コンポーネント群の中でも1位2位を争うぐらいには使われている。

[youchann]

対応策としては3つぐらいありそう。

1. インタフェースを保ったまま、頑張ってリファクタリングをする
2. 別途コンポーネントを作りなおす
3. 有料のコンポーネントをingred-uiに導入する

[youchann]

https://chakra-ui.com/getting-started/with-react-table

内部的にreact-tableで持つところまではingred-uiでやっておいて、TabとかPagerなどは別コンポーネントとして定義してpluggableな感じで実装するとよさそう。