pagination manage users

src/components/manage_users/ManageUsers.tsx

@@ -16,6 +16,7 @@ import {
   DialogTitle,
   DialogContent,
   DialogActions,
+  TablePagination,
 } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import EditIcon from '@mui/icons-material/Edit';
@@ -56,6 +57,17 @@ export default function ManageUsers(){
     const [open, setOpen] = useState(false);
     const [selectedRow, setSelectedRow] = useState<any>();
     const [newRow, setNewRow] = useState<any>();
+    const [page, setPage] = React.useState(0);
+    const [rowsPerPage, setRowsPerPage] = React.useState(10);
+  
+    const handleChangePage = (event:any, newPage:any) => {
+      setPage(newPage);
+    };
+  
+    const handleChangeRowsPerPage = (event:any) => {
+      setRowsPerPage(+event.target.value);
+      setPage(0);
+    };
   
     const handleEdit = (row: Row) => {
       setSelectedRow({...row});
@@ -139,7 +151,16 @@ export default function ManageUsers(){
                     </TableBody>
                     </Table>
                 </TableContainer>
-
+                <TablePagination
+                  sx={{bgcolor:'#171716',color:'white'}}
+                  rowsPerPageOptions={[10, 25, 100]}
+                  component="div"
+                  count={manageUsersResponse && manageUsersResponse.length}
+                  rowsPerPage={rowsPerPage}
+                  page={page}
+                  onPageChange={handleChangePage}
+                  onRowsPerPageChange={handleChangeRowsPerPage}
+                />
                 <Dialog  open={open} onClose={handleClose}>
                     <DialogTitle sx={{bgcolor:'rgb(24 24 23)', color:'white'}}>{selectedRow && selectedRow.id ? 'Edit Row' : 'Add New Row'}</DialogTitle>
                     <DialogContent sx={{ bgcolor: 'rgb(24 24 23)' }}>