React-table: React table with height and vertical scroll breaks the header positioning

[tgreen7]

In the example https://react-table.js.org/#/story/fixed-header-w-vertical-scroll
I see that the code
.ReactTable .rt-thead { overflow-y: scroll; }
has been added to offset the scrollbar on the table. However, if you change the number of rows to 5 so that there is no longer a scrollbar on the table then the header will be offset like in the screenshot.

[gary-menzel]

Unfortunately, not much has been done to support the ability for the vertical height situation (the internal design is barely aware of it). It may take a considerable amount of effort to make this work so I suspect "fixing" it is going to be a low priority.

There may be a workaround by using one of the get...Props callbacks to dynamically adjust the style (but this would be up to each user to implement as it would depend on each use case).

[tgreen7]

Hmm interesting @gary-menzel

I wonder if we could look into how other tables manage to support vertical scrollbars while keeping the columns and headers from getting unaligned. That would ideally be the best solution in my opinion (so that little piece of code .ReactTable .rt-thead { overflow-y: scroll; } wouldn't be needed)

I know that react-table uses flexbox so maybe we could find another example of a flexbox styled table and copy their implementation.

What are your thoughts?

Thanks!

[gary-menzel]

I think there are more issues than that. ReactTable was not designed to "scroll" vertically in the first place (it is based on a paging model). I'd need to check but the height was probably added under pressure from desktop users (as it causes problems in a mobile environment).

But PRs are welcome if they reliably address minor issues like this with cross-browser compatible solutions. There is an expectation that ReactTable will look at moving to grid instead of flex once that has settled across all the browsers.

[tgreen7]

I think I found a temporary fix:
if you add a ref to the table:

<ReactTable
     ref={n => {
        if (n) this.table = n;
     }}
/>

You can then add the class to the header if the table body scrollbar is visible to account for the offset:

componentDidUpdate() {
    const table = ReactDOM.findDOMNode(this.table)
    const tableBody = table.querySelector('.rt-tbody') 
    const headerNode = table.querySelector('.rt-thead.-header') 
    if (headerNode) headerNode.style.overflowY = "inherit"
    if (tableBody && tableBody.scrollHeight > tableBody.clientHeight) {
      if(headerNode) headerNode.style.overflowY = "scroll"
    }
  }

[gary-menzel]

With that approach, you could probably set some state variable flag and also use one of the get..Props functions to fix the header style.

If this was something that happened regularly in your application you could probably code up a HOC to wrap ReactTable that would always perform this (so you don't have to keep adding a componentDidUpdate into your wrapping classes.

[gary-menzel]

@tgreen7 I have not looked any deeper at your workaround but have you considered seeing if this could be done by overriding props with the get....Props set of methods in my last comment?

It would be a lot more reliable than using findDOMNode and could then easily be woven into a HOC.

The only trick may be that the get...Props methods are only selectively provided on key components (not always on the internal content). However, expanding those with a feature request would not be a bad idea if there is a practical use.

[prenaut41]

I found a way to style around this by doing the following:

1. Over-ride .rt-tbody style so that the vertical scroll-bar is always present (even if not needed):
   Doing this in a .css stylesheet with .rt-body{overflow-y:scroll;} did not work, because it seemed to be over-ridden elsewhere. Instead, I had to use this in the render:
   getTbodyProps={ (state, rowInfo, column, rtInstance) => { return { style: { overflowY: 'scroll' } } } }

2. If you don't like the look of having the vertical scroll bar in the header (or footer), you can add css in stylesheet for the following so that the other sections of the rt-table end at the right x position and line-up properly (perhaps the 1.05 factor may be different in other applications, but this worked really well for me, including in different viewport sizes). I also pulled in the pagination section to line up with the header and footer:
   .rt-thead, .rt-tfoot, .pagination-bottom { width: calc(100% - 1.05em); }

[tannerlinsley]

Since this is a question of implementation we invite you to continue the conversation in the react tools slack organization. Thanks! https://react-chat-signup.herokuapp.com/

[rulyotano]

Solved the issue in a very nice way!!! By using perfect-scrollbar-react. The key is that perfect-scrollbar doesn't need extra width for displaying itself.

I think that all this is possible due to the high level of customization that react-table provides. I'm liking it.

[zenimdoyal]

.ReactTable .rt-tbody{
overflow: overlay;
}
This will put the scroll bar on top of the body. It will realign when you filter or reduce the number of rows.