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
>Solution :
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>
);
}