MUIのDataGridを使ってみた

こんにちは、AG-Boost事業本部の大塚です。

今回は、MUI（Material-UI）のDataGridについて紹介します。

チームのフロント開発では、以前までCore UIやSemantic UIを使っていましたが、最近はMUIを使う方向にシフトしています。 MUIの理解を深めるために、DataGridを触ってみた所、簡単に見栄えのいいデータテーブルを作成できたので、紹介したいと思います。

MUIとは

MUI（Material-UI）は、React向けのコンポーネントライブラリで、GoogleのMaterial Designガイドラインに基づいてデザインされています。 MUIを使用することで、レスポンシブで見栄えの良いUIを簡単に作成できます。
カスタマイズも容易であり、UIコンポーネントを再利用しやすくするためのツールキットとして広く使用されています。

DataGridとは

今回紹介するDataGridは、MUIのデータテーブルコンポーネントです。
表形式のデータを表示することが可能で、編集・ソート・フィルタリングなど様々な機能を備えています。
無料版のDataGridよりさらに多くの機能を備えた、有料版のDataGridProやDataGridPremiumもあります。

Install

DataGridと、その依存関係にある@mui/materialã‚’installします。

yarn add @mui/material @emotion/react @emotion/styled @mui/x-data-grid

使い方

基本的なDataGridの使い方は以下のようになります。
とりあえず最低限のcolumnsと表示データをpropsで渡してあげます。

const Users = (props) => {
 const columns: GridColDef[] = [
  { field: 'id', headerName: 'ID' },
  { field: 'name', headerName: 'ユーザー名' },
  { field: 'domain', headerName: 'ドメイン' },
  { field: 'plan', headerName: 'プラン' },
 ];

 const rows = [
  { id: 1, name: 'A', domain: 'domainA.com', plan: { id: 1, name: 'bronze' } },
  { id: 2, name: 'B', domain: 'domainB.com', plan: { id: 2, name: 'silver' } },
  { id: 3, name: 'C', domain: 'domainC.com', plan: { id: 3, name: 'gold' } },
 ];

 return (
   <DataGrid
     rows={rows}
     columns={columns}
   />
 );
};

↓のようなテーブルを作成することがきます。
planはobject形式の値なので、この時点では上手く表示できません。

次に、ヘッダーメニューや削除ボタンを追加してみます。
また、valueGetterを使ってplanが正しく表示されるようにします。
cellの横幅もwidthã‚„flexで調整可能です。

const Users = (props) => {
 const columns: GridColDef[] = [
  { field: 'id', headerName: 'ID', flex: 1 },
  { field: 'name', headerName: 'ユーザー名', flex: 2 },
  { field: 'domain', headerName: 'ドメイン', flex: 2 },
  {
    field: 'plan',
    headerName: 'プラン',
    flex: 2,
    valueGetter: (params) => {
      return params.row.plan.name;
    },
  },
  {
    field: 'delete',
    headerName: '削除',
    flex: 1,
    renderCell: () => (
      <Button
        variant="contained"
        onClick={(e) => {
          console.log('削除click');
          e.stopPropagation();
          e.preventDefault();
        }}
      >
         削除
      </Button>
    ),
   },
 ];

 const rows = [
   { id: 1, name: 'A', domain: 'domainA.com', plan: { id: 1, name: 'bronze' } },
   { id: 2, name: 'B', domain: 'domainB.com', plan: { id: 2, name: 'silver' } },
   { id: 3, name: 'C', domain: 'domainC.com', plan: { id: 3, name: 'gold' } },
 ];

 return (
   <DataGrid
     rows={rows}
     columns={columns}
     slots={{ toolbar: GridToolbar }}
     onCellClick={(event) => {
       console.log(`id: ${event.row.id}ã‚’Click`);
     }}
   />
 );
};

↓右端に削除ボタンを追加し、カラムの表示制御・ダウンロード・フィルターなど、一覧テーブルに欲しい機能を簡単に実装することができました。

columsの作りを整え、<DataGrid />にoptionを追加しただけですが、この時点で十分なクオリティーのテーブルが作れてしまいました..

<DataGrid>には他にも様々なpropsがあるので、詳細は公式ドキュメントをご覧ください。 columnにも設定可能な項目が沢山あります。
DataGrid API - MUI X
GridColDef API - MUI X

最後に少しデザインを調整します。 classを上手く設定したり、sxプロパティを使うことでデザインのカスタマイズができます。

<DataGrid
  rows={rows}
  slots={{ toolbar: GridToolbar }}
  columns={columns}
  onCellClick={(event) => {
    console.log('rowClick');
  }}
  sx={{
    // 背景色を交互に変える
    '& .MuiDataGrid-row:nth-of-type(odd)': {
      backgroundColor: '#f4f4f4',
    },
    // hover時の背景色を変える
    '& .MuiDataGrid-row:hover': {
      backgroundColor: '#d3d3d3',
    },
    // toolBarの下にborder追加
    '& .MuiDataGrid-toolbarContainer': {
      borderBottom: '1px solid #ccc',
    },
    // 削除ボタンのopacityを変更
    '& .MuiDataGrid-cell--delete': {
      opacity: '0.8',
    },
  }}
  
  // 動的にclassを付与する
  getCellClassName={(params) => {
    const { field } = params.colDef;
    return field === 'delete' ? 'MuiDataGrid-cell--delete' : '';
  }}
/>

見た目はこの様になりました。

まとめ

MUIのDataGridを使うことで、手軽かつ高機能なデータテーブルを実装できることができました。
カスタマイズも簡単なので、要件に合わせた柔軟な作りもできます。
今後テーブルを作る際は、DataGridを使えばコスパよく実装できるなと感じました。
DataGrid以外にも便利なMUIのコンポーネントは沢山あるので、是非試してみてください。

おわり