I am using the MUI V5 DataGrid component in my App and I want to customize the Footer component on the datagrid component but can't find any docs on how to go about it. This is the current default footer:
I want to achieve something resembling this:
Is there a way to reorganize the individual components and customize the styling as such? Any help is highly appreciated.
this sample code you can use for a custom footer in data grid MUI v5
first, you write your pagination component with full logic when the client clicked on the page, like this :
const RoundedPagination = () => {
return (
<Stack spacing={2}>
<Pagination
shape="rounded" page={page + 1} onChange={handleChange} count={props.numberOfPages}
renderItem={(item) => (
<PaginationItem
sx={{
color: 'main.0',
}}
components={{previous: ArrowRightRoundedIcon, next: ArrowLeftRoundedIcon}}
{...item}
/>
)}
/>
</Stack>
)
}
then you use this component in data grid like this :
<Grid container item justifyContent={'center'} alignItems={'center'} md={12}>
<DataGrid
page={page}
rows={props.dataGridValue.ROW}
columns={props.dataGridValue.COLUMNS}
autoHeight
headerHeight={52}
rowsPerPageOptions={[10]}
disableColumnMenu
Pagination
hideFooterSelectedRowCount
components={{
Pagination: RoundedPagination,
}}
/>
</Grid>
hope you get your answer good luck ;)