[React] Columns are misaligned when using `scrollX: true` in DT2/DT3

choc

Link to test case:
v2.3.8: https://stackblitz.com/edit/datatables-net-react-simple-9kecywem?file=src%2FApp.tsx
v3.0.0: https://stackblitz.com/edit/datatables-net-react-simple-8wrhohjm?file=src%2FApp.tsx

Description of problem:

when using the options below in DT2/DT3:

options={{
  scrollX: true,
}}

the columns are misaligned.

P.S. You need to make the viewport a bit narrower to see the bug, below approx. 1000px.

allan

Gah that's frustrating. The scrolling alignment of columns is easily the nastiest part of DataTables. For about 5 months of the v3 development I had an alternative implementation committed, but it meant the scrollbars weren't in the right place (overlapping the header and footer), and decided to roll it back, in part due to that, but also compatibility with some of the extensions.

The issue here is with the slot. Without the slot, there is no alignment problem with scrollX enabled. I might need to expose an API that the React component for DataTables can call when all its rendering is done in order to align the columns.

Many thanks for the test case - leave it with me. I'll take a look next week, which I've left as a kind of "mop up" week.

Allan

allan

Hi,

Just to say that I haven't forgotten about this! There was a bit more mopping up that I anticipated, so I haven't had a chance to look into this yet, but it is something that I'll do so soon. I'm taking a bit of a break next week, so it will likely be the following week). Similar for the Scroller issue you noted as well.

Allan

lbermudez

Hoping to get a fix for this as well. If interesting, i'll leave here the fix im using at the moment:

Remove scrollX from the table and:

function installDataTableHorizontalScrollWrapper(table) {
    const node = table.table().node();

    if (
        !node.parentElement ||
        node.parentElement.classList.contains(
            'datatable-scroll-wrapper'
        )
    ) {
        return;
    }

    const wrapper = document.createElement('div');

    wrapper.className = 'datatable-scroll-wrapper';

    node.parentNode.insertBefore(wrapper, node);
    wrapper.appendChild(node);
}

Then,

DataTable.defaults.initComplete = function () {
    const table = this.api();
    installDataTableHorizontalScrollWrapper(table);

};

.datatable-scroll-wrapper {
width: 100%;
overflow-x: auto;
position: relative;
}

allan

Yes, wrapping it up in a scrolling element is a good option. I actually had just scrollX doing that for about 50% of the development time for DataTables 3, but it caused some compatibility issues with extensions that expected the scrolling to be as it currently is. I might change it longer term, however, the main issue is that I want the scrollbar to be in the tbody - that means using the method it currently does, and all the difficulties that go with it.

Allan