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', '予約なし'],
                ]}
              />
            ),

これにより下記のようなセレクトリストが予約数列で使用可能となります。

そして、フィルター条件を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', '超過'],
                ]}
              />
            ),

これにより下記のようなセレクトリストが予約期限列で使用可能となります。

そして、フィルター条件を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;
            },

予約数列にて予約のあり・なしによるフィルタリングが実装できました。操作時の画面は以下のようになります。（執筆時点の日付は2020/08/16です。）

フィルター適用前
セレクトリストで超過を選択
セレクトリストで未超過を選択
セレクトリストですべてを選択

おわりに

React + Material-UI + material-tableのアプリで、テーブルの各データの日付や数値の値をもとにセレクトリストによるフィルタリングを実装してみました。

JavaScriptではなくTypeScriptによる実装であるため、Reactやmaterial-table特有の型を明示的に定義する必要があるのがスパルタな感じで大変でしたが、それによりコンポーネントの動作や渡す値の理解が明瞭となり鍛えられますね。

参考

以上

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

実現したいこと

実装

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

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

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

おわりに

参考

イベント

EVENT【5/15（水）リモート】クラスメソッドの会社説明会を開催します

EVENT【5/8リモート】クラスメソッドのフリーランスエンジニア会社説明会〜フィンテック / リテール業界案件特集〜を開催します

EVENT【5/28（火）】AWSを最大活用するための1dayカンファレンス

EVENT【5/17（金）】認証機能の開発工数削減をデモで体験！次世代認証基盤サービス『Auth0 by Okta』導入実践ウェビナー

EVENT【5/14（火）】アノテーションの中途向けオンライン会社説明会を開催します

EVENT【5/23（木）】ユースケースに学ぶAWS運用のノウハウ～可視化から統制まで～

EVENT【5/16（木）】Snowflakeを触ってみよう！初めての方向けハンズオンセミナー

EVENT【5/10（金）名古屋】クラスメソッドグループの会社説明会を開催します！

EVENT【4/25（木）リモート】Google Cloudに携わるエンジニアのキャリア～クラスメソッド会社説明会～

EVENT【4/30（火）リモート】クラスメソッドの会社説明会を開催します

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

実現したいこと

実装

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

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

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

おわりに

参考

イベント

EVENT【5/15（水）リモート】クラスメソッドの会社説明会を開催します

EVENT【5/8リモート】クラスメソッドのフリーランスエンジニア会社説明会 〜フィンテック / リテール 業界案件特集〜 を開催します

EVENT【5/28（火）】AWSを最大活用するための1dayカンファレンス

EVENT【5/17（金）】認証機能の開発工数削減をデモで体験！次世代認証基盤サービス『Auth0 by Okta』導入実践ウェビナー

EVENT【5/14（火）】アノテーションの中途向けオンライン会社説明会を開催します

EVENT【5/23（木）】ユースケースに学ぶAWS運用のノウハウ～可視化から統制まで～

EVENT【5/16（木）】Snowflakeを触ってみよう！初めての方向けハンズオンセミナー

EVENT【5/10（金） 名古屋】クラスメソッドグループの会社説明会を開催します！

EVENT【4/25（木）リモート】Google Cloudに携わるエンジニアのキャリア～クラスメソッド会社説明会～

EVENT【4/30（火）リモート】クラスメソッドの会社説明会を開催します

関連記事

TypeScriptを使用してMochaとChaiでテストを書き、nycを用いてカバレッジを取得してみた

ElectricSQLでLocal-firstなアプリを作る

Vite + Vitest の環境を設定してみた

Cloudflare Workers間でRPC通信する

EVENT【5/8リモート】クラスメソッドのフリーランスエンジニア会社説明会〜フィンテック / リテール業界案件特集〜を開催します

EVENT【5/10（金）名古屋】クラスメソッドグループの会社説明会を開催します！