Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

React table with height and vertical scroll breaks the header positioning

See original GitHub issue

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.

Issue Analytics

State:
Created 6 years ago
Reactions:2
Comments:10 (4 by maintainers)

Top GitHub Comments

24reactions

ghostcommented, Nov 6, 2018

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

9reactions

rulyotanocommented, Jun 8, 2018

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.

Top Results From Across the Web

React table with height and vertical scroll breaks the header ...

I think there are more issues than that. ReactTable was not designed to "scroll" vertically in the first place (it is based on...

React-Table - Fixed Header + Vertical Scroll - CodeSandbox

CodeSandbox is an online editor tailored for web applications.

<table> with fixed <thead> and scrollable <tbody> [duplicate]

have fixed header (not scrollable; not sticky) have scrollable <tbody> (scrollbar may be always visible) header and body would handle resizing properly and...

How to create a table with fixed header and scrollable body

The position property states the type of positioning for an element. The display property states that how an element should be displayed.

So hard to make table header sticky - DEV Community ‍ ‍

Scrolling horizontally at the same time would be tricky with my hacky approach as the header and table no longer syncs position. While...