React-table: column not aligned

[maxmoeschinger]

Problem Description

When creating a table with scroll the column header and content is not aligned.

Steps to Reproduce

1. Go to example at https://react-table.js.org/#/story/fixed-header-w-vertical-scroll

System Information

• Browser: Chrome 58.0.3029.110

[tannerlinsley]

This is a known issue we are tracking internally. There is a quick fix right now you can use by applying overflow-y: scroll to the .rt-thead class. This should add a scrollbar to the header and align things temporarily.

[karankumar89]

Is there a permanent fix for this?

[noam3127]

In case this helps anyone, here's how I manually adjust the column headers to be aligned, by having the header rows' margin-right equal to the width of the body's scrollbar :

````
adjustHeaders() {
const tableBody = document.querySelector('.rt-tbody');
const tBodyWidth = tableBody.clientWidth;
const tBodyStyle = window.getComputedStyle(tableBody);
const tBodyOuterWidth = parseInt(tBodyStyle.width.slice(0, -2));
const headerRows = document.querySelectorAll('.rt-thead > .rt-tr');

    const margin = tBodyWidth < tBodyOuterWidth ?
         tBodyOuterWidth - tBodyWidth :
         0;

    headerRows.forEach(r => {
        r.style.marginRight = margin + 'px';
    });

}
``` I call this method fromcomponentWillMount()andcomponentWillReceiveProps()` (which is necessary for my use case, but may not be necessary for everyone), as well as set it to be a debounced listener for a window resize event.

[zemagnifique]

Here is how I solve this problem using css only without showing the extra scroll bars on the headers:

.ReactTable .rt-thead {
    overflow-y: scroll;
}

.ReactTable .rt-thead::-webkit-scrollbar {
   background: transparent; 
} 

This only works in Webkit browsers so: Chrome, Safari and Opera, in the others the scroll bar will still show

[gary-menzel]

My recommendation is to avoid using the height to set a scroll bar for the following reasons:

• react-table is a page-based table (not a scrollable table)
• the scrolling (while possible with the height setting) has not be properly integrated into the package and only works reliably for a very specific set of use-cases

NOTE: react-table needs to an arcihtecture design to stay "true" to React and the original design to properly incorporate a vertical scroll bar - and may then not even be what it was originally intended to be

[jhaenchen]

We badly need a solution to this problem

[Ryanwiz]

I ended up with something slightly different - tho build upon - @noam3127's answer.

componentDidUpdate() {
    this.adjustHeaders();
}

adjustHeaders = () => {
        const tableBody = document.querySelector('.rt-tbody');
        if (tableBody) {
            const tBodyWidth = tableBody.clientWidth;
            const tBodyStyle = window.getComputedStyle(tableBody);
            if (tBodyStyle && tBodyStyle.width) {
                const tBodyOuterWidth = parseInt(tBodyStyle.width.slice(0, -2), 0);
                const headerRows = document.querySelectorAll('.rt-thead > .rt-tr');

                if (headerRows) {
                    const margin = tBodyWidth < tBodyOuterWidth ?
                        tBodyOuterWidth - tBodyWidth :
                        0;

                    headerRows.forEach(r => {
                        r.style.marginRight = margin+1 + 'px';
                    });
                }
            }
        }
    }

[mbkupfer]

I have an alternative hack to fixing this, and that is simply removing all scroll bars (or more technically speaking, the appearance of there being one). My issue with both of the code solutions above is that they didn't work in IE, which I unfortunately have to always ensure is compatible with my apps.

That said, below is the css solution I'm using (I can confirm that it works in FF, IE and Chrome):

.ReactTable .rt-thead {
   overflow-y: scroll;
   scrollbar-width: none;

   /* IE properties (edit this according to your background color) */
   scrollbar-track-color:  #FFF;
   scrollbar-3dlight-color:  #FFF;
   scrollbar-darkshadow-color:  #FFF;
   scrollbar-arrow-color:  #FFF;
}

.ReactTable .rt-tbody {
   scrollbar-width: none;
}

.ReactTable .rt-thead::-webkit-scrollbar { 
  background: transparent; 
}

[er-parag91]

for me only this adding this class worked like charm

.ReactTable .rt-tbody .rt-td{
margin-left: 0;
}

[willbee28]

@zemagnifique Your css rules worked until I realized clicking the headers for filtering multiple times in a row causes the top black line above the header to flicker. Pretty strange side effect. Do you have any idea how to fix this/why it is happening?

[zemagnifique]

@willbee28 it's been working for me for a year plus with that CSS. I'm not able to reproduce the issue. Can you provide steps to reproduce or a jsfiddle?

[willbee28]

@zemagnifique Turns out it was a problem with one of my css rules. Using a different font causes you the need to add more padding than the default for the headers. Thanks anyway!