I'm currently working on a personal project using Material UI, but I have a more general query regarding table implementation. I have designed a layout in Figma that I like, but I am struggling to translate it into code.
https://i.sstatic.net/NoWEB.png
My issue lies with the MUI table I have created - there are two main problems. First, I am unsure how to integrate the top 3 headers seamlessly into the table without them getting misaligned when resizing the screen. Secondly, I am perplexed about how to structure the table into sections and justify the headers accordingly.
It has been a challenging day trying to work through this problem; what seemed like a straightforward design has become quite complex as I try to segment the table into three distinct parts.
https://i.sstatic.net/Tbkmw.png
Here is my current code:
import { styled } from "@mui/material/styles";
import Grid from "@mui/material/Grid";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Box from "@mui/material/Box";
import Paper from "@mui/material/Paper";
import Typography from "@mui/material/Typography";
function createData(name, calories, fat, carbs, protein) {
return { name, calories, fat, carbs, protein };
}
const rows = [
createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
createData("Eclair", 262, 16.0, 24, 6.0),
createData("Cupcake", 305, 3.7, 67, 4.3),
createData("Gingerbread", 356, 16.0, 49, 3.9),
];
const StyledTableRow = styled(TableRow)(({ theme }) => ({
"&:nth-of-type(odd)": {
backgroundColor: theme.palette.action.hover,
},
// hide last border
"&:last-child td, &:last-child th": {
border: 0,
},
}));
export default function DenseTable() {
return (
<Box sx={{ mt: 3 }}>
<Grid container>
<Grid item xs>
<Typography sx={{ fontSize: 16 }} component="h2">
<b>Header 1</b>
</Typography>
</Grid>
<Grid item xs>
<Typography sx={{ fontSize: 16 }} component="h2">
<b>header 2</b>
</Typography>
</Grid>
<Grid item xs>
<Typography sx={{ fontSize: 16 }} component="h2">
<b>Header 3</b>
</Typography>
</Grid>
</Grid>
{/* */}
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} size="small" aria-label="a dense table">
<TableHead>
<TableRow>
<TableCell>header 1</TableCell>
<TableCell>header 2</TableCell>
<TableCell>header 3 </TableCell>
<TableCell>header 4</TableCell>
<TableCell>header 5</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<StyledTableRow
key={row.name}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<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>
</StyledTableRow>
))}
</TableBody>
</Table>
</TableContainer>
</Box>
);
}