[Table] Fixing head in material #6625

hassansidhu · 2017-04-16T19:46:13Z

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 · 2017-04-28T08:33:19Z

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 · 2017-10-19T10:29:46Z

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

kallebornemark · 2018-02-08T12:32:29Z

Would be really nice to have this feature back!

mariorubinas · 2018-02-13T16:37:18Z

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 · 2018-02-13T17:01:02Z

@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 · 2018-03-12T21:43:23Z

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

mbrookes · 2018-03-13T10:47:29Z

@asrane Looking forward to your pull request.

tambling · 2018-03-22T22:28:32Z

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 · 2018-03-23T21:13:45Z

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

oliviertassinari · 2018-04-16T19:57:55Z

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 · 2018-04-25T16:45:04Z

@oliviertassinari Thanks, It works.

pranayyelugam · 2018-05-14T14:25:38Z

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

mbrookes · 2018-05-14T15:37:45Z

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

pranayyelugam · 2018-05-18T05:17:53Z

@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 · 2018-05-23T13:56:18Z

@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 · 2018-06-03T18:31:09Z

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

ryanpcmcquen · 2018-07-13T16:21:55Z

@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 · 2018-07-13T17:17:51Z

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

maelp · 2018-09-07T12:00:03Z

Doesn't seem to work on Chrome

ryanpcmcquen · 2018-09-07T14:28:59Z

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 · 2018-09-19T10:41:04Z

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

jlil · 2019-01-06T19:45:35Z

Bump!

mhidalgop · 2019-01-09T14:48:22Z

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

ryanpcmcquen · 2019-01-09T15:25:04Z

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

mhidalgop · 2019-01-09T15:52:55Z

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

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

ryanpcmcquen · 2019-01-09T15:56:33Z

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

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

mhidalgop · 2019-01-10T09:04:18Z

Finally I have resolved my problem using this solution:

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

Thxs!
:)

halcwb · 2019-02-20T11:13:38Z

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 · 2019-02-20T11:59:37Z

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 · 2019-03-15T08:50:28Z

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

gsouf · 2020-04-07T18:38:19Z

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

    height: 100%;
    overflow-y: auto;

archfz · 2022-02-22T14:46:14Z

For anyone else trying to find a good solution that would allow sticky table header over both horizontal and vertical scrolling, I recommend you try: https://github.com/archfz/vh-sticky-table-header

nichita-pasecinic · 2022-06-26T15:24:09Z

Hi, couldn't really find any good solution to have a sticky header on Table and a scrollable TableBody ?

The solution proposed by @oliviertassinari

position: "sticky",
top: 0,
zIndex: 100

Does not solve the issue with the scrollable TableBody (scroll container should be the TableBody and do not include the header row, when stickyHeader=true), so why then it is a duplicate of #12014 (comment) ?

@oliviertassinari could you please help and reopen issue #12014 ?

ryanpcmcquen · 2022-06-26T16:15:11Z

Hi, couldn't really find any good solution to have a sticky header on Table and a scrollable TableBody ?

The solution proposed by @oliviertassinari
position: "sticky",
top: 0,
zIndex: 100
Does not solve the issue with the scrollable TableBody (scroll container should be the TableBody and do not include the header row, when stickyHeader=true), so why then it is a duplicate of #12014 (comment) ?

@oliviertassinari could you please help and reopen issue #12014 ?

Use two tables:
#6625 (comment)

nichita-pasecinic · 2022-06-26T16:37:29Z

@ryanpcmcquen it would mess up the cells alignments, check-out this one - https://codesandbox.io/s/8kw39m1278

Ashish-21 · 2022-10-20T10:57:17Z

@ryanpcmcquen it would mess up the cells alignments, check-out this one - https://codesandbox.io/s/8kw39

Hi, couldn't really find any good solution to have a sticky header on Table and a scrollable TableBody ?

The solution proposed by @oliviertassinari
position: "sticky",
top: 0,
zIndex: 100
Does not solve the issue with the scrollable TableBody (scroll container should be the TableBody and do not include the header row, when stickyHeader=true), so why then it is a duplicate of #12014 (comment) ?

@oliviertassinari could you please help and reopen issue #12014 ?

You got any work around this?
If yes can you please help

mbrookes added the component: table This is the name of the generic UI component, not the React module! label Apr 16, 2017

oliviertassinari added the next label May 21, 2017

oliviertassinari changed the title ~~Fixing table Head in material 1.0.0 alpha~~ [Table] Fixing head in material 1.0.0 alpha Jun 24, 2017

oliviertassinari added the new feature New feature or request label Jun 24, 2017

oliviertassinari changed the title ~~[Table] Fixing head in material 1.0.0 alpha~~ [Table] Fixing head in material Jul 30, 2017

oliviertassinari removed the v1 label Oct 11, 2017

oliviertassinari mentioned this issue Oct 18, 2017

How to make the cell of table fix #8738

Closed

thorjarhun mentioned this issue Jan 4, 2018

Allow user to render their own wrapper (useful for tables) clauderic/react-tiny-virtual-list#30

Closed

oliviertassinari mentioned this issue Apr 16, 2018

[Table] fixed header in v1 #11034

Closed

oliviertassinari mentioned this issue Jun 29, 2018

TableBody does NOT vertically scroll #12014

Closed

2 tasks

This comment has been minimized.

Sign in to view

oliviertassinari added the priority: important This change can make a difference label Aug 21, 2019

This was referenced Aug 26, 2019

<Table>Fixed Head && horizontal scroll #7311

Closed

[Table] Add sticky header support #17139

Merged

eps1lon closed this as completed in #17139 Aug 28, 2019

[Table] Fixing head in material #6625

[Table] Fixing head in material #6625

Comments

hassansidhu commented Apr 16, 2017

For Fixing table Head in material 1.0.0 11 alpha

Versions

nareshbhatia commented Apr 28, 2017

slim-hmidi commented Oct 19, 2017

kallebornemark commented Feb 8, 2018

mariorubinas commented Feb 13, 2018

mbrookes commented Feb 13, 2018

asrane commented Mar 12, 2018

mbrookes commented Mar 13, 2018

tambling commented Mar 22, 2018

mbrookes commented Mar 23, 2018

oliviertassinari commented Apr 16, 2018 • edited

alexsinfarosa commented Apr 25, 2018

pranayyelugam commented May 14, 2018

mbrookes commented May 14, 2018

pranayyelugam commented May 18, 2018 • edited

donovanclarke commented May 23, 2018

oliviertassinari commented Jun 3, 2018

ryanpcmcquen commented Jul 13, 2018

ryanpcmcquen commented Jul 13, 2018

maelp commented Sep 7, 2018

ryanpcmcquen commented Sep 7, 2018 • edited

koutsenko commented Sep 19, 2018 • edited

jlil commented Jan 6, 2019

mhidalgop commented Jan 9, 2019

ryanpcmcquen commented Jan 9, 2019

mhidalgop commented Jan 9, 2019

ryanpcmcquen commented Jan 9, 2019 • edited

mhidalgop commented Jan 10, 2019 • edited

halcwb commented Feb 20, 2019

mhidalgop commented Feb 20, 2019

tiavina-mika commented Mar 15, 2019

This comment has been minimized.

gsouf commented Apr 7, 2020

archfz commented Feb 22, 2022 • edited

nichita-pasecinic commented Jun 26, 2022

ryanpcmcquen commented Jun 26, 2022

nichita-pasecinic commented Jun 26, 2022 • edited

Ashish-21 commented Oct 20, 2022

oliviertassinari commented Apr 16, 2018 •

edited

pranayyelugam commented May 18, 2018 •

edited

ryanpcmcquen commented Sep 7, 2018 •

edited

koutsenko commented Sep 19, 2018 •

edited

ryanpcmcquen commented Jan 9, 2019 •

edited

mhidalgop commented Jan 10, 2019 •

edited

archfz commented Feb 22, 2022 •

edited

nichita-pasecinic commented Jun 26, 2022 •

edited