material-table でコンポーネント再描画時にフィルターがリセットされてしまう現象を対処する

はじめに

テントの中から失礼します、CX事業本部のてんとタカハシです！

Material-UI のテーブルを基に作られた material-table のフィルターですが、コンポーネントの再描画が走ると、フィルターが勝手にリセットされてしまう現象が発生しまして、それを対処したので記事にしようと思います。

material-table のフィルターとはなんぞやって思った方には、以前ブログに書いた下記の記事を読んで頂けると、概要が分かるかと思います。

material-table で日付範囲の指定によるフィルタリングがしたい

また、対処後のソースコードを下記のリポジトリに置いていますので、参考にして頂ければと思います。

GitHub - iam326/material-table-filter-reset-when-re-rendering-component

環境

$ sw_vers
ProductName:    Mac OS X
ProductVersion: 10.15.6
BuildVersion:   19G2021

$ node --version
v12.18.2

$ yarn --version
1.22.4

$ yarn list --depth=0
...
├─ @material-ui/core@4.11.0
├─ material-table@1.68.0
├─ react@16.13.1
├─ typescript@3.7.5
...

現象

例えば、material-table で作ったクーポン一覧テーブルがあるとします。行をクリックしてクーポンを選択すると、背景の色が変わり、クーポンを使用するためのボタンが押せるようになる感じの UI を想定します。

ソースコードを下記に記載します。

行をクリックした際の処理は、onRowClick に記述します。今回は行をクリックした際、どのクーポンを選んだかを記録しておくために、selectedCouponId という state を更新する処理を実装しています。

また、options に filtering: true を渡して、全ての列に文字列の部分一致によるフィルターを設置します。

const DataTable: React.FC = () => {
  const [selectedCouponId, setSelectedCouponId] = useState<string | null>(null);
  return (
    <MaterialTable
      options={{
        search: false,
        draggable: false,
        filtering: true,  // ★ 全ての列にフィルターを設置
        rowStyle: (rowData) => ({
          backgroundColor: selectedCouponId === rowData.couponId ? '#eee' : '',
        }),
      }}
      onRowClick={(_, rowData) => // ★ 行クリック時の処理
        setSelectedCouponId(
          rowData &&
            (!selectedCouponId || selectedCouponId !== rowData.couponId)
            ? rowData.couponId
            : null
        )
      }
      actions={[
        {
          icon: () => (
            <Button
              variant="contained"
              color="primary"
              disabled={!selectedCouponId}
            >
              使用する
            </Button>
          ),
          disabled: !selectedCouponId,
          isFreeAction: true,
          onClick: () => alert('Button Click!!'),
        },
      ]}
      columns={[
        {
          title: 'クーポン ID',
          field: 'couponId',
        },
        { title: '店舗', field: 'storeName' },
        {
          title: 'クーポン名',
          field: 'couponName',
        },
        {
          title: '割引率',
          field: 'discountRate',
          cellStyle: { textAlign: 'right' },
        },
        {
          title: '利用開始日',
          field: 'startDate',
          cellStyle: { textAlign: 'right' },
        },
        {
          title: '利用終了日',
          field: 'endDate',
          cellStyle: { textAlign: 'right' },
        },
      ]}
      data={tableData}
      title="クーポン一覧"
    />
  );
};

では、このテーブルに対して、店舗名に「秋葉原」を含むクーポンのみ表示させるよう、フィルタリングを適用してあげます。

その後、行をクリックしてクーポンを選択すると、フィルターが勝手にリセットされ、全てのクーポンが表示されてしまいます。行をクリックしたことで selectedCouponId が更新され、コンポーネントの再描画が走り、列情報がリセットされた結果、この現象が起きてしまうということが考えられます。

対処法

簡単です。列情報自体を state 化するだけで、この現象を対処できます。これでコンポーネントの再描画が走っても列情報を維持することができます。

const [columnInfo] = useState<Array<Column<Coupon>>>([ // ★ 列情報を state 化
  {
    title: 'クーポン ID',
    field: 'couponId',
  },
  ...
    
<MaterialTable
  ...
  columns={columnInfo} // ★ state 化した列情報を渡す
  data={tableData}
  title="クーポン一覧"
/>

フィルタリング適用後に、行をクリックしてクーポンを選択しても、フィルターはそのまんまになりました！

おわりに

今回は、material-table でコンポーネント再描画時にフィルターがリセットされてしまう現象の対処方法についてご紹介しました。

material-table が標準で用意しているフィルターと、行クリック時の処理を単純に組み合わせた結果、この現象が発生してしまいました。最初はどう対処すれば良いのか見当がつかなかったのですが、GitHub の Issue を探っていたら、同じような現象で困っている人がいて、その中のコメントで答えを見つけることができました。めちゃ助かった。

Issues - Filtering states reset upon rerendering remote table

今回は以上になります。最後まで読んで頂きありがとうございました！