[DataGrid] Allow to control visibility of columns shown in ColumnsPanel

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

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import {
+  DataGridPremium,
+  GridToolbar,
+  useKeepGroupedColumnsHidden,
+  useGridApiRef,
+} from '@mui/x-data-grid-premium';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+const hiddenFields = ['__row_group_by_columns_group__', 'status'];
+
+const getTogglableColumns = (columns) => {
+  return columns
+    .filter((column) => !hiddenFields.includes(column.field))
+    .map((column) => column.field);
+};
+
+export default function ColumnSelectorGridCustomizeColumns() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+    maxColumns: 10,
+  });
+
+  const apiRef = useGridApiRef();
+
+  const initialState = useKeepGroupedColumnsHidden({
+    apiRef,
+    initialState: {
+      ...data.initialState,
+      rowGrouping: {
+        model: ['status'],
+      },
+    },
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPremium
+        apiRef={apiRef}
+        {...data}
+        initialState={initialState}
+        slots={{
+          toolbar: GridToolbar,
+        }}
+        slotProps={{
+          columnsPanel: {
+            getTogglableColumns,
+          },
+        }}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import {
+  DataGridPremium,
+  GridToolbar,
+  GridColDef,
+  useKeepGroupedColumnsHidden,
+  useGridApiRef,
+} from '@mui/x-data-grid-premium';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+const hiddenFields = ['__row_group_by_columns_group__', 'status'];
+
+const getTogglableColumns = (columns: GridColDef[]) => {
+  return columns
+    .filter((column) => !hiddenFields.includes(column.field))
+    .map((column) => column.field);
+};
+
+export default function ColumnSelectorGridCustomizeColumns() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+    maxColumns: 10,
+  });
+
+  const apiRef = useGridApiRef();
+
+  const initialState = useKeepGroupedColumnsHidden({
+    apiRef,
+    initialState: {
+      ...data.initialState,
+      rowGrouping: {
+        model: ['status'],
+      },
+    },
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPremium
+        apiRef={apiRef}
+        {...data}
+        initialState={initialState}
+        slots={{
+          toolbar: GridToolbar,
+        }}
+        slotProps={{
+          columnsPanel: {
+            getTogglableColumns,
+          },
+        }}
+      />
+    </div>
+  );
+}

docs/data/data-grid/column-visibility/ColumnSelectorGridCustomizeColumns.tsx.preview

@@ -0,0 +1,13 @@
+<DataGridPremium
+  apiRef={apiRef}
+  {...data}
+  initialState={initialState}
+  slots={{
+    toolbar: GridToolbar,
+  }}
+  slotProps={{
+    columnsPanel: {
+      getTogglableColumns,
+    },
+  }}
+/>

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

@@ -60,6 +60,32 @@ The user can then choose which columns are visible using the _Columns_ button.
 
 {{"demo": "ColumnSelectorGrid.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.
+
+```tsx
+const getTogglableColumns = (columns: GridColDef[]) => {
+  // hide the column with field `id` from list of togglable columns
+  return columns
+    .filter((column) => column.field !== 'id')
+    .map((column) => column.field);
+};
+
+<DataGrid
+  slots={{
+    toolbar: GridToolbar,
+  }}
+  slotProps={{
+    columnsPanel: {
+      getTogglableColumns,
+    },
+  }}
+/>;
+```
+
+{{"demo": "ColumnSelectorGridCustomizeColumns.js", "bg": "inline"}}
+
 ### Disable action buttons
 
 To disable `Hide all` or `Show all` buttons in the column visibility panel, pass `disableHideAllButton` or `disableShowAllButton` to `slotProps.columnsPanel`.

packages/grid/x-data-grid/src/components/panel/GridColumnsPanel.tsx

@@ -83,6 +83,14 @@ export interface GridColumnsPanelProps extends GridPanelWrapperProps {
    * @default false
    */
   disableShowAllButton?: boolean;
+  /**
+   * Returns the list of togglable columns.
+   * If used, only those columns will be displayed in the panel
+   * which are passed as the return value of the function.
+   * @param {GridColDef[]} columns The `ColDef` list of all columns.
+   * @returns {GridColDef['field'][]} The list of togglable columns' field names.
+   */
+  getTogglableColumns?: (columns: GridColDef[]) => GridColDef['field'][];
 }
 
 const collator = new Intl.Collator();
@@ -109,6 +117,7 @@ function GridColumnsPanel(props: GridColumnsPanelProps) {
     autoFocusSearchField = true,
     disableHideAllButton = false,
     disableShowAllButton = false,
+    getTogglableColumns,
     ...other
   } = props;
 
@@ -163,12 +172,23 @@ function GridColumnsPanel(props: GridColumnsPanelProps) {
   );
 
   const currentColumns = React.useMemo(() => {
+    const togglableColumns = getTogglableColumns ? getTogglableColumns(sortedColumns) : null;
+
     if (!searchValue) {
-      return sortedColumns;
+      return togglableColumns
+        ? sortedColumns.filter(({ field }) => togglableColumns.includes(field))
+        : sortedColumns;
     }
     const searchValueToCheck = searchValue.toLowerCase();
-    return sortedColumns.filter((column) => searchPredicate(column, searchValueToCheck));
-  }, [sortedColumns, searchValue, searchPredicate]);
+    return sortedColumns.filter((column) => {
+      if (togglableColumns) {
+        return (
+          togglableColumns.includes(column.field) && searchPredicate(column, searchValueToCheck)
+        );
+      }
+      return searchPredicate(column, searchValueToCheck);
+    });
+  }, [sortedColumns, searchValue, searchPredicate, getTogglableColumns]);
 
   const firstSwitchRef = React.useRef<HTMLInputElement>(null);
 
@@ -277,6 +297,14 @@ GridColumnsPanel.propTypes = {
   autoFocusSearchField: PropTypes.bool,
   disableHideAllButton: PropTypes.bool,
   disableShowAllButton: PropTypes.bool,
+  /**
+   * Returns the list of togglable columns.
+   * If used, only those columns will be displayed in the panel
+   * which are passed as the return value of the function.
+   * @param {GridColDef[]} columns The `ColDef` list of all columns.
+   * @returns {GridColDef['field'][]} The list of togglable columns' field names.
+   */
+  getTogglableColumns: PropTypes.func,
   searchPredicate: PropTypes.func,
   slotProps: PropTypes.object,
   sort: PropTypes.oneOf(['asc', 'desc']),

packages/grid/x-data-grid/src/tests/columnsVisibility.DataGrid.test.tsx

@@ -310,4 +310,25 @@ describe('<DataGridPro /> - Columns Visibility', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Select columns' }));
     expect(screen.queryByRole('button', { name: 'Show all' })).to.equal(null);
   });
+
+  it('should control columns shown in columns panel using `getTogglableColumns` prop', () => {
+    const getTogglableColumns = (cols: GridColDef[]) =>
+      cols.filter((column) => column.field !== 'idBis').map((column) => column.field);
+    render(
+      <TestDataGrid
+        slots={{
+          toolbar: GridToolbar,
+        }}
+        slotProps={{
+          columnsPanel: {
+            getTogglableColumns,
+          },
+        }}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Select columns' }));
+    expect(screen.queryByRole('checkbox', { name: 'id' })).not.to.equal(null);
+    expect(screen.queryByRole('checkbox', { name: 'idBis' })).to.equal(null);
+  });
 });