javascriptreactjsmaterial-uidatagridmui-x-data-grid

MUI X: Could not find the data grid context

I'm using MUI X Data Grid Pro in my React app.

I tried to create a custom toolbar for the DataGridPro component using GridToolbarColumnsButton, GridToolbarFilterButton, GridToolbarDensitySelector, and GridToolbarExport components from the same package with the DataGridPro component.

I also could use a single GridToolbar component to replace all of the four components above.

I need to create the custom toolbar component in a separate component file.

I forked the code for custom toolbar example from MUI X here https://codesandbox.io/s/wduvx and edited the code (separate the custom toolbar into a different component file) here https://codesandbox.io/s/data-grid-pro-toolbar-example-j004m

Both of the codes work fine but when I created another example from scratch here https://codesandbox.io/s/data-grid-pro-toolbar-mine-up6ik, the code produced an error. It said that MUI X: Could not find the data grid context (as you can see in the codesandbox).

Here are the dependencies (in package.json file):

"@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.60",
"@material-ui/styles": "^4.11.4",
"@mui/x-data-grid": "^4.0.0",
"@mui/x-data-grid-pro": "^4.0.0",

What's the problem and what's the solution for this case?

Solution

  • You import from the wrong module, because you're using DataGridPro from @mui/x-data-grid-pro:

    import { DataGridPro } from "@mui/x-data-grid-pro";

    But you import the grid components in @mui/x-data-grid:

    import {
  GridToolbarColumnsButton,
  GridToolbarFilterButton,
  GridToolbarDensitySelector,
  GridToolbarExport
} from "@mui/x-data-grid";

    Which should have been:

    import {
  GridToolbarColumnsButton,
  GridToolbarFilterButton,
  GridToolbarDensitySelector,
  GridToolbarExport
} from "@mui/x-data-grid-pro";