enabling fixedHeader and having columns with dynamic width causes the table header row to be misaligned with the body rows

[muubar]

First of all, thank you for the great effort, I've been using RDT at work for a while now, so again, thank you.

Describe the bug

when I enable fixedHeader the table body is set to have overflow-y: scroll, which will always show the vertical scrollbar, this is a correct behavior, however, this causes the content width of the header row to be larger than the content width of body rows, this happens because the scrollbar is taking up space from the table body row as well.
this starts to be a problem if I have grow: '1' on some of my columns, which means we now have column's with dynamic width, but now the width of the column head is no longer equal to the cells width under the same column, because again, the overall width of the header row is larger than the width of the body row.
this whole issue can be simply solved by adding padding-right: SCROLLBAR_WIDTH to the header row.

To Reproduce

Steps to reproduce the behavior:

1. add columns with width only, and others with minWidth and grow, and have fixedHeader enabled
2. fill the headers with any data, and do the same for the body
3. notice how the columns with dynamic width are not aligning correctly with the body below them

Expected behavior

I expect each column header to align correctly with the cells in the body that are under the same column

Code Sandbox

https://codesandbox.io/s/react-data-table-sandbox-2m8l9

Screenshots

1)

2)

3)

Versions

• React: 16.8.6
• Styled Components: 4.4.0
• OS: windows 10
• Browser: Chrome
• Version: 79.0.3945.88

[jbetancur]

You're welcome! I'll have a look at this. I will be completely honest in that the fixedHeader feature is not feature complete so it could use some TLC

[muubar]

@jbetancur I think you might find using this hook useful if you decide to fix it the way I suggested, another solution I was thinking of is to wrap the table body inside a div, and let that div have a height that is equal to the table body's height, and then let this new div handle the overflowing content with a scrollbar, this way the scrollbar will be right outside the body of the table instead of inside of it; something like this

[jbetancur]

@muubar I think I like the idea of enhancing the existing TableWrapper do to this so the scroll bar is outside of the entire table. Then, using position sticky on the table header. The only obvious issue, of course, is that IE11 users can't use fixedHeader, but I think that's fine

[sjbr]

if I add padding-right to the headrow the leftmost colums are misaligned to the left. So that workaround doesn't fix the issue for me

[danspyer]

@jbetancur Would you mind if I submitted a pull request to make the table header utilise the sticky positioning? We've been using this component at my workplace and I've already done this but utilising the css classes to change the behavior.

[jbetancur]

I finally have a fix for this. It will be available in v7.0.0-rc6 sometime today or latest this week.

[jbetancur]

@danspyer I did not hear back from you on the PR you submitted #737 so it auto closed, but just wanted to call out that some of what you suggested is being implemented here just on the ResopnsiveWrapper and along with some refactor that was originally in the scope of your PR