BLOG

ブログ
CATEGORY

Material React Table で高機能なテーブルを作ろう【導入・ローカライズ編】

はじめに

こんにちは、遠藤です。

今回はReactやNext.jsを使用して開発を行っている方向けに、便利なテーブルのライブラリをご紹介します。UIライブラリにはさまざまなテーブルが用意されていますが、ライブラリ依存の制約があったり、使いたい機能が有料版でしか対応してなかったりする場合があります。

そんな中、今回紹介するMaterial React Table は拡張性が高く、さまざまなシチュエーションに対応できるなと感じました。具体的には、カラムのリサイズが可能であったり、フィルター機能が充実していたり、テーブルの列を拡張できたり、あるいはそれらを複合的に組み合わせることができます。

公式にわかりやすいサンプルがあるので、ぜひそちらもご覧ください。

今回はそんな便利ライブラリ Material React Table の導入とローカライズ設定をご紹介いたします。

Material React Tableとは

Material React Table は MUIとTanStack Table という二つのライブラリを合わせて作られています。
ですので、すでにプロジェクトでMUIを使用している場合でも柔軟に取り入れやすいという側面があります。一方でVueなど他のフレームワークを使用している場合はTanStack Tableを導入することで本記事と似たようなテーブルを作成できるかもしれません。

本記事では前提として、ReactやNext.jsでの開発環境を想定しています。
まずは、Reactの環境を作成し、ライブラリをインストールし、画面にテーブルをサンプルのテーブルを表示しましょう。細かい設定方法などは後述します。

環境構築とインストール

以下のコマンドでreact_mrtというプロジェクト（ディレクトリ）を作成した後、その中でTypeScriptをサポートした環境でReactが動くようにします。今回はプロジェクト名を”react_mrt”としましたが、この部分は任意でOKです。

npx create-react-app --template typescript react_mrt
npm run start

“npm run start”でlocalhostが立ち上がることを確認した後は、下記のコマンドで実際にMaterial React Tableをインストールしましょう。

npm i material-react-table

サンプルテーブルの作成

次にテーブルコンポーネントを作成するためのファイルをsrcディレクトリ内に作成します。名前は任意ですが、今回はtable.tsxとしました。

次に公式から提供されているサンプルコードを table.tsx に貼り付けます。
※36行目でtsエラーが出ていたので一部変更しています。

import { useMemo } from 'react';
import {
  MaterialReactTable,
  useMaterialReactTable,
  type MRT_ColumnDef,
} from 'material-react-table';

// データの型定義
interface Person {
  name: string;
  age: number;
}

// テーブルに渡すデータ
const data: Person[] = [
  {
    name: 'John',
    age: 30,
  },
  {
    name: 'Sara',
    age: 25,
  },
];

export default function Table() {

　// カラムの定義
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    () => [
　　　　// keyを直接指定する場合
      {
        accessorKey: 'name', 
        header: 'Name',
        muiTableHeadCellProps: { style: { color: 'green' } }, 
        enableHiding: false, 
      },
       // keyを関数を使用して加工する場合
      {
        accessorFn: (originalRow) => parseInt(String(originalRow.age)),
        id: 'age', 
        header: 'Age',
        Header: <i style={{ color: 'red' }}>Age</i>, 
        Cell: ({ cell }) => <i>{cell.getValue<number>().toLocaleString()}</i>, 
      },
    ],
    [],
  );

　// テーブルの定義
  const table = useMaterialReactTable({
    columns,
    data, 
    enableRowSelection: true, 
    enableColumnOrdering: true, 
    enableGlobalFilter: false, 
  });

　// コンポーネントに定義したtableをpropsで渡す
  return <MaterialReactTable table={table} />;
}

続いて、上記で作成したテーブルコンポーネントをindex.tsxで呼び出します。


import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import Table from './table';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <Table/>
  </React.StrictMode>
);

ブラウザからlocalhostにアクセスして以下の写真のような画面になっていれば、正しくサンプルのテーブルを実装できています。

サンプルのテーブルでは、カラムの入れ替えやフィルタリング、列の選択などができます。
まずはサンプルで実装したテーブルに触れ、どのようなことができるのか試してみてください。

テーブル表示の仕組み

Material React Tableでのテーブル作成は以下のような工程にまとめられます。

  1. データを用意する
  2. カラムを定義する
  3. データとカラムを使用してテーブルを定義する
  4. MaterialReactTableコンポーネントにテーブルの情報を渡す

データはAPI等で取得する形が一般的ですが、今回はサンプルのデータをコンポーネント内に定義して進めます。

カラムはアクセスキーを手入力する方法とテーブルに読み込ませたデータから取得する方法があります。サンプルのName列が前者、Age列が後者です。

テーブルはuseMaterialReactTable関数を使用して定義します。関数に渡す引数の中に、実際のデータやカラム定義、フィルタなど各機能の有効有無が入っています。

次はカラム定義、テーブル定義についてそれぞれ詳しくみていきます。

カラム定義について

Material React Tableでは、カラムの設定が配列で渡され、各カラムについてはオブジェクト単位で管理されています。イメージとしては下記のような形です。

const columns = [{カラム設定1},{カラム設定2}]

サンプルではReactのuseMemoを使用して定義したカラム情報をキャッシュ管理をしています。これにより再レンダリングされる際に、同じ計算や処理を繰り返し行わずに済みます。また、リサイズなどカラム情報に変更があった際にパフォーマンスが向上するらしく、公式からもuseMemo等を使用することが推奨されています。

また、ここでは“MRT_ColumnDef”という独自の型定義を使用しています。
これは配列内の各オブジェクトになにを設定すればいいか・何を設定してはいけないかを教えてくれる機能です。型定義をしない場合、誤った設定値を渡してしまい、ライブラリが機能しなくなってしまう場合があります。

// MRT_ColumnDef無しの場合  
const columns = useMemo(
    () => [
      {
        ???:??? // ←何を設定していいかわからない or 無効な設定値が渡されてしまう
      },
    ],[],
  );

// MRT_ColumnDef有りの場合  
const columns = useMemo<MRT_ColumnDef<Person>[]>(
    () => [
      {
        // 有効な設定値のみが渡される
        accessorKey: 'name', 
        header: 'Name',
      },
    ],[],
  );

サンプルの設定値を解説

  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    () => [
      {
        accessorKey: 'name', 
        header: 'Name',
        muiTableHeadCellProps: { style: { color: 'green' } }, 
        enableHiding: false, 
      },
      {
        accessorFn: (originalRow) => parseInt(String(originalRow.age)),
        id: 'age', 
        header: 'Age',
        Header: <i style={{ color: 'red' }}>Age</i>, 
        Cell: ({ cell }) => <i>{cell.getValue<number>().toLocaleString()}</i>, 
      },
    ],
    [],
  );
  • accessKey
    • データと結びつくkeyを設定します。tableに渡すdataのプロパティ名と合致する文字列を入力します。ここでは””name”を渡しているので、data.nameの値がこの列に入ります。
  • header
    • カラム名を定義します。
  • muiTableHeadCellProps
    • カラムのセル（th要素）のスタイル情報を設定します。
  • enableHiding
    • カラムの表示/非表示機能を適用させるか選択します。デフォルトはtrueです。
  • accessKeyFn
    • 関数でkeyを指定することができます。サンプルでは”originalRow”を引数に取り、その中のageプロパティをkeyとして設定しています。
  • id
    • idをオーバーライドします。
  • Header
    • カラムに渡す要素を変更できます。
  • Cell
    • その列内のtd要素を指定できます。サンプルではそのまま数字をi要素として表示しています。button要素など特定のアクションを追加する際に便利です。

テーブル定義について

前述の通り、テーブルはuseMaterialReactTable関数を使用します。
具体的な設定値は引数として設定します。必須なのはdataとcolumnsです。

そのほかはテーブルの機能についての設定値で、いずれもプロパティ:値の形式で設定します。

※注意点として、dataを定義する際、定義名を”data”以外にしている際は下記のような記述に気をつけてください。単純なミスですが私はここで一度詰まりました…
columnsについても同じです。

const somethingData = [{...}] 
const table = {
 // OK
 data:somethingData,
 //Bad
 somethingData,
}

Material React Tableは親切なライブラリなのでデフォルトで機能もりもりです。
ですが、あえてシンプルにしたいという場合や、デフォルト機能を一部だけ残したい場合があると思います。その際は下記の設定値を参照してみてください。

よく使う設定値

  • enableTopToolbar
    • トップのツールバースペースの有無を設定します。デフォルトの設定を一括で消すときに便利。
  • enableGlobalFilter
    • テーブル内での検索機能の有無を設定します。
  • enableColumnFilters
    • カラムの検索機能の有無を設定します。
  • enableHiding
    • カラムの表示/非表示機能の有無を設定します。
  • enableDensityToggle
    • テーブルの高さ調整機能の有無を設定します。
  • enableFullScreenToggle
    • テーブルの拡大機能の有無を設定します。
  • enableBottomToolbar
    • ボトムのツールバースペースの有無を設定します。デフォルトの設定を一括で消すときに便利。
  • enablePagination
    • ページネーションの有無を設定します。
  • enableColumnResizing
    • カラムリサイズ機能の有無を設定します。
  • enableColumnOrdering
    • カラムの順番を変える機能の有無を設定します。

ローカライズ

最後にMaterial React Tableを日本語にローカライズしてみます。

やり方は簡単。
ローカライズ用の設定moduleをimportして、table定義の中でlocalizationを設定するだけです。

ホバーした際のガイドが日本語になっていれば正しく設定できています。

import { MRT_Localization_JA } from 'material-react-table/locales/ja';

  const table = useMaterialReactTable({
    columns,
    data, 
    // ローカライズ設定
    localization:MRT_Localization_JA,
  });

さいごに

いかがでしたでしょうか。

今回はMaterial React Tableの導入とローカライズについてまとめました。
比較的新しいライブラリなので、一部ドキュメントが整備されていないところもありましたが、プロパティの予測に細かな説明が入っていたりと、とても使いやすいライブラリです。

まだまだできることがたくさんあるので、また別記事でご紹介できればと思います。

それでは！

RELATED ARTICLE

RANKING

BACK NUMBER
CATEGORY