How to Hide Specific Columns Initially in MUI DataGrid (React)

Introduction

Environment

• mui/x-data-grid: 6.19.4

How to Hide Specific Columns Initially

You can hide specific columns initially by setting them to false in the columnVisibilityModel property within the DataGrid component.
To manage changes in column visibility (like toggling visibility from the UI), use onColumnVisibilityModelChange.
The column is only hidden — it can still be toggled back on via the default column visibility control provided by MUI.

Sample

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: 'Taro', firstName: 'Yamada' }
];

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

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

As shown above, by setting the column names to false in columnVisibilityModel, you can hide them by default.

Reference

Data Grid - Column visibility