Datatables Header missalign when table hidden

Datatables Header missalign when table hidden

FalcoFalco Posts: 5Questions: 1Answers: 0

When the table is hidden while .DataTable() is being called on it or if the window width changes while the table is hidden and then revealed the header is missaligned.
when removing scrollX: true, the table is then rendered correctly.

Here is a working example: http://jsfiddle.net/xpvt214o/533811/
how to reproduce the bug:
1. Hide the table with the hide button
2. resize the jsfiddle output window while the table is hidden
3. show the table with the show button
4. see the table headers are not 100% width and not aligned with the rest of the table.

a workaround is welcome. thank you.

Answers

  • FalcoFalco Posts: 5Questions: 1Answers: 0

    Apparently calling draw() redoes the headers. now to find a way to make this automagic whenever the table gets unhidden without putting this in every thing that calles show() which might or might not reveal a datatable or not

    I'm thinking about something like this: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
    but I don't know the performance cost clientside if I observer every single element and then call .DataTable().draw() on all .dataTable children whenever the hidden attribute changes.

  • FalcoFalco Posts: 5Questions: 1Answers: 0

    I made a dirty workaround here: http://jsfiddle.net/xpvt214o/534754/
    create an observer that checks for style changes, and if they occur, redraw all children with class .dataTable

    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
    var DatatablesRedrawObserver = new MutationObserver(function (mutationsList) {
        mutationsList.forEach(function (mutation) {
            if (mutation.type === "attributes") {
                if (mutation.attributeName === "style") {
                    $(mutation.target).find(".dataTable").DataTable().draw();
                }
            }
        });
    });
    

    when making your table, add all parents to an mutation observer:

    $(tableObject).parents().each(function (idx) {
            DatatablesRedrawObserver.observe(this, { attributes: true });
        });
    
  • FalcoFalco Posts: 5Questions: 1Answers: 0

    The workaround works in chrome and ms edge. Firefox really hates it and hangs up. IE doesn't even bother at all with datatables.
    I'd love some suggestions.

This discussion has been closed.