CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Apprentice
Apprentice

Reputation: 43

Add Table Row Data within the Material-UI Accordion

I have to create a table populated with two accordions with mock data and one accordion with the data from the database using reactjs in Material-UI. I have created an accordion having the table data. I want only the Table data in the accordion not the heading. I am having trouble getting the Table data in the accordion section.

<Paper className={classes.root}>
      <Table className={classes.table}>
        <TableHead>
          <TableRow>
             <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat (g)</TableCell>
            <TableCell align="right">Carbs (g)</TableCell>
            <TableCell align="right">Protein (g)</TableCell>
          </TableRow>
         </TableHead>
         <Accordion>
      <AccordionSummary
        expandIcon={<ExpandMoreIcon />}
        aria-controls="panel1a-content"
        id="panel1a-header"
      >
        <Typography className={classes.heading}>OutStanding</Typography>
      </AccordionSummary>
      <AccordionDetails>
         <TableBody>
        {rows.map(row => (
            <ExpandingRow row={row} />
          ))}
          </TableBody>
         </AccordionDetails>
    </Accordion>
    </Table>
    </Paper>

The Screen looks like this current screen

How do I achieve it? Any assistance would be greatly appreciated, thanks!

Upvotes: 3

Views: 5867

Answers (1)

hoima
hoima

Reputation: 99

I previously responded in this thread with a more elaborate answer: I want to show two accordions in a Material UI table body

Excerpt:

This is how I would solve it. This solution also works without Accordion.

https://codesandbox.io/p/sandbox/great-hopper-skft3s

Basically, you can create a whole new table within the main table.

Add all the Accordion/nested logic within a single TableCell and add colSpan to match the item length of TableHead.

Then create a new Table within the Accordion and for each TableCell match the width of the columns from the TableHead.

Play around with padding: 0 to match TableHead and the nested content

Upvotes: -1

Related Questions