Closed n0one42 closed 1 year ago
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
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"
@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.
It's fixed with the latest release: https://codesandbox.io/s/cool-dew-3vjrys?file=/demo.js
Duplicates
Latest version
Steps to reproduce 🕹
Link to live example: https://codesandbox.io/s/exciting-morning-phf79t Steps:
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