I've been attempting to create some data tables for an app that I am building, and I am utilizing Material UI's data grids. So far, they have been working well, and I have been aware of the features that are blocked in the community version and working around them (I haven't had a need to purchase the pro or premium versions yet)
As of version 6 of MUI, the api object constructor (useGridApiRef) was added to the community version, and in their documentation the exportDataAsCsv method (which is the one I'm trying to use) is listed as available for free use. However, after updating my mui datagrid package to v6.0.0, I'm still getting an error that the function is not found.
This doesn't just happen with the exportDataAsCsv method either, none of the apiRef methods work, which tells me that it's either an issue with my dependencies or with MUIs api object constructor.
This is the code that I tried, copied straight from MUIs documentation and the error I'm getting.
import * as React from 'react';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import { DataGrid, useGridApiRef } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';
export default function UseGridApiRef() {
const { data } = useDemoData({
dataSet: 'Commodity',
rowLength: 100,
maxColumns: 6,
});
const [paginationModel, setPaginationModel] = React.useState({
page: 0,
pageSize: 10,
});
const apiRef = useGridApiRef();
const handleGoToPage1 = () => apiRef.current.setPage(1);
return (
<Stack spacing={1} sx={{ width: '100%' }} alignItems="flex-start">
<Button onClick={handleGoToPage1}>Go to page 1</Button>
<Box sx={{ height: 400, width: '100%' }}>
<DataGrid
{...data}
apiRef={apiRef}
pagination
paginationModel={paginationModel}
onPaginationModelChange={setPaginationModel}
/>
</Box>
</Stack>
);
}
Uncaught TypeError: apiRef.current.setPage is not a function
at handleGoToPage1 (TestingApiRef.js:22:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
at executeDispatch (react-dom.development.js:9041:1)
at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)
at processDispatchQueue (react-dom.development.js:9086:1)
at dispatchEventsForPlugins (react-dom.development.js:9097:1)
at react-dom.development.js:9288:1
handleGoToPage1 @ TestingApiRef.js:22
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4291
executeDispatch @ react-dom.development.js:9041
processDispatchQueueItemsInOrder @ react-dom.development.js:9073
processDispatchQueue @ react-dom.development.js:9086
dispatchEventsForPlugins @ react-dom.development.js:9097
(anonymous) @ react-dom.development.js:9288
batchedUpdates$1 @ react-dom.development.js:26140
batchedUpdates @ react-dom.development.js:3991
dispatchEventForPluginEventSystem @ react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
dispatchEvent @ react-dom.development.js:6457
dispatchDiscreteEvent @ react-dom.development.js:6430
I've also doubled-checked my dependencies in package.json and have "@mui/x-data-grid": "^6.0.0" specifically listed
Is anyone else having this issue? Or might it just be something with my project. I'm also aware there is a hack for this, which I had been using until I found out about the v6 api object being added, but I'd prefer not use that unless the MUI method truly isn't working.
