I'm experimenting with using the MUI table along with Collapse to expand and collapse rows. However, I've noticed that when utilizing collapse, the expanded rows get squished into one cell. How can I adjust the alignment of the cells within the parent table?
export default function App() {
const [expanded, setExpanded] = useState(false);
return (
<Table>
<TableHead>
<TableRow>
<TableCell />
<TableCell>Header 1</TableCell>
<TableCell>Header 2</TableCell>
<TableCell>Header 3</TableCell>
<TableCell>Header 4</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell onClick={() => setExpanded(!expanded)}>Expand</TableCell>
<TableCell>A</TableCell>
<TableCell>B</TableCell>
<TableCell>C</TableCell>
<TableCell>D</TableCell>
</TableRow>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<TableRow>
<TableCell />
<TableCell>E</TableCell>
<TableCell>F</TableCell>
<TableCell>G</TableCell>
<TableCell>H</TableCell>
</TableRow>
</Collapse>
</TableBody>
</Table>
);
};
By removing the Collapse feature, the table displays in the correct format. e.g. current state is:
The desired result post-expansion would look like this: