Material-ui: [Table] Add colSpan and rowSpan props

[Abbo44]

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Allows a single table cell to span the width of more than one cell or column.
Allows a single table cell to span the height of more than one cell or row.

Current Behavior

In the doc, every cells have one column and one row.

Examples

Example of rowspan="2" for "Favorite" cell.

Example of colspan="3" for "Subtotal" and "Total" cell.

Context

Sometimes it makes sense for a cell to span multiple columns or multiple rows. This might be used for a header cell that titles a group of columns, or a side-bar that groups rows of entries.

[oliviertassinari]

@Abbo44 It's already supported. We have had multiple time this question in the past: https://github.com/mui-org/material-ui/issues?q=is%3Aissue+colSpan+is%3Aclosed. We could add an example in the documentation. We are using this feature at work:

[Abbo44]

Hi @oliviertassinari, thank you for your quick answer.
My apologize, I didn't look well for issues.

11233 answer my question, but in the doc colspan or rowspan props isn't mention at all.

https://material-ui.com/api/table-cell/

It could be a good idea to reference those props and add maybe a quick example.

[oliviertassinari]

We don't reference native properties in the API docs section.The list is very long.

[Abbo44]

Oh you implemented native table properties element in Table related Components ?! That's great !

[juphamzipit]

I'm not sure if I am doing something wrong but Typescript does not seem to know that colSpan is a prop for TableCell

[oliviertassinari]

@juphamzipit Something might be wrong with your setup, I have no issue with TypeScript:

          <TableHead>
            <TableRow>
              <TableCell colSpan={2}>Dessert (100g serving)</TableCell>
              <TableCell numeric>Calories</TableCell>
              <TableCell numeric>Fat (g)</TableCell>
              <TableCell numeric>Carbs (g)</TableCell>
              <TableCell numeric>Protein (g)</TableCell>
            </TableRow>
          </TableHead>

[sakulstra]

i'm going to add an example to the docs in the coming days

[DC7T3xer]

Who else realised that colSpan is case-sensitive? 😄