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

はじめに
1. 環境
特定の列を非表示にする方法
1. サンプル
参考

はじめに

環境

mui/x-data-grid: 6.19.4

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

DataGrid要素内のプロパティ「columnVisibilityModel」で、非表示にしたい列を指定することで
初期非表示にすることができます。

列管理のオンオフを検知するため、onColumnVisibilityModelChangeを使用して表示する列を管理します。

非表示になっているだけなので、標準機能でついている列管理から、その列を表示にさせることができます。

サンプル

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

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とすることで、初期時に非表示にすることができます。