MUI: useGridRootProps should only be used inside the DataGrid, DataGridPro or DataGridPremium component.

[n0one42]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/exciting-morning-phf79t Steps:

1. Click on any group to expand
2. Try to change the Value inside any Filled Quantity or Status

I mean, this is just the demo version from the documentation which also does not work. I have the same issue inside my project.

Current behavior 😯

Error: MUI: useGridRootProps should only be used inside the DataGrid, DataGridPro or DataGridPremium component.

I tested multiple "demos" and It seams more to be a problem with the Premium version.

Expected behavior 🤔

Using the DemoData Generator to test. I would like to see this first working before investing time in learning this.

Context 🔦

No response

Your environment 🌎

No response

[cherniavskii]

Thanks, @n0one42! Can you reproduce the issue in your project?

I believe the reason this happens is that we didn't release the @mui/x-data-grid-generator package in v6.10.1, and since @mui/x-data-grid-premium is a dependency of @mui/x-data-grid-generator, we end up using two different versions of the package. We saw a similar issue in https://github.com/mui/material-ui/pull/38104#discussion_r1275143405

[n0one42]

Hi there and thank you for the fast response. Yes, it happens immediately also in my project. Here the code:

import * as React from 'react';
import Box from '@mui/material/Box';
import {
  DataGridPremium,
  GridToolbar,
  useGridApiRef,
  useKeepGroupedColumnsHidden,
} from '@mui/x-data-grid-premium';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function ExamplePage() {
  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    editable: true,
    visibleFields: [
      'commodity',
      'quantity',
      'filledQuantity',
      'status',
      'isFilled',
      'unitPrice',
      'unitPriceCurrency',
      'subTotal',
      'feeRate',
      'feeAmount',
      'incoTerm',
    ],
  });
  const apiRef = useGridApiRef();

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      ...data.initialState,
      rowGrouping: {
        ...data.initialState?.rowGrouping,
        model: ['commodity'],
      },
      sorting: {
        sortModel: [{ field: '__row_group_by_columns_group__', sort: 'asc' }],
      },
      aggregation: {
        model: {
          quantity: 'sum',
        },
      },
    },
  });

  return (
    <Box sx={{ height: 520, width: '100%' }}>
      <DataGridPremium
        {...data}
        apiRef={apiRef}
        loading={loading}
        disableRowSelectionOnClick
        initialState={initialState}
        slots={{ toolbar: GridToolbar }}
      />
    </Box>
  );
}

Packages:

        "@mui/base": "5.0.0-beta.5",
        "@mui/icons-material": "5.11.16",
        "@mui/lab": "5.0.0-alpha.134",
        "@mui/material": "^5.14.2",
        "@mui/material-next": "6.0.0-alpha.90",
        "@mui/styles": "5.13.2",
        "@mui/system": "5.13.6",
        "@mui/utils": "5.13.6",
        "@mui/x-data-grid": "6.9.1",
        "@mui/x-data-grid-generator": "^6.10.0",
        "@mui/x-data-grid-premium": "^6.10.1",
        "@mui/x-date-pickers": "6.9.1"

[n0one42]

@cherniavskii Okey, I did not pay attention and forgot that I already use the x-data-grid. After removing this, it started to work inside my project. Thanks for your support. Still, in my opinion the demos on the documentation page should work inside sandbox and such.

[cherniavskii]

It's fixed with the latest release: https://codesandbox.io/s/cool-dew-3vjrys?file=/demo.js