概要

AtCoder Marathon Replay を作るときに react-bootstrap-table2 · Next Generation of react-bootstrap-table を使ったので,2 じゃない react-bootstrap-table を使っていた身から,注意点などメモっておく.

移行

だいたい以下のページを読めば OK.TableHeaderColumn がなくなって,代わりに columns に列の情報を指定するようになったのが最大の変化.

ページネーション

react-bootstrap-table に比べて,カスタマイズが容易になった.

たとえば,ページリストのボタンを変えたいなら,次のようにできる.この例では,リストに含まれるページ番号は既に決まっている.

また,ページリストの位置を変えたいときは,PaginationListStandalone を使う.

では,たとえば AtCoder の順位表のように,全ページに対数回の操作で移動できるように,表示するページ番号を自分で決めたいようなときはどうするかというと,PaginationProvider というのを使う.

列プロパティ

以下ですべて紹介されている.

ダミー列

同じデータフィールドの列を2つ以上用意すると warning が出る.

そんなときは isDummyField: true を使う.便利.


以上