Implement manual pagination for user list and update styles

Author: Manolo

src/modules/users/list/users.pod.tsx

@@ -1,16 +1,7 @@
 import React from 'react';
 import { Link } from '@tanstack/react-router';
 import { ColumnDef, useReactTable, getCoreRowModel } from '@tanstack/react-table';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  TablePagination,
-  Paper,
-} from '@mui/material';
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Pagination } from '@mui/material';
 import * as classes from './users.styles';
 
 interface Data {
@@ -55,19 +46,45 @@ const columns: ColumnDef<Data>[] = [
 ];
 
 export const UsersPod: React.FC = () => {
+  const [pagination, setPagination] = React.useState({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+
+  const [paginatedData, setPaginatedData] = React.useState<Data[]>([]);
+
+  React.useEffect(() => {
+    const start = pagination.pageIndex * pagination.pageSize;
+    const end = start + pagination.pageSize;
+    setPaginatedData(data.slice(start, end));
+  }, [pagination]);
+
   const tableInstance = useReactTable({
-    data,
+    data: paginatedData,
     columns,
     getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    rowCount: data.length,
+    onPaginationChange: setPagination,
+    state: {
+      pagination,
+    },
   });
 
-  const { getAllColumns, getRowModel } = tableInstance;
+  const { getAllColumns, getRowModel, getPageCount, getState } = tableInstance;
+
+  const handleChangePage = (_: React.ChangeEvent<unknown>, newPage: number) => {
+    setPagination(prev => ({
+      ...prev,
+      pageIndex: newPage - 1,
+    }));
+  };
 
   return (
     <div className={classes.root}>
       <h1>Soy la página de listado de usuarios</h1>
       <TableContainer component={Paper}>
-        <Table sx={{ minWidth: 1200 }}>
+        <Table className={classes.table}>
           <TableHead>
             <TableRow>
               {getAllColumns().map(column => (
@@ -88,14 +105,11 @@ export const UsersPod: React.FC = () => {
             ))}
           </TableBody>
         </Table>
-        <TablePagination
-          rowsPerPageOptions={[5, 10, 25]}
-          component="div"
-          count={data.length}
-          rowsPerPage={5}
-          page={0}
-          onPageChange={() => {}}
-          onRowsPerPageChange={() => {}}
+        <Pagination
+          count={getPageCount()}
+          page={getState().pagination.pageIndex + 1}
+          onChange={handleChangePage}
+          className={classes.pagination}
         />
       </TableContainer>
       <Link to="/users/$id" params={{ id: '1' }}>

src/modules/users/list/users.styles.ts

@@ -8,6 +8,10 @@ export const root = css`
   align-items: center;
 `;
 
+export const table = css`
+  min-width: 1200px;
+`;
+
 export const head = css`
   background-color: ${theme.palette.common.black};
   color: ${theme.palette.common.white};
@@ -18,3 +22,9 @@ export const row = css`
     background-color: ${theme.palette.action.hover};
   }
 `;
+
+export const pagination = css`
+  display: flex;
+  justify-content: center;
+  padding: 10px;
+`;