MUI: How to update the DataGrid state programmatically?

Question

I am using the MUI DataGrid for displaying and filtering certain tabular data.

The DataGrid Toolbar contains buttons for filtering, sorting etc. I want to add a custom button that displays an option for certain predefined configurations. For example, assume that a DataGrid has 8 columns from ColA to ColH. If someone selects a presetA from the menu, the DataGrid only displays columns from A to C. Similarly, if someone selects a presetB from the menu, the DataGrid displays columns B and F. These columns are also reflected on clicking the Columns button Panel. How can I implement this functionality?

I was able to add a custom button in the toolbar. But, unable to find a way to programmatically update the column visibility based on the preset selected.

I tried to access the DataGrid state using the following example from the documentation:

function CustomRowCounter() {
  const { rows } = useGridSlotComponentProps();

  return <div>Row count: {rows.length} </div>;
}

However, it throws an error:

Error: Material-UI X: Could not find the data grid context. It looks like you rendered your component outside of a DataGrid or DataGridPro parent component. This can also happen if you are bundling multiple versions of the data grid.

I am using DataGridPro as follows:

import { DataGridPro, 
GridToolbar, 
GridToolbarColumnsButton, 
GridToolbarContainer, 
GridToolbarDensitySelector, 
GridToolbarExport, 
GridToolbarFilterButton, 
useGridApiRef,
useGridSlotComponentProps } from '@mui/x-data-grid-pro';

Following are the dependencies:

"@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2",
"@mui/x-data-grid-pro": "^4.0.1",

Answer 1

Implemented a demo using the Grid API.

https://codesandbox.io/s/kind-jepsen-ekgv2?file=/src/App.tsx

This is also taken up as a feature to be implemented to control the column visibility. If you want to read more about this, refer https://github.com/mui-org/material-ui-x/issues/1412

Answer 2

You can use GridApi.setColumnVisibility() to modify the column visibility state:

const setVisible = (columns) => () => {
  apiRef.current
    .getAllColumns()
    .map((c) => c.field)
    .forEach((c) => {
      const isVisible = columns.includes(c);
      apiRef.current.setColumnVisibility(c, isVisible);
    });

  handleClose();
};

<Button variant="contained" onClick={handleClick} sx={{ mb: 1 }}>
  Preset
</Button>
<Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
  <MenuItem onClick={setVisible(["default"])}>Col1</MenuItem>
  <MenuItem onClick={setVisible(["name", "stars"])}>
    Col2 & 3
  </MenuItem>
</Menu>

---

About the error, you put your CustomRowCounter outside of DataGridPro. Because you're using useGridSlotComponentProps inside which needs access to the grid context data. This data is provided by GridContextProvider - the root component of DataGrid/DataGridPro. To fix it you need to change from something like:

<DataGridPro {...} />
<CustomRowCounter />

To:

<DataGridPro
  components={{
    Footer: () => <CustomRowCounter />
  }}
/>

See the slots section to know more about which components can be overridden inside DataGridPro.