yScroll Header Misalignment Quickfix

emilyc

Recently when I added yScrolling to a table, I ran into a bug where the headers became misaligned from the columns. First they would render slightly off because they were extending to encompass the extra length of the scrollbar. For whatever reason, enabling yScroll also made my columns responsive where they hadn't been before, but the headers remained the same size, and would only correct themselves on sort or search. Looking through the forums I saw a lot of people with this same problem and no good solution, so I thought I'd share my quick, hacky fix.

It turned out that if I enabled scrollCollapse and then searched for an item specific enough for the scrollbar to go away, the headers realigned themselves and became responsive, even when I ended the search and the scrollbar came back. Basically, rendering the table without the scrollbar and then adding it back once the page loads would fix all of my woes.

Unfortunately you can't dynamically add or remove a scrollbar once a table has been rendered, so I did the next best thing: Kept scrollCollapse enabled, rendered the table with 0 entries per page (thus forcing the table to first render without the scrollbar), and updating the number of entries once the rest of the page had loaded.

$(document).ready(function() {


            var test = $('#test').DataTable({
                "paging": true,
                "pageLength": 0,
                "scrollY": 200,
                "scrollCollapse": true
            });
 
            $('.page').width(width);
 
            test.page.len(10).draw();
}

Keep in mind that it's still buggy, but in different ways, if I try to run the last line before I render the page width.

Maybe there's a proper fix out there somewhere that I just missed, but in the meantime I hope this helps someone out!

EDIT: Looks like this doesn't work if the table is first drawn without enough rows to trigger the need for yScroll (e.g. having a yScroll value of 200 but only 2 entries won't work, because the length of the table is less than 200px). Which suggests that contrary to what I thought at first, it isn't enough just drawing a table that has yScroll enabled but collapsed. I guess in order to hack your way into whatever code triggers header responsiveness, you have to make sure to have toggled between yScroll being showing and not?

Circumstances in which header responsiveness gets triggered after the table is drawn that I've found are:
-having yScroll rendered, then searching for values until yScroll collapses
-the opposite, starting with yScroll collapsed then then showing it
-clicking any button (sort, page) triggers alignment but not responsiveness

It'd be nice to know exactly what code triggers header responsiveness so I could go straight to it instead of trying to trick the table into the right behavior