Data Tables 1.13.4 Giving fixed-width headers?

Data Tables 1.13.4 Giving fixed-width headers?

YokomokoYokomoko Posts: 7Questions: 1Answers: 0
edited May 2023 in Free community support

We're currently experiencing issues after updating from version 1.12.1 of DataTables to 1.13.4 where the column widths are a bit funky, regardless of the autowidth parameter being true or false.

Is there anything obvious that would do this that I'm missing? In 1.13.4 it is setting "style=width:76px;" for example, whereas before it was not doing this?

Answers

  • YokomokoYokomoko Posts: 7Questions: 1Answers: 0

    I've had to set the column widths to auto for every column, is that right? Seemed to do that automatically before.

    var columnLength = $("#jobDataThead tr th").length;
    var columnData = [];
    for (var i = 0; i < columnLength; i++) {
        columnData.push({ "width": "auto" });
    }
    
        "columns": columnData,
    
  • allanallan Posts: 61,432Questions: 1Answers: 10,048 Site admin

    It will set a width to try and keep the columns the same width when you change the page in the table. Otherwise the jumping around of column widths is really jarring.

    Allan

  • YokomokoYokomoko Posts: 7Questions: 1Answers: 0

    This seems to be behaving very oddly. See the attached, the MakeModel column is tiny and going over several lines, but the "Planned Driver" column is double the size it needs to be? I've checked and there is no hidden spaces. Also the "Location" and "Destination" columns, we trim these down to a certain length in code so many of them end with "...", but there's about 20% more space than it needs?

    Data redacted due to being on a live customer with live details.

  • YokomokoYokomoko Posts: 7Questions: 1Answers: 0

    It seems it could possibly be down to the colspan=2 that is on Driver/Vehicle for certain rows (the whited out column). Removing the colspan makes it look better, but then obviously the driver column is then super long..

  • allanallan Posts: 61,432Questions: 1Answers: 10,048 Site admin

    It seems it could possibly be down to the colspan=2 that is on Driver/Vehicle for certain rows

    DataTables doesn't support colspan or rowspan in the tbody. How are you doing that?

    Allan

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

    What styling options do you have applied to the table? You might need to add nowrap to the table tag as documented in the Default Datatables Styling docs.

    we trim these down to a certain length in code so many of them end with "...", but there's about 20% more space than it needs?

    How are you doing this?

    Possibly Datatables doesn't know that the data is trimmed and is using the original data to calculate the width. Maybe try the ellipsis plugin

    It seems it could possibly be down to the colspan=2 that is on Driver/Vehicle for certain rows

    Datatables doesn't support colspan or rowspan in the tbody. See the HTML requirements doc for more details.

    To help troubleshoot please provide a link to your page, PM Allan with the info to keep it private. Or build a simple test case the replicates the issues so we can help debug.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • YokomokoYokomoko Posts: 7Questions: 1Answers: 0
    edited June 2023

    The trimmed data is trimmed in the server-side and populated in the table, so DataTables wouldn't know of the full length of data. I will consider the ellipses plugin though.

    We are using colspan by adding a hidden <td> with display="none" to any that require a colspan as it was a fairly basic requirement for our needs.

    I'll try the nowrap class, as we aren't currently implementing that.

  • YokomokoYokomoko Posts: 7Questions: 1Answers: 0

    The ellipses plugin just plain didn't work easily for us, since we had <span> tags etc. within the cells, not escaping the contents kinda worked but it still broke the HTML because it was trimming off too much. But it appears that the nowrap class is hopefully working :) Thanks

  • allanallan Posts: 61,432Questions: 1Answers: 10,048 Site admin

    Yeah, ellipsis is string based, so it doesn't work with HTML tags. I need to come up with a better solution sometime. Good to hear that nowrap does the job though.

    Allan

Sign In or Register to comment.