I am currently facing a challenge while working on a table with an expand more option to display additional details for each specific row. I have implemented a slider to facilitate the expansion of the table. Presently, my ExpandToggle component is embedded within the columns of the table, causing the table to expand to the left and push the data. Instead, I wish to position the 'ExpandToggle' component to cover the Fat(g), Carbs(g), and Protein(g) rows, overlaying them on top of the table without displaying the data from those three rows or stretching the table.
To demonstrate this issue further, I have created a sample on CodeSandbox.
This is how it currently appears:
https://i.stack.imgur.com/DE85r.png
Here is the code snippet for the table body:
<TableBody>
{rows.map(row => (
<TableRow key={row.name}>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell align="right">{row.calories}</TableCell>
<TableCell align="right">{row.fat}</TableCell>
<TableCell align="right">>{row.carbs}</TableCell>
<TableCell align="right">>{row.protein}</TableCell>
<TableCell align="right">>
<ExpandToggle />
</TableCell >
</TableRow>
))}
</TableBody>