MUI XのDataGridで無料のプランでも列幅を動かせるようになっていたので試してみた

#MUI
#React
おーしろ
2024.11.12
MUIX の DataGridで列幅をドラッグアンドドロップで調整できる機能が無料のプランでも利用できるようになっていたので実際に試してみました。
 MUI X v7から利用できるようになったMUI X v6までは有料のProプランから利用できる機能でしたがMUI X v7にアップグレードすると無料で利用できるCommunityプランでもこの機能が利用できるようになっていたようです。
こちらのMUI X v7の紹介ブログにもそのことが記載されていました。
https://mui.com/blog/mui-x-v7/#column-resizing-on-the-community-plan
 実際に動作確認してみます DataGridを最新バージョンにアップグレード@mui/x-data-gridを最新バージョンにします。
yarn upgrade @mui/x-data-grid@latest
v6からv7にアップグレードすると非推奨になるプロパティや変更が結構あるので必要に応じてそちらの対応も必要になります。
https://mui.com/x/migration/migration-data-grid-v6/
 実装列幅を動かせる機能はデフォルトで有効になっています。
サンプルコード
import styles from "../page.module.css";
import { DataGrid, GridColDef } from "@mui/x-data-grid";

const columns: GridColDef[] = [
  { field: "id", headerName: "ID" },
  { field: "username", headerName: "User Name" },
  { field: "description", headerName: "Description" },
  { field: "age", headerName: "Age" },
];

const rows = [
  {
    id: 1,
    username: "user001",
    description: "Sample text",
    age: 21,
  },
  {
    id: 2,
    username: "user002",
    description:
      "Sample text, Sample text, Sample text, Sample text, Sample text",
    age: 22,
  },
  {
    id: 3,
    username: "user003",
    description: "Sample text",
    age: 23,
  },
  {
    id: 4,
    username: "user004",
    description: "Sample text",
    age: 24,
  },
];

export default function DataGridSample() {
  return (
    <main className={styles.main}>
      <div style={{ width: "100%" }}>
        <DataGrid columns={columns} rows={rows} />
      </div>
    </main>
  );
}

実際の動作

セパレーターをドラッグアンドドロップで動かすことができるので隠れている値も見えるようになりUXがかなり改善されます。

特にユーザーが入力した値が入るようなときは値の長さが予想しづらいのでこの機能はとてもありがたいです。
 気になった点デフォルトの列幅をflexで設定している場合は、列幅を動かしたときに他の列幅が自動で計算されて広がったり狭くなったりすることがあるので、widthやminWidhtやmaxWidhtなどを設定して他が勝手に動かないようにしないといけなかなと思いました。
flexのみを設定している場合
Description列は初期状態では値が見切れていなかったのに、User Name列を動かすとDescription列が自動的に調整され値が見切れてしまうことがあります。
const columns: GridColDef[] = [
  { field: "id", headerName: "ID", flex: 1 },
  { field: "username", headerName: "User Name", flex: 1 },
  { field: "description", headerName: "Description", flex: 2 },
  { field: "age", headerName: "Age", flex: 1 },
];
widthで設定している場合
他の列幅が自動調整されないので必要に応じて横スクロールが可能になります。
const columns: GridColDef[] = [
  { field: "id", headerName: "ID", width: 200 },
  { field: "username", headerName: "User Name", width: 200 },
  { field: "description", headerName: "Description", width: 200 },
  { field: "age", headerName: "Age", width: 200 },
];
minWidhtとmaxWidhtで調整できる最大の列幅も設定することができます。
調整できる範囲の最小と最大を設定できます。
const columns: GridColDef[] = [
  { field: "id", headerName: "ID", width: 200 },
  {
    field: "username",
    headerName: "User Name",
    width: 200,
    minWidth: 150,
    maxWidth: 250,
  },
  { field: "description", headerName: "Description", width: 200 },
  { field: "age", headerName: "Age", width: 200 },
];
 自動サイズ調整の機能も試してみるv7にアップグレードすることで列幅調整機能と同様に自動で列幅を調整する機能も無料のプランで利用できるようになっていました。
この機能は列のセパレーターをダブルクリックしたときの動作なども設定できるので今回はその機能を試してみます。
 実装autosizeOptionsで設定します。
includeHeadersをtrueにすると、ヘッダーのラベルに合わせて列幅が調整されます。
includeOutliersをtrueにすると、値の幅に合わせて列幅が調整されます。
<DataGrid
  columns={columns}
  rows={rows}
  autosizeOptions={{
    includeHeaders: true,
    includeOutliers: false,
  }}
/>
includeHeaders: trueの場合
セパレーターをダブルクリックするとヘッダーラベルの幅に自動的に調整されます。
includeOutliers: trueの場合
セパレーターをダブルクリックすると値の幅に自動的に調整されます。
 おわりに列幅を調整できる機能が無料のプランでも利用できるようなったのはとてもありがたいです。
もともとMUI XのDataGridは開発者目線でもユーザー目線でもとても優れたUIコンポーネントですがv7へのアップグレードではそれをより感じることができました。