React+Material UIのテーブルプラグイン

経緯

• React+Material UI をベースに進んでいるプロジェクトで、下記のようなテーブルを作るということになり、プラグインを探してみました。
  • 行ごとにチェックボックスがついていて、選択できる
  • またヘッダーをチェックするとテーブル全体の選択状態がトグルされる
  • 列の幅が可変
  • 列を fixed できる
  • ページングできる
  • セルの中身をカスタムできる(アイコンを入れたりできる)

候補になったもの

https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/getting-started/
https://react-table.tanstack.com/
https://mui.com/components/data-grid/

どうだったか

React Grid

• 採用しました。要件を比較的簡単に実装することができました
• ただ、スタイルを整えるのはなかなか大変でした
• 2022/2/10追記 コメント頂いた通り。商用利用は有料とのこと。

React Table

• 1 番スター数が多かったですが、下記がネックでした
  • チェックボックスの実装は自力でやる必要があるっぽい
  • fixed にしようとすると、また別のプラグインを使う必要がある
  • React Grid と比較すると行数がとっても多くなってしまう
  • この例の通り、resize をしようとすると、table タグを使うことができない

DataGrid

• 課金しないと要件が実現できなそうだったので採用せず

実装内容

ざっくり再現するとこんな感じです
https://codesandbox.io/s/distracted-mirzakhani-krrxc?file=/src/App.js

下記のように、プラグインのタグをどんどん置いていけばそれっぽいテーブルができてしまいました

<Grid rows={rows} columns={gridColumns}>
  <PagingState defaultCurrentPage={0} defaultPageSize={10} />
  <DataTypeProvider
    key="label"
    for={["label"]}
    formatterComponent={({ value }) => (
      <Box textAlign="center" sx={{ backgroundColor: "lightBlue" }}>
        {value}
      </Box>
    )}
  />

  <SelectionState selection={selection} onSelectionChange={setSelection} />
  <IntegratedPaging />
  <IntegratedSelection />
  <Table />
  <TableColumnResizing
    columnWidths={columnWidths}
    onColumnWidthsChange={setColumnWidths}
  />
  <TableHeaderRow />
  <TableSelection showSelectAll />
  <TableFixedColumns leftColumns={[TableSelection.COLUMN_TYPE, "name"]} />
  <PagingPanel />
</Grid>