[DataGrid] Implement Column groups

[mchelen]

The fixed header option in https://material-ui.com/components/tables/#fixed-header is not compatible with multiple header rows from this example https://github.com/mui-org/material-ui/blob/master/docs/src/pages/components/tables/SpanningTable.js

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The second header row is sticky, but not the first.

Expected Behavior 🤔

Both first and second header row should be sticky.

Steps to Reproduce 🕹

Steps:

1. Create a <Table> with stickyHeader prop (reference: https://material-ui.com/components/tables/#fixed-header )
2. Create multiple <TableRow> inside <TableHead> (reference: https://github.com/mui-org/material-ui/blob/master/docs/src/pages/components/tables/SpanningTable.js )
3. Scroll down, and second <TableRow> content will replace first

https://codesandbox.io/s/material-demo-vo8qp

Context 🔦

We want to display a table with multiple header rows, and have all those rows be fixed "sticky" when scrolling.

Your Environment 🌎

Tech	Version
Material-UI	v4.5.1
React	16.11.0
Browser	Chrome

[oliviertassinari]

@mchelen Thanks for the feedback. It's not supported with the stickyHeader prop. I think that it's something we should support in the upcoming data tables component. In the meantime, you would need to use 2 <tables> elements.

[oliviertassinari]

As a workaround, you can do

            <TableRow>
              {columns.map(column => (
                <TableCell
                  key={column.id}
                  align={column.align}
-                 style={{ minWidth: column.minWidth }}
+                 style={{ minWidth: column.minWidth, top: 57 }}
                >

https://codesandbox.io/s/material-demo-r1p51

[mchelen]

Thanks, that's what we did but when scrolling the second header row overwrites the first one.

[oliviertassinari]

@mchelen Can you reproduce this issue with the codesandbox I have provided in my previous comment?

[mchelen]

Oh cool, yeah that works! I was looking at your sandbox and that change wasn't saved there. Here it is with the change: https://codesandbox.io/s/material-demo-r1p51

[oliviertassinari]

Moving to #195

[ndtreviv]

Why is this issue title prefixed with [DataGrid] when it's not about DataGrid at all?