Virtualized Rows (React-Window): crooked columns

[AndreyMZ]

Describe the bug (required)
See the screenshot.

Provide an example via Codesandbox! (required)
https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/virtualized-rows

Steps To Reproduce (required)
Steps to reproduce the behavior:

1. Go to https://react-table.js.org/examples/ui
2. Scroll down to Virtualized Rows (React-Window)
3. Click on Open in CodeSandbox

Expected behavior (Recommended)
The vertical lines are straight.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Vivaldi (chromium-based)
• Version: 3.0.1874.23

[bmcgary]

I had the same problem. The issue is because the body of the table has a scroll bar and the header doesn't. (I'm going to guess this issue is way more noticeable on a Windows machine since the scroll bars are much bigger than Mac or Linux)

I came up with a work around, I won't say its pretty, but it got my able to continue working.
Basically what I did was get a ref to the FixedSizeList. I then used that to get the width. Then in the dom element with getHeaderGroupProps() I set the maxWidth = tableBodyWidth. This forces the header to be slightly smaller and the columns line up. (Note: I had to use the useStateHook to force a rerender when the height changed).

Then there is the issue of the bottom border not completely covering where the scroll bar is; to fix that I added a border bottom to the table head (the div that wraps {headerGroups.map(....} ). Also had to remove the border on each cell in the table header (otherwise the two border clash).

Like I said, not the easiest thing, but it fixed the issue.

Heres a codesandbox. https://codesandbox.io/s/friendly-albattani-pkn22?file=/src/App.js
The one issue I ran into here that I didn't have to deal with in my project was the multi row header. The first row doesn't have a border that extends all the way over. If you only need one row for a header then hopefully the codesandbox will help you out. If you need more than one row in the header then hopefully this gets you started. I tried to mark the places I made changes with large /******* comments.

[tannerlinsley]

Since this is a UI question, I've converted it into a discussion. React Table doesn't prescribe any UI implementations, so this is all user-land.