[data grid] Customizing showPreferences()

[nalbion]

The problem in depth 🔍

When the user is selecting visible columns of a Data Grid, I want to provide a custom UI which groups the columns by group:

import React from "react";
import { Dialog, FormControlLabel, FormGroup, Switch } from "@mui/material";
import {
  GridColumnGroupingModel,
  GridColumnVisibilityModel,
  GridColumns,
  GridLeafColumn,
} from "@mui/x-data-grid-pro";

type Props = {
  columns: GridColumns;
  columnGroupingModel: GridColumnGroupingModel;
  columnVisibilityModel: GridColumnVisibilityModel;
  onColumnVisibilityChange: (field: string, checked: boolean) => void;
  onClose: () => void;
};

export const GroupedColumnPreferencesPanel = ({
  columns,
  columnGroupingModel,
  columnVisibilityModel,
  onColumnVisibilityChange,
  onClose,
}: Props) => {
  return (
    <Dialog open onClose={onClose} maxWidth="md" fullWidth>
      {columnGroupingModel.map((group) => (
        <FormGroup
          key={group.groupId}
          sx={{
            padding: "8px 0px 8px 8px",
          }}
        >
          <h4>{group.groupId}</h4>
          {group.children.map((child) => {
            const col = columns.find(
              (c) => c.field === (child as GridLeafColumn).field
            );

            return (
              col && (
                <FormControlLabel
                  sx={{ padding: "1px 8px 1px 7px" }}
                  key={col.field}
                  control={
                    <Switch
                      size="small"
                      checked={columnVisibilityModel[col.field] !== false}
                      onChange={(e, checked) =>
                        onColumnVisibilityChange(col.field, checked)
                      }
                    />
                  }
                  label={col.headerName}
                />
              )
            );
          })}
        </FormGroup>
      ))}
    </Dialog>
  );
};

I've tried:

#1 - useGridApiMethod:

This does not seem to modify the default "columns" preferences panel

  useGridApiMethod(
    gridApiRef,
    {
      showPreferences: () => {
        setShowAdjustColumns(true);
      },
      hidePreferences: () => {
        setShowAdjustColumns(false);
      },
    },
    "public"
  );

#2 - Over-riding `gridApiRef.current.showPreferences()

This works once, but from then on you need to click in the table before it will work again.

  useEffect(() => {
    // if (columnGroupingModel) {
    const apiRef = gridApiRef.current;
    const originalShowPreferences = apiRef.showPreferences;

    console.info("define setShowAdjustColumns...");
    gridApiRef.current.showPreferences = () => {
      console.info("over-ride: setShowAdjustColumns(true)");
      setShowAdjustColumns(true);
    };

    return () => {
      console.info("restore setShowAdjustColumns");
      apiRef.showPreferences = originalShowPreferences;
    };

    return undefined;
  }, [gridApiRef]);

#3 - subcribing to GridEvents.preferencePanelOpen()

This seems like it should be the way to do it, but I can't figure out how to disable the default panel.

useEffect(() => {
  // if (
  //   // renderCount > 0 &&
  //   columnGroupingModel
  // ) {
  return gridApiRef.current.subscribeEvent(
    GridEvents.preferencePanelOpen,
    () => {
      console.info("preferencePanelOpen");
      setShowAdjustColumns(true);
      setTimeout(() => {
        gridApiRef.current.hidePreferences();
      }, 100);
    }
  );

  // return undefined;
}, [
  // renderCount,
  // columnGroupingModel,
  gridApiRef,
]);

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
  Binaries:
    Node: 16.20.2 - /usr/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 8.19.4 - /usr/bin/npm
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: ^11.9.0 => 11.11.1 
    @emotion/styled: ^11.8.1 => 11.11.0 
    @mui/icons-material: ^5.8.2 => 5.8.2 
    @mui/lab: ^5.0.0-alpha.84 => 5.0.0-alpha.84 
    @mui/material: ^5.8.2 => 5.8.2 
    @mui/system: ^5.8.2 => 5.8.2 
    @mui/x-data-grid-pro: 5.12.0 => 5.17.0 
    @mui/x-date-pickers: ^5.0.0-alpha.6 => 5.0.20 
    @mui/x-date-pickers-pro: ^5.0.0-alpha.6 => 5.0.20 
    @mui/x-license-pro: ^5.12.1 => 5.17.12 
    @types/react: ^18.0.26 => 18.0.35 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    styled-components: ^5.3.0 => 5.3.11 
    typescript: 4.9.5 => 4.9.5 

Search keywords: showPreferences
Order ID: c4bda37f65847b544e83c0a4d06babf1T1JERVI6MzkwMTMsRVhQSVJZPTE2Nzc5NzU2OTAwMDAsS0VZVkVSU0lPTj0x

[michelengelen]

Hi @nalbion ... thanks for raising this.

Please provide a minimal reproduction test case with the latest version. This would help a lot 👷. As right now I cannot see where and how you want to implement that Dialog.

A live example would be perfect. This codesandbox.io template may be a good starting point. You can find more codesandbox templates in our docs.

Thank you! 🙇🏼

[nalbion]

I don't think a reproduction test case is necessary, perhaps my intention was not clear.

When you click the "COLUMNS" menu item the following dialog appears. I want to be able to replace this dialog with my own custom dialog which supports grouped columns.

[michelengelen]

Ok @nalbion ... now i understand. 🙇🏼

Here is a little demo of how you can customize the columnsPanel: custom ColumnsPanel

Let me know if you need more help on this topic!

[nalbion]

Thanks @michelengelen