feat(frontend): replace react-bootstrap-table

[reminjp]

react-bootstrap-tableが非推奨になりreact-bootstrap-table2を使うよう書かれていることに気づきました。

[kenkoooo]

react-bootstrap-table-next は type definition が無いからつらそうと思ってやってなかったのですが、最近 @types/react-bootstrap-table-next が出たっぽいので、ちょうど良いタイミングかもしれませんね。

[kenkoooo]

625 で react-table 良さそうという気持ちになりました。

[southball]

react-table をちょっと使ってみました。

確かにロジックと UI を分かれると便利です。

Type definition がつらかったです。@types/react-table をインストールして、そして react-table-config.d.ts を作らなければならないです。（https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-table を参照。）

それに、このファイルは使った hook を反映して、編集する必要がありますが、正しい type definition が作れないかもしれません。例えば、sortBy のあるテーブルが一つあって、sortBy のないテーブルが一つあれば、正しいタイプが作れないです。

（https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-table より）

Configuration Using Declaration Merging

These types depend upon declaration merging to work well.

To get started, create a file react-table-config.d.ts using the example further down this readme, place it in your source tree (e.g. into a types folder). This expands the default types with all of the plugin extensions currently in the type definitions.

You can stop here if you like, but while this is simple, it's a bit misleading. Out of the box, these types will suggest that you have access to values that come from plugins that you aren't using, i.e. the error checking is substantially weakened.

To bring the resulting types into better alignment with your plugins, you should edit your local copy of react-table-config.d.ts and remove all of the interfaces that don't apply to your chosen set of plugins.

また、今では any を使わずコンパイルするができません。https://github.com/tannerlinsley/react-table/blob/master/docs/quickstart.md を読んでテーブルを作ると、

const data = React.useMemo(
  () => generateData(10),
  []
);

const columns = React.useMemo(() => [
  {
    Header: 'Name',
    accessor: 'name', // accessor is the "key" in the data
  },
  {
    Header: 'Gender',
    accessor: 'gender',
  },
  {
    Header: 'Address',
    accessor: 'address',
  },
], []);

const {
  getTableProps,
  getTableBodyProps,
  headerGroups,
  rows,
  prepareRow,
} = useTable({ columns, data }, useSortBy);

ここの columns のタイプは TypeScript コンパイラを通らなくて、const columns = ... as any を使わなければならないです。

最後に、このプロジェクトはオフィシャル TypeScript サポートがないです。（https://github.com/tannerlinsley/react-table/discussions/2147#discussioncomment-8911）

この library を使ってみるときのコードはここにあります：https://github.com/southball/react-table-project

（余談ですが、react-table V8 は TypeScript サポートがあるようです：https://github.com/tannerlinsley/react-table/pull/2335#issuecomment-633180721）

[kenkoooo]

想像してたよりだいぶつらそう…