reactjstypescriptmaterial-uimui-x-data-grid

how to add custom slots props in MUI X Data Grid?


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
    />
  )
}

Solution

  • 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