MUI DataGrid manually change rows per page count

Question

I'm using MUI DataGrid v6 and i want to manually change rows per page count every time I search the data without refresh. As an example if i search something and I set rows per page count as 5. If I search again without refresh I want to set my rows per page count as 10.

Below is my shared DataGrid component.

import { DataGrid } from '@mui/x-data-grid';

<DataGrid
      rows={rows}
      columns={columns}
      initialState={{
        ...initialState,
        pagination: {
          paginationModel,
        },
      }}
      pageSizeOptions={pageSizeOptions}
      getRowId={rowId}
      rowHeight={50}
      density="standard"
      sx={{ border: 'none !important',
        '.MuiDataGrid-columnHeaderTitle': {
          fontWeight: 'bold !important',
          fontSize: '0.875rem',
          color: '#636363',
        },
        '.MuiDataGrid-cell': {
          fontSize: '1rem',
        },
        '.MuiDataGrid-cell--selected': {
          border: 'none !important',
        } }}
      getRowClassName={(params) => (params.indexRelativeToCurrentPage % 2 === 0 ? 'event' : 'odd')}
      slots={{ toolbar: GridToolbar }}
      slotProps={{ toolbar: { csvOptions: { disableToolbarButton: true }, printOptions: { disableToolbarButton: true } } }}
      disableColumnFilter
      disableColumnMenu
      hideFooterSelectedRowCount
      paginationMode="client"
      onPaginationModelChange={setPaginationModel}
    />

And I passed my page count using a state.

  const [paginationModel, setPaginationModel] = useState({ pageSize: 10, page: 0 });

I want to change my page model when I trigger my submit form event.

const handleSubmitData = (value) => {
    setPaginationModel({ ...paginationModel, pageSize: 10, page: 0 });
  };

this updates my state but my DataGrid is not updating the row count according to this pageSize count in the UI and DataGrid view loaded data. Still loading the old set count per row.

Can anyone help?

Answer 1

I found my own answer.

Codesandbox Link

Please refer this code.

Just use apiRef using their documentation.

apiRef Link