やりたいこと

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が呼ばれるように配慮します。

やることはこれだけです🎉