How to add accordion on mui table in react js?

Hi Friends 👋,

Welcome To aGuideHub!

To add accordion on mui table in React js, you can use <accordion> in mui table tablesell tag. It will show accordion in the table.

Today, I am going to show you, how to add accordion on mui table in react js.

Installation

Install the following packages to use add accordion on mui table in react js.

npm

npm install @mui/material @emotion/react @emotion/styled

yarn

yarn add @mui/material @emotion/react @emotion/styled

MUI material add accordion on mui table example.

The below code is an example of a Material UI table. You have to import @mui material table and use this code <accordion> then add accordion on mui table.

App.js

import {
  Accordion,
  AccordionDetails,
  AccordionSummary,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow
} from "@mui/material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";

const tableData = [
  {
    id: 1,
    name: "Mohan",
    age: 30,
    address: "Solapur",
    details:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur bibendum ligula vitae ornare."
  },
  {
    id: 2,
    name: "shyam",
    age: 25,
    address: "Solapur",
    details: "Integer dignissim auctor velit, at tempor lorem pretium in."
  }
  // Add more objects as needed
];

function App() {
  return (
    <TableContainer>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>ID</TableCell>
            <TableCell>Name</TableCell>
            <TableCell>Age</TableCell>
            <TableCell>Address</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {tableData.map((row) => (
            <TableRow key={row.id}>
              <TableCell>{row.id}</TableCell>
              <TableCell>{row.name}</TableCell>
              <TableCell>{row.age}</TableCell>
              <TableCell>
                <Accordion>
                  <AccordionSummary
                    expandIcon={<ExpandMoreIcon />}
                    aria-controls="panel1a-content"
                    id="panel1a-header"
                  >
                    {row.address}
                  </AccordionSummary>
                  <AccordionDetails>
                    <p>{row.details}</p>
                  </AccordionDetails>
                </Accordion>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

export default App;

In the above code example, I have used the @mui/material component and got the selected value from mui select.

Check the output of the above code example.

React, Mui, accordion

Here, we are provided code sandbox links for the above program add accordion on mui table. Then you can use whenever you want and do the changes as per your requirements.

Try it Yourself

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

I'm working on some more Cheat Sheets book on Jquery, TypeScript, React js and for other languages. I will send it once it's completed.

Related Posts