Material-ui: [Table] Allow multiple header rows (Group)

[Rodman-Sw]

It would be great if you could add possibility to have multiple header rows

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

Summary 💡

The output table should have multiple header rows, it should look something like this:

Motivation 🔦

I need this to see how an item behaved in time

     |     Date 1    |     Date 2    | ...
Item | price | sales | price | sales | ... 

[oliviertassinari]

What about?

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';

const useStyles = makeStyles({
  root: {
    width: '100%',
    overflowX: 'auto',
  },
  table: {
    minWidth: 650,
  },
});

function createData(name: string, calories: number, fat: number, carbs: number, protein: number) {
  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),
];

export default function SimpleTable() {
  const classes = useStyles();

  return (
    <Paper className={classes.root}>
      <Table className={classes.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell />
            <TableCell align="center" colSpan={2}>
              Data 1
            </TableCell>
            <TableCell align="center" colSpan={2}>
              Data 2
            </TableCell>
          </TableRow>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat&nbsp;(g)</TableCell>
            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
            <TableCell align="right">Protein&nbsp;(g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map(row => (
            <TableRow key={row.name}>
              <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>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Paper>
  );
}

[Rodman-Sw]

This can work. Didn't know you can put two TableRow in a TableHead I will try it

Thanks!

Also I think this have to be part of the docs

[oliviertassinari]

Agree, it's something to document, and potentially to improve the UI.

[XDini117]

Hi (: I tried to do it with my example but a white line appeared between the head rows... tried to change the theme, even styles and got nothing... any advice?

The same with the example edited in CodeSandbox

[XDini117]

I finally found the solution, It was that tiny pixel...

MuiTableCell: {
      head: {
        borderBottom: 0
      }
}

[adeelibr]

Agree, it's something to document, and potentially to improve the UI.

Can I add a new demo with multiple Table header rows, if that's okay? @oliviertassinari

[rayy-lo]

Hello! Is anyone working on this? This is my first contribution and would like to give this a shot.

[oliviertassinari]

Note that we have a higher level API in the pipeline for column grouping: https://github.com/mui-org/material-ui-x/issues/195.