material-tableでActionsを使用してレコードごとのボタンを実装してみた

2020.09.20

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

Material-UI向けのテーブルコンポーネントであるmaterial-tableでは、テーブルのレコード内やツールバーにボタンを追加できるActionsというプロパティが用意されています。

今回は、このActionsプロパティを使用してレコードごとのボタンを実装してみました。

やってみた

次のようなmaterial-tableのテーブルの各行にボタンを実装してみます。 image.png

普通に実装してみる

MaterialTableコンポーネントのactionsプロパティに次のように定義を追加すれば、各行にボタンを実装できました。

      <MaterialTable
        // other props
        actions={[
          {
            icon: 'edit',
            tooltip: 'Edit Item',
            onClick: (_, rowData) =>
              alert('Open edit page of ' + (rowData as any).itemName + '.'),
          },
        ]}
      />

image.png

今回追加した上記の定義について説明します。

まずiconプロパティでは、ボタンとしたいアイコンを指定しています。Material-UIでは次のページにあるアイコンのアセットが使用可能となっています。

使いたいアイコンを見つけたら選択すればURLからアイコン名を確認できるので、icon: '<使いたいアイコン名>'のように指定すれば任意のアイコンをボタンとして実装できます。

image.png

次にtooltipプロパティを指定することにより、ボタンのマウスオーバー時にTipsテキストを表示するようにしています。tooltip: '<表示したいテキスト>'のように使用します。 image.png

そしてonClickプロパティを指定することにより、ボタンクリック時のアクションを関数で定義することができます。

関数の第二引数にはレコードデータを指定して、アクションとなる関数内で使用することができますが、注意点として、レコードの値を使う際には次のように(rowData as any).<フィールド名>としてレコードデータの型をAny型とした上で値を取り出す必要がありました。

            onClick: (_, rowData) =>
              alert('Open edit page of ' + (rowData as any).itemName + '.'),

rowData.<フィールド名>のようにして値を取り出そうとした場合は、次のようなビルドエラーとなりました。 image.png

今回はレコードの値をテキストに含むアラートを表示させるだけのアクションとなります。 image.png

アイコンの色を変える

既定ではアイコンの色は黒ですが、任意の色に変更することもできます。

インポートしたIconコンポーネントのスタイルで色を指定して、actionsiconプロパティで関数の返り値として指定することにより色を変えることができます。

import Icon from '@material-ui/core/Icon';
      <MaterialTable
        // other props
        actions={[
          {
            icon: () => <Icon style={{ color: colors.teal[700] }}>edit</Icon>,
            tooltip: 'Edit Item',
            onClick: (_, rowData) =>
              alert('Open edit page of ' + (rowData as any).itemName + '.'),
          },
        ]}
      />

アイコンの色を変更できました。 image.png

列のタイトルを変更する

Actionsの列のタイトルは既定でActionsとなりますが、これを任意のタイトルに変更することができます。

MaterialTableコンポーネントのlocalizationプロパティでheader: { actions: '<任意のタイトル>' }と定義すれば変更できます。今回は空欄''を指定してタイトルを表示させないようにしました。

      <MaterialTable
        // other props
        localization={{
          header: { actions: '' },
        }}
        actions={[
          {
            icon: () => <Icon style={{ color: colors.teal[700] }}>edit</Icon>,
            tooltip: 'Edit Item',
            onClick: (_, rowData) =>
              alert('Open edit page of ' + (rowData as any).itemName + '.'),
          },
        ]}
      />

image.png

Buttonコンポーネントを使う

ActionsのボタンにアイコンではなくButtonコンポーネントを使うこともできます。

インポートしたButtonコンポーネントをactionsiconプロパティで関数の返り値として指定することにより実装できます。

import Button from '@material-ui/core/Button';
      <MaterialTable
        // other props
        actions={[
          {
            icon: () => (
              <Button variant="contained" color="primary">
                編集画面
              </Button>
            ),
            onClick: (_, rowData) =>
              alert('Open edit page of ' + (rowData as any).itemName + '.'),
          },
        ]}
      />

image.png

おわりに

material-tableでActionsを使用してレコードごとのボタンを実装してみました。

今回はアイコンとButtonコンポーネントの大きく2種類で試してみましたが、実際に行われるアクションなどに応じて使われやすい方を採用したいですね。

参考

以上