Material-ui: [Table] Fixing head in material

[hassansidhu]

For Fixing table Head in material 1.0.0 11 alpha

I have a table with scrolling rows but I am not able to fix the header.
Is there a property to do so as fixedHeader was in material 0.15 and up but there doesnt seem to be something similar in 1.0.0 version

Versions

• Material-UI: 1.0.0-alpha 11
• React: 15.4.2

[nareshbhatia]

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.

[slim-hmidi]

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

[kallebornemark]

Would be really nice to have this feature back!

[mariorubinas]

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.

[mbrookes]

@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.

[asrane]

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

[mbrookes]

@asrane Looking forward to your pull request.

[tambling]

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.

[mbrookes]

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

[oliviertassinari]

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

[alexsinfarosa]

@oliviertassinari Thanks, It works.

[pranayyelugam]

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

[mbrookes]

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

[pranayyelugam]

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

[donovanclarke]

@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,
  }

[oliviertassinari]

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

[ryanpcmcquen]

@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?

[ryanpcmcquen]

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

[maelp]

Doesn't seem to work on Chrome

[ryanpcmcquen]

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!

[koutsenko]

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

[jlil]

Bump!

[mhidalgop]

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

[ryanpcmcquen]

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

[mhidalgop]

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

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

[ryanpcmcquen]

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

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

[mhidalgop]

Finally I have resolved my problem using this solution:

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

Thxs!
:)

[halcwb]

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.

[mhidalgop]

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.

[tiavina-mika]

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

[victorvilaca]

+1

[gsouf]

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

    height: 100%;
    overflow-y: auto;