How to make mui table with pagination in react js?
March 08, 2024Hi Friends π,
Welcome To aGuideHub!
To make mui table with pagination in React js, you can use TablePagination
. It will make mui table with pagination in react js.
Today, I am going to show you, how to make mui table with pagination in react js.
Table of contents
- Install Material-UI
- Import the required Material-UI components.
- Define the table body.
Letβs start with the first step.
Step 1: Install Material-UI
Install the following packages to use make mui table with pagination in react js.
npm
npm install @mui/material @emotion/react @emotion/styled
yarn
yarn add @mui/material @emotion/react @emotion/styled
Step 2: Import the required Material-UI components.
To make mui table with pagination in React, first, you have to import the table. We have imported the TablePagination
, tablePaginationClasses
, and classes
components from the @mui/base
library.
import * as React from 'react';
import { styled } from '@mui/system';
import {
TablePagination,
tablePaginationClasses as classes,
} from '@mui/base/TablePagination';
Step 3: Define the table body.
Table body is needed after table head, This code creates a table body with one row for each object in the rows array.
<tbody>
{(rowsPerPage > 0
? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
: rows
).map((row) => (
<tr key={row.name}>
<td>{row.name}</td>
<td style={{ width: 160 }} align="right">
{row.calories}
</td>
<td style={{ width: 160 }} align="right">
{row.fat}
</td>
</tr>
))}
{emptyRows > 0 && (
<tr style={{ height: 41 * emptyRows }}>
<td colSpan={3} aria-hidden />
</tr>
)}
</tbody>
MUI material make mui table with pagination example.
The below code is an example of a Material UI table. You have to import @mui/base
table. In the Material Table function when you create a table component, it consists of a table head and a table body. In this code, we create our TableContainer component with a Paper component as its child and use TablePagination
to make mui table with pagination in react js.
App.js
import * as React from 'react';
import { styled } from '@mui/system';
import {
TablePagination,
tablePaginationClasses as classes,
} from '@mui/base/TablePagination';
export default function TableUnstyled() {
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(5);
// Avoid a layout jump when reaching the last page with empty rows.
const emptyRows =
page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};
return (
<Root sx={{ maxWidth: '100%', width: 500 }}>
<table aria-label="custom pagination table">
<thead>
<tr>
<th>Dessert</th>
<th>Calories</th>
<th>Fat</th>
</tr>
</thead>
<tbody>
{(rowsPerPage > 0
? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
: rows
).map((row) => (
<tr key={row.name}>
<td>{row.name}</td>
<td style={{ width: 160 }} align="right">
{row.calories}
</td>
<td style={{ width: 160 }} align="right">
{row.fat}
</td>
</tr>
))}
{emptyRows > 0 && (
<tr style={{ height: 41 * emptyRows }}>
<td colSpan={3} aria-hidden />
</tr>
)}
</tbody>
<tfoot>
<tr>
<CustomTablePagination
rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
colSpan={3}
count={rows.length}
rowsPerPage={rowsPerPage}
page={page}
slotProps={{
select: {
'aria-label': 'rows per page',
},
actions: {
showFirstButton: true,
showLastButton: true,
},
}}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</tr>
</tfoot>
</table>
</Root>
);
}
function createData(name, calories, fat) {
return { name, calories, fat };
}
const rows = [
createData('Cupcake', 305, 3.7),
createData('Donut', 452, 25.0),
createData('Eclair', 262, 16.0),
createData('Frozen yoghurt', 159, 6.0),
createData('Gingerbread', 356, 16.0),
createData('Honeycomb', 408, 3.2),
createData('Ice cream sandwich', 237, 9.0),
createData('Jelly Bean', 375, 0.0),
createData('KitKat', 518, 26.0),
createData('Lollipop', 392, 0.2),
createData('Marshmallow', 318, 0),
createData('Nougat', 360, 19.0),
createData('Oreo', 437, 18.0),
].sort((a, b) => (a.calories < b.calories ? -1 : 1));
const grey = {
50: '#F3F6F9',
100: '#E5EAF2',
200: '#DAE2ED',
300: '#C7D0DD',
400: '#B0B8C4',
500: '#9DA8B7',
600: '#6B7A90',
700: '#434D5B',
800: '#303740',
900: '#1C2025',
};
const Root = styled('div')(
({ theme }) => `
table {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.875rem;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
text-align: left;
padding: 8px;
}
th {
background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
}
`,
);
const CustomTablePagination = styled(TablePagination)`
& .${classes.toolbar} {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
@media (min-width: 768px) {
flex-direction: row;
align-items: center;
}
}
& .${classes.selectLabel} {
margin: 0;
}
& .${classes.displayedRows} {
margin: 0;
@media (min-width: 768px) {
margin-left: auto;
}
}
& .${classes.spacer} {
display: none;
}
& .${classes.actions} {
display: flex;
gap: 0.25rem;
}
`;
In the above code example, I have used the @mui/material
component and made mui table with pagination in react js.
Check the output of the above code example.
All the best π