Material UI table with Pagination component

Material UI is an open source project that uses React components and provides reusable components for easy and quick front end designing.

The example here will show how we can implement Material UI’s pagination component with the Material UI core components and use react-router-dom to switch our url according to the pagination item selected.

This is how we can use the table component in our project. According to the pageNumber we will render the data in the table.

import Pagination from "@material-ui/lab/Pagination";
import { TableContainer,Table,TableBody,TableRow,TableCell, TableHead,} from "@material-ui/core";
import PaginationItem from "@material-ui/lab/PaginationItem";

export default ({ data }: DataProps) => {
const columns = ["First Name", "Last Name", "Email Address",];

return (
<TableContainer className={classes.container}>
    <Table stickyHeader size="small">
      <TableHead>
         <TableRow>
               {columns.map(column => (
           <TableCell key={column} className={classes.cell}>
             <Typography variant="h6">{column}</Typography>
           </TableCell>
               ))}
         </TableRow>
      </TableHead>
      <TableBody>
        {(ROWS_PER_PAGE > 0 ? data.slice(
          (Number(pageNumber) - 1) * ROWS_PER_PAGE,
     (Number(pageNumber) - 1) * ROWS_PER_PAGE + ROWS_PER_PAGE,):        data).map(dataRow => {
         return (
            <TableRow key={dataRow.id}
               classes={{ hover: classes.hover }} hover>
               <TableCell className={classes.tableCell}>
                   {dataRow.first_name}
               </TableCell>
               <TableCell align="left">
                   {dataRow.last_name}
               </TableCell>
             </TableRow>
            );
          })}
     </TableBody>
  </Table>
</TableContainer>

The Pagination can added using Pagination and PaginationItem. The count prop provided the number of elements displayed per page. The boundaryCount is the number of pages shown in pagination if it the page cannot fill the pagination component and had to change the pages to ellipsis.

I am changing the page params in the url using react-router-dom. The component prop value needs to be Link for Pagination Items ( the page references) to act as Link for changing data according to item clicked.

import Pagination from "@material-ui/lab/Pagination";
import PaginationItem from "@material-ui/lab/PaginationItem";
import { Link, useParams } from "react-router-dom";

const USER_PATH = "/user";
const ROWS_PER_PAGE = 15;
const { pageNumber = 1 } = useParams();

<Pagination
     page={Number(pageNumber)}
     count={Math.ceil(data.length / ROWS_PER_PAGE)}
     shape="rounded"
     color="primary"
     boundaryCount={2}
     showFirstButton
     showLastButton
     renderItem={(item) => (
       <PaginationItem
          type={"start-ellipsis"}
          component={Link}
          selected
          to={`${USER_PATH}/${item.page}`}
          {...item}
       />
     )}
/>

The pageNumber value is picked from the url params changed using to reference provided. We have specified the route component and the path to be taken by the url. The colon variable (:) in the path is used to specify the parameter which will be changing its value.

<Route
path={`/user/:pageNumber`}
component={Screen}
/>

Conclusion

In this post, I have explained and made a small demo to show how we can use the material ui Apis for building a table with pagination feature and using react router to navigate the table.

GitHub project can be viewed here: https://github.com/Pagination_Demo

Table API - Material-UI

PaginationItem API - Material-UI

React Router: Declarative Routing for React