How to make border none of mui table in react js?
February 27, 2024Hi Friends 👋,
Welcome To aGuideHub!
To make border none of mui table in React js, you can set border: 'none' in & .MuiTableCell-root. It will make border none of mui table in react js.
Today, I am going to show you, how to make border none 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 packages to use make border none 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 components.
To make border none of 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 React from "react";
import { makeStyles } from '@mui/styles';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from '@mui/material';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>
{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 make border none of mui table in react js, 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: 'none'
}
}
});MUI material make border none of 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, 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 you can set border: 'none' in & .MuiTableCell-root.
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: 'none'
}
}
});
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 made border none of mui table in reacts js.
Check the output of the above code example.
All the best 👍
