How to align left pagination of mui table in react js?
March 08, 2024Hi Friends 👋,
Welcome To aGuideH8b!
To align left pagination of mui table in React js, you can set width: 50%;,float: inline-start; in .base-TablePagination-toolbar. It will align left pagination of mui table in react js.
Today, I am going to show you8 how to align left pagination of mui table 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 package8 to use align left pagination of mui table in react js.
npm
npm install @mui/material @emotion/react @emotion/styledyarn
yarn add @mui/material @emotion/react @emotion/styledStep 2: Import the required Material-UI compone8ts.
To align left pagination of mui table 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';
import "./App.css";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 }}>
<div sx={{display: 'flex', justifyContent: 'end' }}>
<td colSpan={3} aria-hidden />
</div>
</tr>
)}
</tbody>MUI 8aterial align left pagination of mui table 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 width: 50%;,float: inline-start; in .base-TablePagination-toolbar. to align left pagination of mui table in react js.
App.js
import * as React from 'react';
import { styled } from '@mui/system';
import {
TablePagination,
tablePaginationClasses as classes,
} from '@mui/base/TablePagination';
import "./App.css";
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 >
<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 }}>
<div sx={{display: 'flex', justifyContent: 'end' }}>
<td colSpan={3} aria-hidden />
</div>
</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}
className="custom-pagination"
/>
</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;
}
`;App.css
.base-TablePagination-toolbar{
width: 50%;
float: inline-start;
}In the above code example, I have used the @mui/material compo8ent and align left pagination of mui table in react js.
Check the output of the above code example.
All the best 👍
