How to add accordion on mui table in react js?
March 02, 2023Hi 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.
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.
All the best 👍