MUI DataGrid table pagination not working

Question

I'm trying to make the pagination work in my Material UI DataGrid component but I just cant:

The console doesnt throw any error.

This is my component:

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

import type { GridRowModel } from '@mui/x-data-grid';
import type { Person } from '../../../../interfaces/people';
import type { AppStore } from '../../../../redux/store';

import { usePeopleTable } from './hooks/usePeopleTable';

const PeopleTable: React.FC = () => {
  const { columns } = usePeopleTable();

  const people: Person[] = useSelector((state: AppStore) => state.people);

  return (
    <>
      <DataGrid
        style={{
          marginTop: '2rem',
          maxWidth: '900px',
          backgroundColor: 'white',
          width: '100%',
        }}
        columns={columns}
        rows={people}
        disableColumnSelector
        disableRowSelectionOnClick
        autoHeight
        pageSizeOptions={[5, 10, 25]}
        paginationMode='client'
        paginationModel={{
          pageSize: 5,
          page: 0,
        }}
        pagination={true}
        getRowId={(row: GridRowModel) => row.id}
      />
    </>
  );
};

export default PeopleTable;

According to the docs this should be fine but it's driving me crazy, any clue?

Thank youuuu

Answer 1

According to docs, you have to set paginationModel inside pagination.

pagination: { paginationModel: { pageSize: 5 } },

Refer the docs:

import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function PageSizeCustomOptions() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    maxColumns: 6,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        {...data}
        initialState={{
          ...data.initialState,
          pagination: { paginationModel: { pageSize: 5 } },
        }}
        pageSizeOptions={[5, 10, 25]}
      />
    </div>
  );
}