How to change mui table last row border in react js?
March 06, 2024Hi Friends 👋,
Welcome To aGuideHub!
To change mui table last row border in React js, you can set '&:last-child td': {borderBottom: 'none',}, in lastRow. It will change mui table last row border in react js.
Today, I am going to show you, how to change mui table last row border 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 change mui table last row border 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 components.
To change mui table last row border in React, first, you have to import the table. We have imported the table, tableBody, tableCell, tableContainer, tableHead, tableRow, and Paper components from the @mui/material library.
import React from 'react';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from '@mui/material';
import { makeStyles } from '@mui/styles';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.
<TableBody className={classes.lastRow}>
{data.map(row => (
<TableRow key={row.id}>
<TableCell>{row.id}</TableCell>
<TableCell>{row.name}</TableCell>
<TableCell>{row.age}</TableCell>
</TableRow>
))}
</TableBody>MUI material change mui table last row border example.
The below code is an example of a Material UI table. You have to import @mui material 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 '&:last-child td': {borderBottom: 'none',}, in lastRow to change mui table last row border in react js.
App.js
import React from 'react';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from '@mui/material';
import { makeStyles } from '@mui/styles';
const useStyles = makeStyles(theme => ({
lastRow: {
'&:last-child td': {
borderBottom: 'none', // Remove bottom border for the last row
},
},
}));
const LastRowTable = () => {
const classes = useStyles();
// Sample data
const data = [
{ id: 1, name: 'John Doe', age: 30 },
{ id: 2, name: 'Jane Smith', age: 25 },
{ id: 3, name: 'Bob Johnson', age: 35 }
];
return (
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell>ID</TableCell>
<TableCell>Name</TableCell>
<TableCell>Age</TableCell>
</TableRow>
</TableHead>
<TableBody className={classes.lastRow}>
{data.map(row => (
<TableRow key={row.id}>
<TableCell>{row.id}</TableCell>
<TableCell>{row.name}</TableCell>
<TableCell>{row.age}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}
export default LastRowTable;In the above code example, I have used the @mui/material component and changed mui table last row border in react js.
Check the output of the above code example.
All the best 👍