How to merge cells of mui table in react js?
March 12, 2024Hi Friends 👋,
Welcome To aGuideHub!
To merge cells of mui table in React js, you can use this code <TableCell colSpan={2}> and <TableCell rowSpan={2} > in table . It will merge cells of mui table in react js.
Today, I am going to show you, how to merge cells 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 merge cells 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 merge cells 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 { 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 rowSpan={2} align="center">Row 1</TableCell>
<TableCell align="center">Cell 1</TableCell>
<TableCell align="center">Cell 2</TableCell>
</TableRow>
<TableRow>
<TableCell align="center">Cell 3</TableCell>
<TableCell align="center">Cell 4</TableCell>
</TableRow>
<TableRow>
<TableCell align="center">Row 2</TableCell>
<TableCell align="center">Cell 5</TableCell>
<TableCell align="center">Cell 6</TableCell>
</TableRow>
</TableBody>MUI material merge cells 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 use <TableCell colSpan={2}> and <TableCell rowSpan={2} > to merge cells of mui table in react js.
App.js
import React from 'react';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from '@mui/material;
const MergedCellsTable = () => {
return (
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell colSpan={2} align="center">Merged Header</TableCell>
<TableCell align="center">Header 3</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell rowSpan={2} align="center">Row 1</TableCell>
<TableCell align="center">Cell 1</TableCell>
<TableCell align="center">Cell 2</TableCell>
</TableRow>
<TableRow>
<TableCell align="center">Cell 3</TableCell>
<TableCell align="center">Cell 4</TableCell>
</TableRow>
<TableRow>
<TableCell align="center">Row 2</TableCell>
<TableCell align="center">Cell 5</TableCell>
<TableCell align="center">Cell 6</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
);
};
export default MergedCellsTable;In the above code example, I have used the @mui/material component and merge cells of mui table in react js.
Check the output of the above code example.
All the best 👍
