How to create mui table in react js?
March 11, 2023Hi Friends 👋,
Welcome To aGuideHub!
To create mui table in React js, you can use mui table <Table>. It will create mui table.
Today, I am going to show you, How to create mui table in react js.
Table of contents
- Install Material-UI
- Import the required Material-UI components.
- Define the table data.
- Define the table header.
- Define the table body.
Let’s start with the first step.
Step 1: Install Material-UI
Install the following packages to use create 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 create 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, age, and gender.
const rows = [
{ name: 'Sohan', age: 25, gender: 'Male' },
{ name: 'Mohani', age: 30, gender: 'Female' },
{ name: 'Rajan', age: 40, gender: 'Male' },
];Step 4: Define the table header.
After defining the array, we will need the TableHead. There are three columns in this table head, such as age, name, gender.
<TableHead>
<TableRow>
<TableCell>Name</TableCell>
<TableCell>Age</TableCell>
<TableCell>Gender</TableCell>
</TableRow>
</TableHead>Step 5: 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>{row.age}</TableCell>
<TableCell>{row.gender}</TableCell>
</TableRow>
))}
</TableBody>MUI material create 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.
App.js
import React from 'react';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from '@mui/material';
const rows = [
{ name: 'Sohan', age: 25, gender: 'Male' },
{ name: 'Mohan', age: 30, gender: 'Female' },
{ name: 'Rajan', age: 40, gender: 'Male' },
];
function MaterialTable() {
return (
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell>Name</TableCell>
<TableCell>Age</TableCell>
<TableCell>Gender</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow key={row.name}>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell>{row.age}</TableCell>
<TableCell>{row.gender}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}
export default MaterialTable;In the above code example, I have used the @mui/material component and created mui table.
Check the output of the above code example.
Here, we are provided code sandbox links for the above program create mui table. Then you can use whenever you went and do the changes as per your requirements.
All the best 👍
