While using material-ui v4, I encountered an issue where my collapsible row columns are not aligning properly with my regular columns. Below is a photo and the code snippet for reference. As you can see in the image, when I expand the Frozen Yogurt row, the columns do not line up with the headings (dessert, calories, fat, carbs, protein). Is there a way to make the columns in the collapsible row align with the table headings? Additionally, I would like them to remain aligned even when the screen size changes.
Click here for the image of the issue
import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles";...
...
...
</Table>
</Box>
</Collapse>
</TableCell>
</TableRow>
</React.Fragment>
);
}
Row.propTypes = {
row: PropTypes.shape({...}).isRequired
};
const rows = [
createData("Frozen yoghurt", 159, 6.0, 24, 4.0, 3.99),
createData("Ice cream sandwich", 237, 9.0, 37, 4.3, 4.99),
createData("Eclair", 262, 16.0, 24, 6.0, 3.79),
createData("Cupcake", 305, 3.7, 67, 4.3, 2.5),
createData("Gingerbread", 356, 16.0, 49, 3.9, 1.5)
];
export default function CollapsibleTable() {
return (
<TableContainer component={Paper}>
...
(remaining code remains the same as provided)
...