material ui - MaterialUI Table rows with different amount of cells aligned

Question

I am trying to create a table where I essentially have two headings of different cell size and the items in the table must follow the second heading, like this:

       **Main Heading 1**         |         **Main Heading 2**
sub 11 | sub 12 | sub 13 | sub 14 | sub 21 | sub 22 | sub 23 | sub 24 
item   | item   | item   | item   | item   | item   | item   | item
...

I have tried with the following structure

<Table size="small" aria-label="stock-flow">
<TableHead>
    <TableRow>
    <TableCell>Main Heading 1</TableCell>
    <TableCell>Main Heading 2</TableCell>
    </TableRow>

    <TableRow>
    <TableCell>Sub 11</TableCell>
    <TableCell>Sub 12</TableCell>
    <TableCell>Sub 13</TableCell>
    <TableCell>Sub 14</TableCell>
    <TableCell>Sub 21</TableCell>
    <TableCell>Sub 22</TableCell>
    <TableCell>Sub 23</TableCell>
    <TableCell>Sub 24</TableCell>
    </TableRow>
</TableHead>
<TableBody>
    <TableRow>
    <TableCell>Item 11</TableCell>
    <TableCell>Item 12</TableCell>
    <TableCell>Item 13</TableCell>
    <TableCell>Item 14</TableCell>
    <TableCell>Item 21</TableCell>
    <TableCell>Item 22</TableCell>
    <TableCell>Item 23</TableCell>
    <TableCell>Item 24</TableCell>
    </TableRow>
</TableBody>
</Table>

But that aligns Main heading 1 and Main Heading 2 above sub11 and sub12 and leaves 6 empty spaces after that.

I essentially want to have 2 "main" columns and a way to create whatever sizes of columns/rows I want in each of them.

EDIT: I found the answer, I have to use the colSpan property and give it a value of the amount of cells that I want to have underneath the main heading, so both headings get colSpan={4}

Answer 1

I found the answer, I have to use the colSpan property and give it a value of the amount of cells that I want to have underneath the main heading, so both headings get colSpan={4}