svelte-simple-datatables
svelte-simple-datatables copied to clipboard
Initial datatable mount doesn't show x-axis scroll bar if table size larger than datatable container.
Hi Vincjo,
It happened to me that if I wrap the datatable component with a container like a div element, the datable wasn't rendered with the x-axis scroll bar. The logic that displays the x-scroll bar is in datatable.resize(): if (size.parentWidth * size.width < document.querySelector('section.datatable table').offsetWidth) { tableContainer.style.overflowX = 'auto' } From the browser developer tool element tab, it's obvious that the parent width was less than the table width. I did some code tracing, it seems when the datatable.resize was called, the parent width was indeed larger than the table width, and the logic that changed the table width was in columns.draw, which was invoked in stickyheader onMount handler. Even though stickyheader onMount was called before datatable onMount (where the datatable.resize was done), the columns.draw in stickyheader was done with setTimeout set to 50ms, which means by the time columns.draw was run, the code that determines if x-scroll bar should be shown has already happened.
Could you kindly take a look if my observation is correct ? and if so, what's the recommended fix ?