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

#Material-UI

#material-table

若槻龍太

2020.09.20

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

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

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

Actions | material-table

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

やってみた

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

普通に実装してみる

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

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

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

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

Icons | MATERIAL DESIGN

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

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

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

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

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

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

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

アイコンの色を変える

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

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

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 + '.'),
          },
        ]}
      />

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

列のタイトルを変更する

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 + '.'),
          },
        ]}
      />

Buttonコンポーネントを使う

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

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

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 + '.'),
          },
        ]}
      />