[data-grid] First/Last Page Icon Button

[iEquos]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Is it possible to to include an optional first/last page button for the DataGridPro Lists.

This was possible when using Table and TablePagination Components (which we no longer use anymore as we have upgraded to the latest versionDataGridPro)

We used to have
<TablePagination
hidden={isSeraching}
rowsPerPageOptions={[5, 10, 15, 25, 50]}
component="div"
count={initList.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={(e, newPage) => setPage(newPage)}
onRowsPerPageChange={(e) => handleChangeRowsPerPage(e.target.value)}
ActionsComponent={TablePaginationActions}
/>

Where TablePaginationActions component is:

import { Box, IconButton } from '@material-ui/core'
import FirstPageIcon from '@mui/icons-material/FirstPage'
import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft'
import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight'
import LastPageIcon from '@mui/icons-material/LastPage'
import { TablePaginationActionsProps } from '@material-ui/core/TablePagination/TablePaginationActions'
import React from 'react'

const TablePaginationActions: React.FC = (muiProps) => {
const { count, page, rowsPerPage, onPageChange } = muiProps

const handleFirstPageButtonClick = (event: React.MouseEvent) => {
event && onPageChange(event, 0)
}

const handleBackButtonClick = (event: React.MouseEvent) => {
onPageChange(event, page - 1)
}

const handleNextButtonClick = (event: React.MouseEvent) => {
onPageChange(event, page + 1)
}

const handleLastPageButtonClick = (event: React.MouseEvent) => {
onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1))
}

return (
<Box sx={{ flexShrink: 0, ml: 2.5 }}>
<IconButton
onClick={handleFirstPageButtonClick}
disabled={page === 0}
aria-label="first page"
>


<IconButton
onClick={handleBackButtonClick}
disabled={page === 0}
aria-label="previous page"
>


= Math.ceil(count / rowsPerPage) - 1}
aria-label="next page"
>


= Math.ceil(count / rowsPerPage) - 1}
aria-label="last page"
>



)
}
export default TablePaginationActions

This worked and rendered out

Is it possible to get this with the DataGridPro? If not is this a feature you could add in?

Examples 🌈

No response

Motivation 🔦

Motivation: To have a first/last icon on our lists

Order ID 💳 (optional)

#37406

[m4theushw]

Is it possible to get this with the DataGridPro?

Yes, you can override the pagination component. I think you can just reuse the old TablePagination you had without bigger changes. Check https://mui.com/components/data-grid/components/#pagination

[iEquos]

Thankyou for the reply.
We would quite like to update our lists to use the Pagination component that you linked to.
(this one: import Pagination from '@mui/material/Pagination')

Although the Pagination component seems to ignore the rowsPerPageOptions/pageSize props on out DataGridPro Component. And there's no example on the link you shared (https://mui.com/components/data-grid/components/#pagination) that shows how we could get a rows per page selector with the Pagination component.

So is it possible to get this:

but also have some sort of page size change functionality like this:

[m4theushw]

The Pagination component doesn't have a rows per page selector. However, you can combine it with a Select. You can take as example the built-in pagination component we use: https://github.com/mui/mui-x/blob/master/packages/grid/x-data-grid/src/components/GridPagination.tsx

[flaviendelangle]

I made a quick example with our default GridPagination combined with the custom actions from first and last page

which we no longer use anymore as we have upgraded to the latest versionDataGridPro

What is preventing you to use it ?

[flaviendelangle]

I'm closing this one due to a lack of feedbacks

[pavankjadda]

I made a quick example with our default GridPagination combined with the custom actions from first and last page

which we no longer use anymore as we have upgraded to the latest versionDataGridPro

What is preventing you to use it ?

I like this. Shouldn't this be part of the DataGrid component? Because every table needs it.

[designly1]

I made a quick example with our default GridPagination combined with the custom actions from first and last page

which we no longer use anymore as we have upgraded to the latest versionDataGridPro

What is preventing you to use it ?

You saved my life! :-)