Material-ui: [Table] Fixing head in material

I ran into the same issue today. Version 0.15 had the fixedHeader prop, v 1.x doesn't. I assume that there are plans to get this in.

Same problem with Material-ui v1.0.0-beta.16.

Would be really nice to have this feature back!

Same problem with Material-ui v1.0.0-beta.33

This is a must have feature! I think anyone who works with data grids would agree with me.

@mariorubinas If this feature is important to you, please consider submitting a PR. You can use this issue if you'd like to discuss your approach.

This is a must have feature!! feature worked great in the old MUI version.

@asrane Looking forward to your pull request.

Hey @mbrookes I use the fixed header enough and like everything else about 1.0 enough that I'm going to take a stab at this — do you/the Material-UI organization have a preferred way of fixing table headers? The old fixedHeader was great, but I wasn't the biggest fan of how it made all the columns equal width (table-layout: fixed;), so I was going to try to re-implement it to support dynamic column widths.

@tambling That would be great! support for dynamic column widths would be ideal.

To be noted, the header can be sticky positioned:

// ...

  head: {
    backgroundColor: "#fff",
    position: "sticky",
    top: 0
  }

// ...

        <TableHead>
          <TableRow>
            <TableCell className={classes.head}>

// ...

https://codesandbox.io/s/k0vwm7xpl3

@oliviertassinari Thanks, It works.

@oliviertassinari Buttons in the table cell are overlaying the table header. How to resolve it ?
https://codesandbox.io/s/qx24l9vrz6

@pranayyelugam You will need to adjust the zIndex for your buttons.

@mbrookes What should be the zIndex value for the buttons to appear and function properly ?
Here's the demo
https://codesandbox.io/s/qx24l9vrz6

@pranayyelugam you can easily set the z-index on the sticky header and it will have the expected result you want.

head: {
    backgroundColor: "#fff",
    position: "sticky",
    top: 0,
    zIndex: 10,
  }

For benchmarking purposes: https://vuematerial.io/components/table.

@oliviertassinari, that won't work on IE 11 though, right? Technically Material UI supports IE 11. Is there a solution that will work with IE 11?

Does anyone have a solution for fixing the header of a table inside a <Dialog> component? position: sticky is not working.

Doesn't seem to work on Chrome

I have a fixed header in this component: https://github.com/SurLaTable/slt-ui/blob/develop/src/ComparisonChart/ComparisonTable/ComparisonTable.js

Material UI 3.x.x!

Still no fixed header? IMO its important feature..)

Bump!

Any idea about this? I'm using Material Table, but I'm not able to fix the header when the scroll shows up.

Just use two tables like in my example, @mhidalgop.

Just use two tables like in my example, @mhidalgop.

Sorry, but it's not work for me :(

Sorry, but it's not work for me :(

@mhidalgop, mind sharing your example in something like CodeSandbox?

Finally I have resolved my problem using this solution:

head: {
    backgroundColor: "#fff",
    position: "sticky",
    top: 0,
    zIndex: 10,
  }

Thxs!
:)

To be noted, the header can be sticky positioned:

// ...

  head: {
    backgroundColor: "#fff",
    position: "sticky",
    top: 0
  }

// ...

        <TableHead>
          <TableRow>
            <TableCell className={classes.head}>

// ...

https://codesandbox.io/s/k0vwm7xpl3

This works fine on a desktop browser, however, on mobile browsers it doesn't work.

To be noted, the header can be sticky positioned:

// ...

  head: {
    backgroundColor: "#fff",
    position: "sticky",
    top: 0
  }

// ...

        <TableHead>
          <TableRow>
            <TableCell className={classes.head}>

// ...

https://codesandbox.io/s/k0vwm7xpl3

This works fine on a desktop browser, however, on mobile browsers it doesn't work.

I'm using this solution in a web app, and in a tablet with Chrome it works fine.

the sticky does not work for me, so any other solution on how to fix the table header?

+1

Worked for me when applying this style to the <TableContainer>

    height: 100%;
    overflow-y: auto;