material-tableでActionsを使用してレコードごとのボタンを実装してみた
こんにちは、CX事業本部の若槻です。
Material-UI向けのテーブルコンポーネントであるmaterial-tableでは、テーブルのレコード内やツールバーにボタンを追加できるActionsというプロパティが用意されています。
今回は、この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では次のページにあるアイコンのアセットが使用可能となっています。
使いたいアイコンを見つけたら選択すれば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 + '.'),
},
]}
/>
おわりに
material-tableでActionsを使用してレコードごとのボタンを実装してみました。
今回はアイコンとButtonコンポーネントの大きく2種類で試してみましたが、実際に行われるアクションなどに応じて使われやすい方を採用したいですね。
参考
以上
