React-table: Columns and Headers are misaligned

[elbrus]

1. open existing sample: https://react-table.js.org/#/story/fixed-header-w-vertical-scroll
2. you'll see that because of the scrollbar columns moved left

are you planning to fix it?

[tannerlinsley]

Currently this happens because of and always-showing scrollbar (for instance, when a mouse is connected on a laptop, the scrollbars are always shown, at least on a Mac, that's the default). Currently, you can use this css to align them back:

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

[elbrus]

I ended up having totally different fix. Maybe someone will find it useful.
Main idea behind it is to increase last column header width by the scrollbar width, so aligning gets fixed then.

state = {
    fixedAlignment: false
};

scrollBarWidth = 20;

componentWillMount() {
    window.addEventListener('resize', this.fixAlignment);
}

componentDidMount() {
    this.fixAlignment();
}

componentWillUnmount() {
    window.removeEventListener('resize', this.fixAlignment);
}

fixAlignment = () => {
    if (this.props.fixAlignment) {
        const {fixedAlignment} = this.state;
        const body = document.querySelectorAll('.rt-tbody')[0];
        const lastCol = document.querySelectorAll('.rt-th')[this.props.columns.length - 1];

        if (lastCol && body) {
            if (!fixedAlignment && body.clientHeight < body.scrollHeight) {
                lastCol.style.width = parseInt(lastCol.style.width, 10) + this.scrollBarWidth;
                lastCol.style.maxWidth = parseInt(lastCol.style.maxWidth, 10) + this.scrollBarWidth;
                this.setState({fixedAlignment: true});
            } else if (fixedAlignment && body.clientHeight === body.scrollHeight) {
                lastCol.style.width = parseInt(lastCol.style.width, 10) - this.scrollBarWidth;
                lastCol.style.maxWidth = parseInt(lastCol.style.maxWidth, 10) - this.scrollBarWidth;
                this.setState({fixedAlignment: false});
            }
        }
    }
};

[darklajid]

All of these bugs (this one, #450, #309 potentially more) are closed right now.

309 says "This is a known issue we are tracking internally". Is there any public way to follow this issue, given that the issues above are closed (and invisible in the default 'is:open' view for GitHub issues)? The workaround helps, but I'd love to subscribe to something to learn about any potential "final" fix in the future, if that exists?

[gary-menzel]

This is nothing you can subscribe to for a "fix" but we are trying to maintain an FAQ page on the Wiki here and expect "fixes" to find there way there if they have been of significance.

I was just about to put this one up.

[darklajid]

I saw the update to the FAQ, thank you for that and for this awesome component.

For future references/if someone stumbles upon this ticket: This workaround (obviously) doesn't help in case the scrollbar appears dynamically. Maybe the suggestion of @elbrus makes more sense in these cases or the body should get a permanent overflow-y: scroll as well.

(I have a grid with say 7 items, 5 fit in the height on the screen. A scrollbar appears and the header is misaligned unless it gets a scrollbar via the fix as well. If I change the pagination control to '5 rows' no scrolling is necessary any more, body is without scrollbars, header is now misaligned exactly because of the workaround)