How to make mui table with border radius in react js?
March 15, 2023Hi Friends 👋,
Welcome To aGuideHub!
To make mui table with border radius in React js, you can use this code sx={{ borderRadius: "20px" }}. It will make mui table with border radius.
Today, I am going to show you, how to make mui table with border radius 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 border radius 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 mui table with border radius 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 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>
<TableRow>
<TableCell>John Doe</TableCell>
<TableCell>32</TableCell>
<TableCell>Male</TableCell>
</TableRow>
<TableRow>
<TableCell>Jane Smith</TableCell>
<TableCell>28</TableCell>
<TableCell>Female</TableCell>
</TableRow>
</TableBody>Step 5: Define a CSS class for the table.
To make mui table with border radius, you need to use the makestyle hook provided by material-ui to add a CSS class to it.
const useStyles = makeStyles({
table: {
minWidth: 350,
borderRadius: '10px 0 0 10px', // Set border radius here
m: 4,
width: '5rem',
height: '5rem',
overflow: `scroll`,
},
});MUI material make mui table with border radius 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 sx prop to do border radius.
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: 350,
borderRadius: "10px 0 0 10px", // Set border radius here
m: 4,
width: "5rem",
height: "5rem",
overflow: `scroll`
}
});
function RoundedTable() {
const classes = useStyles();
return (
<TableContainer
component={Paper}
sx={{
padding: "0px 0px",
borderRadius: "20px",
fontSize: "1.1rem"
}}
>
<Table className={classes.table} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Name</TableCell>
<TableCell>Age</TableCell>
<TableCell>Gender</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell>John Doe</TableCell>
<TableCell>32</TableCell>
<TableCell>Male</TableCell>
</TableRow>
<TableRow>
<TableCell>Jane Smith</TableCell>
<TableCell>28</TableCell>
<TableCell>Female</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
);
}
export default RoundedTable;In the above code example, I have used the @mui/material component and made mui table with border radius.
Check the output of the above code example.
Here, we are provided code sandbox links for the above program make mui table with border radius. Then you can use whenever you went and do the changes as per your requirements.
All the best 👍
