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

この記事は約2分で読めます。

スポンサーリンク

はじめに

環境

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

参考

Data Grid – Column visibility

コメント

スポンサーリンク
スポンサーリンク
タイトルとURLをコピーしました