Implemented custom pagination using MUI X Data Grid. I tried to pass the props for pagination using datagrid's slotProps, but it says that the type of onChange doesn't match. How can I correct it? what did i wrong?...
This is Data Grid source
const handleChangePagination = (event: React.ChangeEvent<unknown>, value: number) => {
console.log('test', value)
}
<DataGrid
rows={rows}
columns={columns}
checkboxSelection
autoHeight
disableColumnMenu
paginationModel={paginationModel}
slots={{
pagination: Pagination,
toolbar: DataGridTitle,
}}
slotProps={{
pagination: {
page: paginationModel.page,
count: Math.round(rows.length / paginationModel.pageSize),
//error in onChange! TS2322: Type '(event: React.ChangeEvent , value: number) => void' is not assignable to type 'FormEventHandler '.
onChange: handleChangePagination,
},
}}
onPaginationModelChange={setPaginationModel}
disableRowSelectionOnClick
rowSelection
hideFooterSelectedRowCount
/>
and pagination component source is this one
interface PaginationProps {
page: number
count: number
onChange: (event: React.ChangeEvent<unknown>, page: number) => void
}
const Pagination = ({ page, count, onChange }: PaginationProps) => {
return (
<MuiPagination
color="standard"
variant="text"
shape="rounded"
page={page}
count={count}
renderItem={(props) => <PaginationItem {...props} />}
onChange={onChange}
showFirstButton
showLastButton
/>
)
}
Try it like this:
onChange: (e, v) => handleChange(e, v)
also you can try this:
onChange: (e:any) => handleChange(e.target.value)
and make it 'any' in the other side too, if it worked You'll need to tweak the types as MUI wants maybe 'FormEventHandler' and not the type you're using