[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