How can I have two headers columns for the same column in a material UI table?

Issue

I have a simple Material UI table, that will have what looks like a header cell in it's last column. However, I would like that this last header share the column with the header right before it.

Think of it like this: it will be 4 headers on the top, but only 3 columns, and the last two headers share the same column.

Not sure if I am making sense, so here is a sample app to illustrate what I mean.

Solution

you can collapse the Data row like this

<Table className={classes.table}>
  <TableBody>
    <TableRow>
      <TableCell>Data 1</TableCell>
      <TableCell>Data 2</TableCell>
    </TableRow>
    <TableRow>
      <TableCell colSpan={2}>Data Two Columns</TableCell>
    </TableRow>
  </TableBody>
</Table>

Answered By - Dawood Ahmad