How to add border on mui table in react js?
March 13, 2023Hi Friends 👋,
Welcome To aGuideHub!
To add border on mui table in React js, you can use useStyles width "& .MuiTableCell-root" in border: '1px solid black'. It will add border on mui table.
Today, I am going to show you, How to add border on mui table in react js.
Table of contents
- Install Material-UI
- Import the required Material-UI components.
- Define the table data.
- Define the table body.
- Define a CSS class for the table.
Let’s start with the first step.
Step 1: Install Material-UI
Install the following packages to use add border on 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 components.
To add border on mui table 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 { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from '@mui/material';Step 3: Define the table data.
We have to define to show the data of our table. We will create an array of employees with their name, calories, fat, carbs, protein, food.
function createData(name, calories, fat, carbs, protein, food) {
return { name, calories, fat, carbs, protein, food };
}Step 4: 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>
{rows.map((row) => (
<TableRow key={row.name}>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell align="center">{row.calories}</TableCell>
<TableCell align="center">{row.fat}</TableCell>
<TableCell align="center">{row.carbs}</TableCell>
<TableCell align="center">{row.protein}</TableCell>
<TableCell align="center">{row.food}</TableCell>
</TableRow>
))}
</TableBody>Step 5: Define a CSS class for the table.
To add a border to a MUI table, you need to use the makestyle hook provided by material-ui to add a CSS class to it.
const useStyles = makeStyles({
table: {
minWidth: 650,
"& .MuiTableCell-root": {
border: '1px solid black'
}
}
});MUI material add border on mui table 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, The Table component consists of the TableHead and TableBody components, with the TableHead component consisting of two TableCell components and two TableRow components.
App.js
import React from "react";
import { makeStyles } from '@mui/styles';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from '@mui/material';
const useStyles = makeStyles({
table: {
minWidth: 650,
"& .MuiTableCell-root": {
border: '1px solid black'
}
}
});
function createData(name, calories, fat, carbs, protein, food) {
return { name, calories, fat, carbs, protein, food };
}
const rows = [
createData("Frozen yoghurt", 159, 6.0, 24, 4.0, 0),
createData("Ice cream sandwich", 237, 9.0, 37, 4.3, 0),
createData("Eclair", 262, 16.0, 24, 6.0, 0),
createData("Cupcake", 305, 3.7, 67, 4.3, 0),
createData("Gingerbread", 356, 16.0, 49, 3.9, 0)
];
export default function App() {
const classes = useStyles();
return (
<TableContainer component={Paper}>
<Table className={classes.table} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell align="center" colSpan={5}>
MRF
</TableCell>
<TableCell align="center" colSpan={1}>
AD
</TableCell>
</TableRow>
<TableRow>
<TableCell>Paper</TableCell>
<TableCell align="center">Plastic</TableCell>
<TableCell align="center">Glass</TableCell>
<TableCell align="center">Metals</TableCell>
<TableCell align="center">Metals</TableCell>
<TableCell align="center">Food</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow key={row.name}>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell align="center">{row.calories}</TableCell>
<TableCell align="center">{row.fat}</TableCell>
<TableCell align="center">{row.carbs}</TableCell>
<TableCell align="center">{row.protein}</TableCell>
<TableCell align="center">{row.food}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}In the above code example, I have used the @mui/material component and added border on mui table.
Check the output of the above code example.
Here, we are provided code sandbox links for the above program add border on mui table. Then you can use whenever you went and do the changes as per your requirements.
All the best 👍
