Columns are not aligned in the virtualized rows example

[OmarSkalli]

Using v7?

YES

In the virtualized row example, the rows and header columns are not aligned. I am not sure if this is a recent regression, or if that was always the behavior in the example.

Steps to reproduce the behavior:

Example: https://github.com/tannerlinsley/react-table/tree/master/examples/virtualized-rows
Code Sandbox: https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/virtualized-rows

Screenshot:

[ZimboQC]

Hi,
It is due to the scrollbar width. You can add a margin to your last cell of the header with:

.th {
      &:last-of-type {
        margin-right: 17px;
        .resizer {
          ${'' /* note that the 15 is the scroll width and if also referenced in the getHeaderGroupProps for the header row below */}
          ${'' /* todo: resolve this value dynamicaly from element.scrollWidth to account for OS/Browser differences  */}
          right: -10px;
        }
      }
    }

[gyto23]

@ZimboQC this is not good potential fix for the table to use, and Mac and Windows width of the scroll bar is different in almost 20px which doesnt fix for both at all. Also you cannot make it work properly because sometimes Mac's scrollbar might not be displayed due to user preferred settings.

@chetane I am currently wrestling with same behavior for my table and I am trying to use different windows virtualization and stick the header in to it. My potential solution is to move header to the virtualize row.

@tannerlinsley any suggestions?

[gyto23]

@chetane current option I found after looking more into react-window where you can make a sticky option off the row you wanted is here.

[tannerlinsley]

You can also manually force a scroll-bar to appear on your headers by making them overflow: scroll. Other than that, there is not a good story to solve this as it's simply a limitation of how browsers and OSs implement their scrollbars and the styles around them.

[sumitkr003]

I know this has been closed now.
I was also having this problem. I tried the above two ways suggested. Both have their limitations.
another way to fix this is to use custom scrollbars (which have a very less width) for react-window.
react-window issue link: bvaughn/react-window#110
sandbox for custom scrollbar: https://codesandbox.io/s/vmr1l0p463?file=/index.js