material-tableで日付や数値をセレクトリストでフィルタリングしてみる

若槻龍太

2020.08.16

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX事業本部の若槻です。

今回は、以前の記事で作成したReact + Material-UI + material-tableのアプリで、テーブルの各データの日付や数値の値をもとにセレクトリストでフィルタリングをできるようにしてみます。

実現したいこと

管理者が販売商品の一覧をテーブルビューで確認できるページで、テーブルの商品を以下の条件でセレクトリストによりフィルタリング表示できるようにしたいです。

予約のあり・なし（予約数が0か1以上か）
予約期限の超過・未超過（予約期限が現在日を過ぎているか否か）

スクリーンショット_2020-08-16_0_33_10.png

そこで上記の両フィルターをmaterial-tableのテーブルに対して実装してみます。

実装

セレクトリストの共通コンポーネント

まず今回実装したい両フィルターにて共通で使用するコンポーネントSelectList.tsxをsrc/components/atoms配下に作成します。

SelectList.tsx

import React from 'react';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';

const SelectList = (props: {
  columnDef: any;
  onFilterChanged: (rowId: string, filterValue: string) => void;
  items: [string, string][];
}) => {
  const { columnDef, onFilterChanged, items } = props;

  const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
    onFilterChanged(columnDef.tableData.id, event.target.value as string);
  };

  return (
    <FormControl>
      <Select onChange={handleChange}>
        {items.map((item) => (
          <MenuItem value={item```0}>{item```1}</MenuItem>
        ))}
      </Select>
    </FormControl>
  );
};

export default SelectList;

上記コードでは、SelectListコンポーネントの引数としてmaterial-tableの仕様として渡されるcolumnDefとonFilterChangedに加えて、itemsを[string, string][]形式で渡し、

        {items.map((item) => (
          <MenuItem value={item```0}>{item```1}</MenuItem>
        ))}

上記箇所で<MenuItem>をMapして作成することにより、セレクトリストのメニュー項目をコンポーネントの呼び出し側で動的に指定できるようにしています。

予約のあり・なしによるフィルタリング

src/components/pages/ProductPage.tsxのコードを次のように変更します。

ProductPage.tsx

import React from 'react';
import MaterialTable from 'material-table';
import GenericTemplate from '../templates/GenericTemplate';
import { ArrowUpward } from '@material-ui/icons';
import * as colors from '@material-ui/core/colors';
import SelectList from '../atoms/SelectList';

const ProductPage: React.FC = () => {
  interface Product {
    itemName: string;
    price: number;
    reserveDuedate: string;
    reserveCount: number;
  }
  return (
    <GenericTemplate title={'商品ページ'}>
      <MaterialTable
        icons={{
          SortArrow: React.forwardRef((props, ref) => (
            <ArrowUpward
              {...props}
              ref={ref}
              style={{ color: colors.blue```800 }}
            />
          )),
        }}
        columns={[
          {
            title: '商品名',
            field: 'itemName',
            defaultSort: 'asc',
            filtering: false,
          },
          {
            title: '予約期限',
            field: 'reserveDuedate',
            filtering: false,
          },
          {
            title: '価格',
            field: 'price',
            type: 'numeric',
            filtering: false,
          },
          {
            title: '予約数',
            field: 'reserveCount',
            type: 'numeric',
            filterCellStyle: { textAlign: 'right' },
            filterComponent: (props) => (
              <SelectList
                columnDef={props.columnDef}
                onFilterChanged={props.onFilterChanged}
                items={[
                  ['all', 'すべて'],
                  ['reserved', '予約あり'],
                  ['notReserved', '予約なし'],
                ]}
              />
            ),
            customFilterAndSearch: (filterValue: string, rowData: Product) => {
              if (filterValue === 'reserved') {
                return rowData.reserveCount > 0;
              } else if (filterValue === 'notReserved') {
                return rowData.reserveCount === 0;
              }
              return true;
            },
          },
        ]}
        data={[
          {
            itemName: 'ペンライトセット',
            price: 20000,
            reserveDuedate: '2020/08/10',
            reserveCount: 20,
          },
          {
            itemName: 'パンフレット',
            price: 4000,
            reserveDuedate: '2020/09/15',
            reserveCount: 0,
          },
          {
            itemName: 'タオル',
            price: 3000,
            reserveDuedate: '2020/08/30',
            reserveCount: 5,
          },
          {
            itemName: 'Tシャツ',
            price: 4500,
            reserveDuedate: '2020/08/30',
            reserveCount: 10,
          },
        ]}
        options={{
          showTitle: false,
          filtering: true,
        }}
      />
    </GenericTemplate>
  );
};

export default ProductPage;

columnsのfilterComponentプロパティにSelectListコンポーネントを指定し、その引数itemsにメニューの要素としてvalue属性（all、reserved、notReserved）と値（すべて、予約あり、予約なし）の組の配列を渡して、予約数列で使用するセレクトリストを作成しています。

            filterComponent: (props) => (
              <SelectList
                columnDef={props.columnDef}
                onFilterChanged={props.onFilterChanged}
                items={[
                  ['all', 'すべて'],
                  ['reserved', '予約あり'],
                  ['notReserved', '予約なし'],
                ]}
              />
            ),

これにより下記のようなセレクトリストが予約数列で使用可能となります。
<img src="https://devio2024-2-media.developers.io/upload/wp-author-wakatsuki-ryuta/2025-01-25/2100b7a7-eea8-4cb6-9e7a-ba1075cec34e.png" width="280" />

そして、フィルター条件をcolumnsのcustomFilterAndSearchプロパティにて定義します。セレクトリストで選択したメニューのvalue属性の値（all、reserved、notReservedのいずれか）がcustomFilterAndSearchの第一引数、テーブルの各行ごとのデータが第二引数となるので、2つの引数をもとにフィルター条件を定義します。ここでtrueが返された行のみがフィルター表示されます。

            customFilterAndSearch: (filterValue: string, rowData: Product) => {
              if (filterValue === 'reserved') {
                return rowData.reserveCount > 0;
              } else if (filterValue === 'notReserved') {
                return rowData.reserveCount === 0;
              }
              return true;
            },

予約数列にて予約のあり・なしによるフィルタリングが実装できました。操作時の画面は以下のようになります。

フィルター適用前
セレクトリストで予約ありを選択
セレクトリストで予約なしを選択
セレクトリストですべてを選択

予約期限の超過・未超過によるフィルタリング

日付の比較によるフィルタリングを可能とするためmomentをインストールします。

% npm install moment --save

src/components/pages/ProductPage.tsxのコードを次のように変更します。

ハイライトされた行が前項との変更部分（行追加）となります。

ProductPage.tsx

import React from 'react';
import MaterialTable from 'material-table';
import GenericTemplate from '../templates/GenericTemplate';
import { ArrowUpward } from '@material-ui/icons';
import * as colors from '@material-ui/core/colors';
import SelectList from '../atoms/SelectList';
import moment from 'moment';

const ProductPage: React.FC = () => {
  interface Product {
    itemName: string;
    price: number;
    reserveDuedate: string;
    reserveCount: number;
  }
  return (
    <GenericTemplate title={'商品ページ'}>
      <MaterialTable
        icons={{
          SortArrow: React.forwardRef((props, ref) => (
            <ArrowUpward
              {...props}
              ref={ref}
              style={{ color: colors.blue```800 }}
            />
          )),
        }}
        columns={[
          {
            title: '商品名',
            field: 'itemName',
            defaultSort: 'asc',
            filtering: false,
          },
          {
            title: '予約期限',
            field: 'reserveDuedate',
            filterComponent: (props) => (
              <SelectList
                columnDef={props.columnDef}
                onFilterChanged={props.onFilterChanged}
                items={[
                  ['all', 'すべて'],
                  ['notOverDue', '未超過'],
                  ['overDue', '超過'],
                ]}
              />
            ),
            customFilterAndSearch: (filterValue: string, rowData: Product) => {
              const jstNow = new Date().toLocaleString('ja', {});
              if (filterValue === 'notOverDue') {
                return moment(rowData.reserveDuedate).isSameOrAfter(jstNow);
              } else if (filterValue === 'overDue') {
                return moment(rowData.reserveDuedate).isBefore(jstNow);
              }
              return true;
            },
          },
          {
            title: '価格',
            field: 'price',
            type: 'numeric',
            filtering: false,
          },
          {
            title: '予約数',
            field: 'reserveCount',
            type: 'numeric',
            filterCellStyle: { textAlign: 'right' },
            filterComponent: (props) => (
              <SelectList
                columnDef={props.columnDef}
                onFilterChanged={props.onFilterChanged}
                items={[
                  ['all', 'すべて'],
                  ['reserved', '予約あり'],
                  ['notReserved', '予約なし'],
                ]}
              />
            ),
            customFilterAndSearch: (filterValue: string, rowData: Product) => {
              if (filterValue === 'reserved') {
                return rowData.reserveCount > 0;
              } else if (filterValue === 'notReserved') {
                return rowData.reserveCount === 0;
              }
              return true;
            },
          },
        ]}
        data={[
          {
            itemName: 'ペンライトセット',
            price: 20000,
            reserveDuedate: '2020/08/10',
            reserveCount: 20,
          },
          {
            itemName: 'パンフレット',
            price: 4000,
            reserveDuedate: '2020/09/15',
            reserveCount: 0,
          },
          {
            itemName: 'タオル',
            price: 3000,
            reserveDuedate: '2020/08/30',
            reserveCount: 5,
          },
          {
            itemName: 'Tシャツ',
            price: 4500,
            reserveDuedate: '2020/08/30',
            reserveCount: 10,
          },
        ]}
        options={{
          showTitle: false,
          filtering: true,
        }}
      />
    </GenericTemplate>
  );
};

export default ProductPage;

実装の仕方は前項の「予約のあり・なし」と同じです。

columnsのfilterComponentプロパティにSelectListコンポーネントを指定し、その引数itemsにメニューの要素を渡して、予約期限列で使用するセレクトリストを作成しています。

            filterComponent: (props) => (
              <SelectList
                columnDef={props.columnDef}
                onFilterChanged={props.onFilterChanged}
                items={[
                  ['all', 'すべて'],
                  ['notOverDue', '未超過'],
                  ['overDue', '超過'],
                ]}
              />
            ),

これにより下記のようなセレクトリストが予約期限列で使用可能となります。
<img src="https://devio2024-2-media.developers.io/upload/wp-author-wakatsuki-ryuta/2025-01-25/9724e5d6-0cdc-47da-81f4-b4bd4c4ddeed.png" width="280" />

そして、フィルター条件をcolumnsのcustomFilterAndSearchプロパティにて定義します。セレクトリストの選択状態および、各行ごとに日本時間の現在時刻とreserveDuedateのmomentオブジェクトの比較によってフィルタリングをしています。

            customFilterAndSearch: (filterValue: string, rowData: Product) => {
              const jstNow = new Date().toLocaleString('ja', {});
              if (filterValue === 'notOverDue') {
                return moment(rowData.reserveDuedate).isSameOrAfter(jstNow);
              } else if (filterValue === 'overDue') {
                return moment(rowData.reserveDuedate).isBefore(jstNow);
              }
              return true;
            },