35 lines
969 B
TypeScript
35 lines
969 B
TypeScript
import { Typography, Pagination } from '@mui/material'
|
|
|
|
const TablePaginationComponent = ({
|
|
pageIndex,
|
|
pageSize,
|
|
totalCount,
|
|
onPageChange
|
|
}: {
|
|
pageIndex: number
|
|
pageSize: number
|
|
totalCount: number
|
|
onPageChange: (event: React.ChangeEvent<unknown>, page: number) => void
|
|
}) => {
|
|
const start = pageIndex === 1 ? pageIndex : (pageIndex - 1) * pageSize + 1
|
|
const end = Math.min((pageIndex) * pageSize, totalCount)
|
|
|
|
return (
|
|
<div className='flex justify-between items-center flex-wrap pli-6 border-bs bs-auto plb-[12.5px] gap-2'>
|
|
<Typography color='text.disabled'>{`Showing ${start} to ${end} of ${totalCount} entries`}</Typography>
|
|
<Pagination
|
|
shape='rounded'
|
|
color='primary'
|
|
variant='tonal'
|
|
count={Math.ceil(totalCount / pageSize)}
|
|
page={pageIndex}
|
|
onChange={onPageChange}
|
|
showFirstButton
|
|
showLastButton
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default TablePaginationComponent
|