51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import TablePagination from '@mui/material/TablePagination';
|
|
|
|
function noop(): void {
|
|
return undefined;
|
|
}
|
|
|
|
interface UsersPaginationProps {
|
|
count: number;
|
|
page: number;
|
|
//
|
|
setPage: (page: number) => void;
|
|
setRowsPerPage: (page: number) => void;
|
|
rowsPerPage: number;
|
|
}
|
|
|
|
export function UsersPagination({
|
|
count,
|
|
page,
|
|
//
|
|
setPage,
|
|
setRowsPerPage,
|
|
rowsPerPage,
|
|
}: UsersPaginationProps): React.JSX.Element {
|
|
// You should implement the pagination using a similar logic as the filters.
|
|
// Note that when page change, you should keep the filter search params.
|
|
const handleChangePage = (event: unknown, newPage: number) => {
|
|
setPage(newPage);
|
|
};
|
|
|
|
const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
setRowsPerPage(parseInt(event.target.value));
|
|
// console.log(parseInt(event.target.value));
|
|
};
|
|
|
|
return (
|
|
<TablePagination
|
|
component="div"
|
|
count={count}
|
|
onPageChange={handleChangePage}
|
|
onRowsPerPageChange={handleChangeRowsPerPage}
|
|
page={page}
|
|
rowsPerPage={rowsPerPage}
|
|
rowsPerPageOptions={[5, 10, 25]}
|
|
//
|
|
/>
|
|
);
|
|
}
|