Material-table: Sticky Header & Sticky Scrollbars

Created on 12 Jun 2019  路  2Comments  路  Source: mbrn/material-table

Is your feature request related to a problem? Please describe.
Yes.
There is currently no easy way to make the table header sticky. There is also not an easy way to make the horizontal scrollbar visible at all times.

Describe the solution you'd like
I'd like to make the \ wrapper scrollable horizontally. I'd also like to be able to style the header using the headerStyle option such that I can apply a sticky style. I think I found a solution that solves both of these issues - see additional context.

Additional context
If you omit the styles of the \

wrappers in src/material-table.js then I am able to solve both issues. The wrappers can be found on lines 495 and 584 and are shown to be applying 'overflowX: auto' and 'overflowY: auto'.
After these styles are omitted, one would be able to style the outermost container using options={{ style: { overflow: scroll, height: 500px }}} which would allow the horizontal & vertical scrollbars to be shown at all times :).
Furthermore, the aforementioned problem of making the header cells sticky can then be solved by using options={{ headerStyle: { position: sticky, top: 0 }}.

help wanted
Source
picture karrettgelley

Most helpful comment

The reason I closed it is because there is a very easy solution that I found. First you need to set the header style to sticky:

options={{ headerStyle: { position: 'sticky', top: 0 } }}

This alone does not do anything. Next you need to set the body height of the table in order to trigger a vertical scrollbar to appear:

options={{ headerStyle: { position: 'sticky', top: 0 }, maxBodyHeight: '650px' }}

picture karrettgelley on 18 Jul 2019
👍10 🎉1

All 2 comments

The reason I closed it is because there is a very easy solution that I found. First you need to set the header style to sticky:

options={{ headerStyle: { position: 'sticky', top: 0 } }}

This alone does not do anything. Next you need to set the body height of the table in order to trigger a vertical scrollbar to appear:

options={{ headerStyle: { position: 'sticky', top: 0 }, maxBodyHeight: '650px' }}

karrettgelley picture karrettgelley on 18 Jul 2019
👍10 🎉1

For anyone wanting to avoid hard-coding the maxBodyHeightand make it responsive if the window is resized, hooks help make this pretty straightforward to implement.

Take a look at the: useWindowResize hook (from: https://codesandbox.io/react-hooks) and adjust according to your needs. I take the height property then subtract an offset for the page header, and pass that into maxBodyHeight, e.g. 

const { height } = useWindowResize();
...
maxBodyHeight: height - 48

You could use refor react-dom to get the header elements and find their heights instead of hard-coding the offset if you preferred.

edwardmcleodjones picture edwardmcleodjones on 16 Dec 2019
👍4
Was this page helpful?
0 / 5 - 0 ratings

Related issues

victorwvieira picture victorwvieira  路  3Comments
Likurg2010 picture Likurg2010  路  3Comments
balibou picture balibou  路  3Comments
Mihier-Roy picture Mihier-Roy  路  3Comments
rasheedb picture rasheedb  路  3Comments