@muiの「x-data-grid」で列を初期表示時に非表示にする

x-data-gridで初期表示時に特定の項目を非表示にする方法です。

バージョン6から設定が変更になりました。

検証バージョン

react: 18.2.0
@mui/x-data-grid: 6.16.0

x-data-grid: v5

x-data-gridのv5までは、カラム(columns)に「hide:true」オプションを付けると非表示にできました。

const columns = [
  { field: 'id', headerName: 'ID', width: 90, editable: false, hide: true },
  { field: 'name', headerName: '名前', width: 100, editable: true },
  { field: 'age', headerName: '年齢', type: 'number', width: 140, editable: true },
  { field: 'birthday', headerName: '誕生日', type: 'date', width: 180, editable: true, valueFormatter: dateFormat },
  { field: 'isAdmin', headerName: '管理者', type: 'boolean', width: 180, editable: true },
];

x-data-grid: v6

x-data-gridのv6からcolumnVisibilityModelを利用するように変更されました。

initialStateに入れることで初期表示時だけ非表示にできます。

<DataGrid
  initialState={{
    columns: {
      columnVisibilityModel: {
        id: false,
      },
    },
  }}
/>

initialStateで設定しないと常にfalseになって変更できなくなるので注意が必要です。