やりたいこと
Material React Tableの全選択チェックボックスですべてのページの行を選択できるようにしたい！
背景
Material React Tableの表の全選択チェックボックスでは、特に何もしない限り、表示されているページの行のみ全選択されます。しかし、たまたま表示されていないページも含めて全選択したくなりましたので、なんとかがんばった次第です。
Material React Table ってなぁに？
キレイでさらに機能が豊富な表を簡単に作れるReactのコンポーネントのライブラリです。
調べたこと
toggleAllRowsSelectedが名前的にそれっぽいので一応調べると、Material React Tableが依存しているパッケージの中で定義されていました。
↑この部分です。
↑によるとmuiSelectAllCheckboxPropsはCheckboxProps | ({ table }) => CheckboxPropsという型です。
そして↑によるとCheckboxPropsはCheckboxのPropsのようです。
というわけでさらに↑によるとonChangeというイベントがあるようです。
もうあとは組み合わせるだけです。
結論
useMaterialReactTable({
//
// ここにその他色々な（今回の趣旨とは無関係な）ことがいっぱい
//
muiSelectAllCheckboxProps: ({table})=>{
return {
onChange(event,checked){
table.toggleAllRowsSelected();
},
};
},
});
このように、muiSelectAllCheckboxPropsを追記して、全選択チェックボックスが変更された時に、table.toggleAllRowsSelectedが呼ばれるように配慮します。
やることはこれだけです🎉