Fixed header and horizontal scrolling misallinged column names

[ProcopVladimirAlexandru]

Issue Type (delete the irrelevant ones)

• [x] Bug

Specs

What version are you using? 2.19.1 (latest) What browser? Mozilla Firefox and Google Chrome

Expected Behavior

What did you expect to happen? When using fixed header and a wider table that requires horizontal scrolling I expected that the column names in the header will match the actual columns being horizontally scrolled through.

Actual Behavior

What actually happened? The header column names do not allign properly and have wrong width when scrolling horizontally.

Steps to Reproduce the Problem

Please detail your steps here

1. Use vue good table with fixed header
2. Populate the table with a dataset with many wide columns
3. There is a scroll bar for header and one for actual data instead of a single data scroll which simultaneously scrolls through the header.

Thank you for your help and this very good package!

[TheJaredWilcurt]

This will be very difficult to resolve as it is caused by the size of the scrollbar itself which varies depending on platform and browser. Specifically a scrollbar appears in one part of the table, but not another.

Two solutions I've seen before for this:

• Force a scrollbar on all sections, so that they are all offset the same amount and therefor aligned
  • Easier, though may look a little clunky
• Use a JS/DOM based scrollbar rather than a native one, so that the scrollbar does not effect the layout at all.
  • Would require a lot of extra effort to make sure it is still full accessible, since scrollbars are extremely useful for those using different input devices, or with mobility issues.
  • Would require extra effort to make sure with works on touch devices properly.
  • Likely best to pull in an established library that handles these concerns, but would increase dist size of Vue-Good-Table

[jstaerk]

Really a great library, thanks. Except for this issue 😢 .

A "Javascript scrollbar" (e.g. https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp) does not seem to help for me and if there were scrollbars on all sections there would still be one for the head row and another one for the content which would be out of sync as soon as the first one is operated, wouldn't it?

Attached a screenshot of this https://codepen.io/jstaerk/pen/WNZYOJR at 866px width demonstrating the issue: the horizontal scroll bar operates independently from the table header, so after scrolling, the columns don't match their headers any more.

[yogithesymbian]

ah i found alternative solution , tried to re render when screen has on change. my issue came from sidebar collapse so i need to watch the change or added a button for re-render only for good table

      <!-- table -->
      <vue-good-table
        :key="yoRender" // here is the alternative...
>

[cwilby]

See https://github.com/xaksis/vue-good-table/issues/373#issuecomment-1464514347

You can use position: sticky with some extra styling.