Column widths incorrect with rowgroups in dt v2

Andrew_NZ

https://codepen.io/Andrew-Maxwell/pen/wvZXaYm
Using dt version 2.0.3 with rowGroup and scrollX ignores any column widths and gives all available width to the first column. rolling back to dt version 1.13.4 works fine

allan

Unfortunately this is a known issue when the first row in the table contains a colspan attribute for a cell. I'll looking into workarounds. I think it is a browser bug, but they all do it, so I need to understand a little more about what they are doing and how to workaround it.

Allan

jhammer

Is there any solution to this? We are having the same issue on 2.0.7.

kthorngren

Here is a more recent thread with the same question. Allan is still researching the issue.

Kevin

jhammer

@allan @kthorngren as a work around until solution is determined, we are adding a blank zero height row at the top of the table:

"drawCallback": function (settings) {
    //add blank zero-height row at top for rowGroup rowspan issue fix
    var numCols = $(".dt-scroll-head table thead th").length;
    var cellHtml = "<td></td>";
    $(".dt-scroll-body table tbody").prepend("<tr class=\"zeroheight\">" + cellHtml.repeat(numCols) + "</tr>");
}

jhammer

@allan @kthorngren thanks for addressing the column sizing/RowGroup issue in v2.1.5. It seems the calculations of column widths are now slightly wider than the available space when the content of a column wraps to multiple lines. Is this a known issue?

allan

Can you give me a link to a page showing that issue please?

Allan

jhammer

Hi @allan, the code sample found at https://live.datatables.net/qekusapo/3 demonstrates that the "status" column (which is set to white-space: nowrap) does not correctly return the width of the column.  Below you can also see that the colgroup element for column 6 shows different values for width and min-width which seems to indicate the initial width calculation is incorrect:

<colgroup>
    <col data-dt-column="0" style="width: 200px; min-width: 200px;">
    <col data-dt-column="1" style="width: 703.836px; min-width: 703.836px;">
    <col data-dt-column="2" style="width: 145.242px; min-width: 145.242px;">
    <col data-dt-column="3" style="width: 66.9297px; min-width: 66.9297px;">
    <col data-dt-column="4" style="width: 105.68px; min-width: 105.68px;">
    <col data-dt-column="5" style="width: 82.6719px; min-width: 82.6719px;">
    <col data-dt-column="6" style="width: 172.57px; min-width: 165.641px;">
</colgroup>

billmalcolm

@allan can confirm something in last Friday's release changed how the column widths are getting calculated.

We upgraded to the newest version with Buttons (including colvis, html5 jszip), Datetime, FixedHeader and Responsive. After doing so, our default visible columns bled out into the right margin and any columns we toggled visibility on just pushed it out further on smaller laptop screens.

I "fixed" it by removing the colgroup element on initComplete and now the columns snap back to where they should, but noticed this causes any widths specified in the columnDefs to not work. I'm working on putting together a working example in the JS Bin that doesn't include any PII to demo the bug and will comment with it here when ready.

jhammer

@allan looks like v2.1.7 corrected this issue for us -- thank you!

allan

Thanks for the confirmation.

Allan