はじめに

さわだです。
お仕事で MUI の Data Grid をさわる事になったんですが、多機能すぎて理解に時間を要したので、備忘録として残します。

Data Grid ってなに

https://mui.com/x/react-data-grid/

テーブルのコンポーネントです。
ページネーションや表示件数の変更や、カラムの値によるソート、その他もろもろ、いっぱいできます。

無料版(Community)と有料版(Pro, Premium)がありますが、今回は無料版でできることを取り上げていきます。

というかこんな記事読んでないでクイックスタート読んだほうが正確です。
https://mui.com/x/react-data-grid/getting-started/#installation

基本的な使い方

1. 表示するデータを定義する

何を当たり前なことを言っているんだ？ と言われそう…ｗ

表示する値を定義します。
というのも、この後出てくる rows に値を渡す際には、渡す値の中に id というメンバが含まれている必要があります。
なお、識別子のメンバ名は変更可能ですし、表示する必要もありません。
ただ、含まれてないとダメです。

参考: https://mui.com/x/react-data-grid/row-definition/#row-identifier

ユニークであればなんでもいいので、 string で UUID 使うなり number で increment するなり、好きにしてください。

type User = {
  id: number,
  name: string,
  age: number
}

const users: User[] = [
  {
    id: 1,
    name: "さわだ"
    age: 18
  },
  {
    id: 2,
    name: "さわぞう"
    age: 22
  }
]

2. カラムを定義する

テーブルのヘッダー部分と、カラムの設定を定義します。

型は GridColDef[] で、項目の数だけ定義を追加していきます。
https://mui.com/x/api/data-grid/grid-col-def/

const nameFormatter = (param: GridValueFormatterParams<string>) =>
  `${param.value} さん`;

const columns: GridColDef[] = [
  { field: 'id', headerName: '識別子', width: 150, editable: true },
  {
    field: 'name',
    headerName: '名前',
    width: 150,
    editable: true,
    valueFormatter: nameFormatter,
  },
  {
    field: 'age',
    headerName: '年齢',
    type: 'number',
    width: 100,
    editable: true,
  },
];

最低限 field と headerName が設定されていれば表示することができます。
width は指定せずとも表示することができますが、これを設定しないとものすごく狭く表示されるので、設定したほうが無難でしょう。
上記に示したもの以外にも様々なプロパティがありますが、私が使った項目のみピックアップとさせてください…

• field: 表示する要素の名前。この後出てくる rows に渡す値のうち、表示したいメンバのメンバ名を指定する。
• headerName: テーブルのヘッダーに表示するカラム名。
• width: カラムの幅。おそらく単位はピクセル。
• type: このカラムで表示、編集する値の型。 "number" とか "string" が指定できる。
• editable: セルや行をクリックされたとき、この行は編集可能にするか。
• valueFormatter: 当カラムのセルの値を表示する際に、どのようにフォーマットするか。
  引数のジェネリクスで指定した値はあくまで param.value の型であって、 2つ上での type と同一である必要はなかったりする。

とりあえず動かしてみる

まとめて動かせるようにしたものがこんな感じ。

'use client';

import {
  DataGrid,
  GridColDef,
  GridValueFormatterParams,
} from '@mui/x-data-grid';

type User = {
  id: number;
  name: string;
  age: number;
};

export default function ComponentTest() {
  const users: User[] = [
    {
      id: 1,
      name: 'さわだ',
      age: 18,
    },
    {
      id: 2,
      name: 'さわぞう',
      age: 22,
    },
  ];

  const nameFormatter = (param: GridValueFormatterParams<string>) =>
    `${param.value} さん`;

  const columns: GridColDef[] = [
    { field: 'id', headerName: '識別子', width: 150, editable: true },
    {
      field: 'name',
      headerName: '名前',
      width: 150,
      editable: true,
      valueFormatter: nameFormatter,
    },
    {
      field: 'age',
      headerName: '年齢',
      type: 'number',
      width: 100,
      editable: true,
    },
  ];

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

そして実行結果が以下の通り。

いい感じ！
次の記事ではテーブルの値を編集する方法を中心に書きたいと思います！