import { TablePagination as _MuiTablePagination } from '@material-ui/core' ; import IconButton from '@material-ui/core/IconButton' ; import { Theme , createStyles , makeStyles , useTheme } from '@material-ui/core/styles' ; import FirstPageIcon from '@material-ui/icons/FirstPage' ; import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft' ; import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight' ; import LastPageIcon from '@material-ui/icons/LastPage' ; import React , { PropsWithChildren , ReactElement , useCallback } from 'react' ; import { TableInstance } from 'react-table' ; const rowsPerPageOptions = [ 10 , 25 , 50 ] ; const interestingPropsEqual = ( prevProps , nextProps ) => prevProps . count === nextProps . count && prevProps . rowsPerPage === nextProps . rowsPerPage && prevProps . page === nextProps . page && prevProps . onChangePage === nextProps . onChangePage && prevProps . onChangeRowsPerPage === nextProps . onChangeRowsPerPage ; type T = typeof _MuiTablePagination ; const MuiTablePagination = React . memo ( _MuiTablePagination , interestingPropsEqual ) as T ; const useStyles = makeStyles ( ( theme ) => createStyles ( { root : { flexShrink : 0 , marginLeft : theme . spacing ( 2.5 ) , } , } ) ) ; interface TablePaginationActionsProps { count : number ; page : number ; rowsPerPage : number ; onChangePage : ( event : React . MouseEvent < HTMLButtonElement > , newPage : number ) => void ; } function TablePaginationActions ( props ) { const classes = useStyles ( ) ; const theme = useTheme ( ) ; const { count , page , rowsPerPage , onChangePage } = props ; const handleFirstPageButtonClick = ( event ) => { onChangePage ( event , 0 ) ; } ; const handleBackButtonClick = ( event ) => { onChangePage ( event , page - 1 ) ; } ; const handleNextButtonClick = ( event ) => { onChangePage ( event , page + 1 ) ; } ; const handleLastPageButtonClick = ( event ) => { onChangePage ( event , Math . max ( 0 , Math . ceil ( count / rowsPerPage ) - 1 ) ) ; } ; return ( < div className = { classes . root } > < IconButton onClick = { handleFirstPageButtonClick } disabled = { page === 0 } aria - label = 'first page' > { theme . direction === 'rtl' ? < LastPageIcon /> : <FirstPageIcon / > } < /IconButton> < IconButton onClick = { handleBackButtonClick } disabled = { page === 0 } aria - label = 'previous page' > { theme . direction === 'rtl' ? < KeyboardArrowRight /> : <KeyboardArrowLeft / > } < /IconButton> < IconButton onClick = { handleNextButtonClick } disabled = { page >= Math . ceil ( count / rowsPerPage ) - 1 } aria - label = 'next page' > { theme . direction === 'rtl' ? < KeyboardArrowLeft /> : <KeyboardArrowRight / > } < /IconButton> < IconButton onClick = { handleLastPageButtonClick } disabled = { page >= Math . ceil ( count / rowsPerPage ) - 1 } aria - label = 'last page' > { theme . direction === 'rtl' ? < FirstPageIcon /> : <LastPageIcon / > } < /IconButton> < /div>); } export function TablePagination < T extends Record < string , unknown > > ( { instance , } ) { const { state : { pageIndex , pageSize , rowCount = instance . rows . length } , gotoPage , nextPage , previousPage , setPageSize , } = instance ; const handleChangePage = useCallback ( ( event , newPage ) => { if ( newPage === pageIndex + 1 ) { nextPage ( ) ; } else if ( newPage === pageIndex - 1 ) { previousPage ( ) ; } else { gotoPage ( newPage ) ; } } , [ gotoPage , nextPage , pageIndex , previousPage ] ) ; const onChangeRowsPerPage = useCallback ( ( e ) => { setPageSize ( Number ( e . target . value ) ) ; } , [ setPageSize ] ) ; return rowCount ? ( < MuiTablePagination rowsPerPageOptions = { rowsPerPageOptions } component = 'div' count = { rowCount } rowsPerPage = { pageSize } page = { pageIndex } SelectProps = { { inputProps : { 'aria-label' : 'rows per page' } , } } onChangePage = { handleChangePage } onChangeRowsPerPage = { onChangeRowsPerPage } ActionsComponent = { TablePaginationActions } / > ) : null ; }