MUI Data Gridで管理画面のデータテーブルを作る

はじめに

こんにちは。giftee Loyalty Platform（GLP）の開発を行っている安達です。GLPの管理画面を新規開発するにあたって、データテーブル機能にReact向けデザインシステムライブラリMUI（2021年にMaterial UIから名称変更しています）のData Gridという機能を利用して作成したところ、非常に使い勝手が良かったため、記事にしたいと思いました。MUIはドキュメントが懇切丁寧に書かれているライブラリのため、実践的な内容に絞って書きたいと思います。

MUI Data Gridのメリット

データテーブルに必要な機能が無料で使える

MUIのうち、Data Gridを含む応用的なコンポーネントはMUI Xという括りで実装されていて、MUI Xの中でも特に応用的な機能が月額の有料プランで提供されているのですが、無料プランでもフィルター、ソート、CSVエクスポート、フロント側でのページネーション、日本語化対応などの重要な機能がすべて使える親切なプラン設計になっています。

洗練されたUI・UXが簡単に実現できる

GLPの管理画面は上のスクショのような仕上がりになっています。ほとんどすべてのUIパーツについてMUIのコンポーネントを利用していて、お手軽にモダンで統一感のあるUI・UXを実現できました。

大規模データもパフォーマンス良く扱える

Data Gridを使って開発していて、1万件以上の大規模データについても、フロントエンドのレンダリングのパフォーマンスにはまったく支障ありませんでした。そのため、パフォーマンス面について、フロントエンドの最適化に悩まされることなく、サーバーサイドの課題に注力できました。

サーバーサイドとの連携について

私が使ってみた感触では、大規模なJSONレスポンスをサーバーサイドからドサッと返してしまうのが、Data Gridの使い方として一番簡単な印象でした（とは言え、表示期間を設けて一定の件数に絞り込んだり、JSONシリアライズやSQLのパフォーマンスを良くするなど、サーバーサイドのパフォーマンスについて考慮すべき点は一定ありました）。サーバーサイドでのページネーションやフィルタリングについても、Data Grid側のオプションが用意されているので、サーバーサイドの実装を用意すれば対応可能です。

実装例

説明のため基本機能のみの実装ですが、以下が状態管理ライブラリにRecoilを用いた商品一覧テーブルの実装例です。

import React from 'react';
import { useRecoilValue } from 'recoil';
import { DataGrid } from '@mui/x-data-grid';
import productsState from '../states/productsState';

const columns = [
  { field: 'id', headerName: 'ID', type: 'number', flex: 1 },
  {
    field: 'name',
    headerName: '商品名',
    type: 'string',
    flex: 2,
  },
  {
    field: 'price',
    headerName: '価格',
    type: 'number',
    flex: 1,
  },
  {
    field: 'created_at',
    headerName: '作成日時',
    type: 'dateTime',
    flex: 1.5,
  },
];

export default function Products() {
  const products = useRecoilValue(productsState);

  return <DataGrid rows={products} columns={columns} />;
}

import { selector } from 'recoil';
import { productApi } from '../apis/productApi';

const productsState = selector({
  key: 'productsState',
  get: async () => {
    const responseProducts = await productApi.getProducts();
    const products = responseProducts.map((product) => ({
      ...product,
      created_at: new Date(product.created_at),
    }));
    return products;
  },
});

export default productsState;