[docs] Add section about disabling columns panel (#10328)

docs/data/data-grid/column-visibility/ColumnSelectorDisabledGrid.js

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import InputLabel from '@mui/material/InputLabel';
+import { DataGrid, GridToolbar } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+const UserType = {
+  Admin: 0,
+  Regular: 1,
+};
+
+export default function ColumnSelectorDisabledGrid() {
+  const [userType, setUserType] = React.useState(UserType.Admin);
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+    maxColumns: 7,
+  });
+
+  const columnVisibilityModel = React.useMemo(() => {
+    if (userType === UserType.Admin) {
+      return {
+        quantity: true,
+        filledQuantity: true,
+        id: true,
+      };
+    }
+    return {
+      quantity: false,
+      filledQuantity: false,
+      id: false,
+    };
+  }, [userType]);
+
+  return (
+    <Stack height="450px" width="100%">
+      <FormControl sx={{ width: '200px', pb: 1 }}>
+        <InputLabel id="demo-simple-select-label">User Type</InputLabel>
+        <Select
+          labelId="demo-user-type-label"
+          id="demo-user-type"
+          value={userType}
+          label="User Type"
+          onChange={(event) => {
+            setUserType(event.target.value);
+          }}
+        >
+          <MenuItem value={UserType.Admin}>Admin</MenuItem>
+          <MenuItem value={UserType.Regular}>Regular User</MenuItem>
+        </Select>
+      </FormControl>
+      <div style={{ height: 400, width: '100%' }}>
+        <DataGrid
+          {...data}
+          disableColumnSelector
+          columnVisibilityModel={columnVisibilityModel}
+          slots={{
+            toolbar: GridToolbar,
+          }}
+        />
+      </div>
+    </Stack>
+  );
+}

docs/data/data-grid/column-visibility/ColumnSelectorDisabledGrid.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import FormControl from '@mui/material/FormControl';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import InputLabel from '@mui/material/InputLabel';
+import { DataGrid, GridToolbar } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+const UserType = {
+  Admin: 0,
+  Regular: 1,
+};
+
+export default function ColumnSelectorDisabledGrid() {
+  const [userType, setUserType] = React.useState(UserType.Admin);
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+    maxColumns: 7,
+  });
+
+  const columnVisibilityModel = React.useMemo(() => {
+    if (userType === UserType.Admin) {
+      return {
+        quantity: true,
+        filledQuantity: true,
+        id: true,
+      };
+    }
+    return {
+      quantity: false,
+      filledQuantity: false,
+      id: false,
+    };
+  }, [userType]);
+
+  return (
+    <Stack height="450px" width="100%">
+      <FormControl sx={{ width: '200px', pb: 1 }}>
+        <InputLabel id="demo-simple-select-label">User Type</InputLabel>
+        <Select
+          labelId="demo-user-type-label"
+          id="demo-user-type"
+          value={userType}
+          label="User Type"
+          onChange={(event: SelectChangeEvent<number>) => {
+            setUserType(event.target.value as number);
+          }}
+        >
+          <MenuItem value={UserType.Admin}>Admin</MenuItem>
+          <MenuItem value={UserType.Regular}>Regular User</MenuItem>
+        </Select>
+      </FormControl>
+      <div style={{ height: 400, width: '100%' }}>
+        <DataGrid
+          {...data}
+          disableColumnSelector
+          columnVisibilityModel={columnVisibilityModel}
+          slots={{
+            toolbar: GridToolbar,
+          }}
+        />
+      </div>
+    </Stack>
+  );
+}

docs/data/data-grid/column-visibility/column-visibility.md

@@ -66,6 +66,19 @@ The user can then choose which columns are visible using the _Columns_ button.
 
 {{"demo": "ColumnSelectorGrid.js", "bg": "inline"}}
 
+### Disable the column visibility panel
+
+Sometimes, the intention is to disable the columns panel or control the visible columns programmatically based on the application state.
+To disable the column visibility panel, set the prop `disableColumnSelector={true}` and use the [`columnVisibilityModel`](#controlled-visible-columns) prop to control the visible columns.
+
+```tsx
+<DataGrid disableColumnSelector columnVisibilityModel={columnVisibilityModel} />
+```
+
+In the following demo, the columns panel is disabled, and access to columns `id`, `quantity`, and `filledQuantity` is only allowed for the `Admin` type user.
+
+{{"demo": "ColumnSelectorDisabledGrid.js", "bg": "inline"}}
+
 ### Customize the list of columns in panel
 
 To show or hide specific columns in the column visibility panel, use the `slotProps.columnsPanel.getTogglableColumns` prop. It should return an array of column field names.
@@ -110,10 +123,6 @@ To disable `Hide all` or `Show all` buttons in the column visibility panel, pass
 />
 ```
 
-:::info
-To hide the column visibility panel from the toolbar, set the prop `disableColumnSelector={true}`.
-:::
-
 ## API
 
 - [DataGrid](/x/api/data-grid/data-grid/)

packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsInterfaces.ts

@@ -1,4 +1,3 @@
-import type { GridRowId } from '../../../models';
 import { GridColDef, GridStateColDef } from '../../../models/colDef/gridColDef';
 import type { GridColumnDimensionProperties } from './gridColumnsUtils';
 
@@ -30,4 +29,4 @@ export type GridColumnsRawState = Omit<GridColumnsState, 'lookup'> & {
 
 export type GridHydrateColumnsValue = GridColumnsRawState;
 
-export type GridColumnVisibilityModel = Record<GridRowId, boolean>;
+export type GridColumnVisibilityModel = Record<GridColDef['field'], boolean>;