I added simple DataGrid
to my component
<div className='Employees'>
<Button onClick={queryEmployees}>Employees</Button>
<DataGrid rows={rows} columns={columns} autoHeight={true}/>
...
</div>
and I get this error in console
Material-UI: The key `caption` provided to the classes prop is not implemented in ForwardRef(TablePagination).
You can only override one of the following:
root,toolbar,spacer,selectLabel,selectRoot,select,selectIcon,input,menuItem,displayedRows,actions.
I don't understand this error, nor what causes it and I have no idea how to debug it.
I also get the same error.
"material-table": "^1.69.2",
"@material-ui/core": "^5.0.0-alpha.24",
"@material-ui/data-grid": "^4.0.0-alpha.21",
But I don't get any issue with the below versions.
"@material-ui/core": "^4.11.0",
"material-table": "^1.69.2",
"@material-ui/data-grid": "^4.0.0-alpha.18",
Update:
DataGrid comes under lab click here for more information.
Kindly check the currently available document version and your @material/core version to fix the issue.
Somewhere in your code, you're using the caption
in one of the components to override its styling. This happens when you for example pass a class list that contains extra attributes, not supported by the component.
Looking at the error, this seems to be happening with the TablePagination
component.
const useStyles = makeStyles(() => {
root: {},
caption: { color: "red" },
}
const MyComponent = () => {
classes = useStyles();
return <TablePagination classes={classes} {...restProps} />
}
caption
isn't supported by this Material UI Component. Therefore, a Typescript error is thrown. Search your code and remove this additional attribute to solve the problem.
You can find here the possible attributes that you can use. https://material-ui.com/api/table-pagination/
The problem is now gone after I updated material ui dependencies. I managed to get
data-grid
working with core v5
but I think I had to install styles
for it to work. This is what I have now installed and it's working fine.
(note: you probably don't need all of these, but I will leave it here, maybe it will help someone):
"@emotion/react": "^11.4.0",
"@emotion/styled": "^11.3.0",
"@material-ui/core": "^5.0.0-beta.1",
"@material-ui/data-grid": "^4.0.0-alpha.33",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.60",
"@material-ui/pickers": "^3.3.10",
"@material-ui/styles": "^4.11.4",
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With