I am trying to use the material-table and I would like to use colspan
and rowspan
in the material-table. I already search for example and sample but I don't see anything.
Currently, I use to like that in the material table
<TableHead>
<TableRow>
<TableCell rowSpan={2}>Approve</TableCell>
<TableCell rowSpan={2} align="center">Date</TableCell>
<TableCell rowSpan={2} align="center">Emp id</TableCell>
<TableCell rowSpan={2} align="center">Emp Name</TableCell>
<TableCell rowSpan={2} align="center">Shift</TableCell>
<TableCell rowSpan={2} align="center">Cost Center</TableCell>
<TableCell colSpan={2} align="center">In</TableCell>
<TableCell colSpan={2} align="center">Out</TableCell>
<TableCell rowSpan={2} align="center">Action</TableCell>
</TableRow>
<TableRow>
<TableCell align="center">Time</TableCell>
<TableCell align="center">Date</TableCell>
<TableCell align="center">Time</TableCell>
<TableCell align="center">Date</TableCell>
</TableRow>
</TableHead>
How can I achieve this same design in material-table
?
Best Answer
You can use the components property of material-table to create custom header.
DEMO: codesandbox link