MUIのDataGridで初期表示時に特定の列を非表示にする(React)

はじめに

環境

• mui/x-data-grid: 6.19.4

特定の列を非表示にする方法

DataGrid要素内のプロパティ columnVisibilityModel で、非表示にしたい列を指定することで初期非表示にすることができます。
列管理のオンオフを検知するため、onColumnVisibilityModelChange を使用して表示する列を管理します。
非表示になっているだけなので、標準機能でついている列管理から、その列を表示にさせることができます。

サンプル

import { DataGrid, GridColDef, GridValueGetterParams, GridColumnVisibilityModel, jaJP } from '@mui/x-data-grid';
import { useState } from 'react';

const columns: GridColDef[] = [
  { field: 'id', headerName: 'ID' },
  { field: 'firstName', headerName: 'First name' },
  { field: 'lastName', headerName: 'Last name' }
];

const rows = [
  { id: 1, lastName: '太郎', firstName: '山田' }
];

const UserTable = () => {
  const [columnVisibilityModel, setColumnVisibilityModel] =
    useState<GridColumnVisibilityModel>({
      lastName: false,
      firstName: false
    });

  return (
    <>
      <DataGrid
        rows={rows}
        columns={columns}
        columnVisibilityModel={columnVisibilityModel}
        onColumnVisibilityModelChange={(newModel) =>
          setColumnVisibilityModel(newModel)
        }
      />
    </>
  );
};

上記のように、columnVisibilityModel で対象の列名を false とすることで、初期時に非表示にすることができます。

参考

Data Grid - Column visibility