datatables 2.18 issue with solution

Charley

I don't have a link to test case

I have a styleguide page baked in to the admin section of my website so that other website developers have a starting point for style and how to use various libraries we have (such as datatables)

At some point during the upgrade from bootstrap4 + datatables 1.x to boostrap 5 + datatables 2.18 one of the example tables broke, specifically the one that had multiple headers in it (see below)

<thead>
    <tr>
        <th colspan="4" data-dt-order="disable">span1</th>
        <th colspan="5" data-dt-order="disable">span2</th>
    </tr>
    <tr >
        <th>Table Header Cell 1</th>
        <th>Table Header Cell 2</th>
        <th data-visible="false" >Table Header Cell 3a Fake Date Sort</th>
        <th >Table Header Cell 3b Date Sort custom data field</th>
        <th data-sortable="false">Table Header Cell 4 (no sort)</th>
        <th>Table Header Cell 5 (custom data-sort)</th>
        <th class="selectFilter" data-aggregate="concat-unique">Table Header Cell 6</th>
        <th data-searchable="false">Table Header Cell 7 (no filter)</th>
        <th data-visible="false">Table Header Cell 8 (hidden)</th>
    </tr>

</thead>

this caused an error message (varied from chrome to firefox, but the issue wound up being that local[row+rowspan][column] was null, so that local[row+rowspan][column].cell threw a javascript error.

my short term fix is to update the code to add a check in that while statement of "local[row+rowspan][column] != null &&"

// Expand for rowspan
while (
  local[row+rowspan] !== undefined &&
  local[row+rowspan][column] != null &&
  local[row][column].cell == local[row+rowspan][column].cell
) {
  structure[row+rowspan][column] = null;
  rowspan++;
}

I'm not sure if this has been addressed in any updates since.

Charley

I downloaded 2.2.2 and looked at the code. It doesn't have a check to make sure local[row+rowspan][column] is non-null. I'm not sure if I wanmt to snag newest based on where we are in the deployment cycle, but I will do so at some point

allan

I'm not immediately seeing an error with either 2.1.8 or 2.2.2 with your table header:

• 2.2.2: https://live.datatables.net/hiwadete/2/edit
• 2.1.8: https://live.datatables.net/rivesaxe/2/edit

Are you able to modify my test case to show the issue? I'm not 100% clear if you are indicating that there is a problem with 2.2.2 or not?

Allan

Charley

I get the issue in my code locally with both 2.2.2 and 2.1.8, without the line I added checking for null

I've got a chunk of javascript that I load that does all our standard configuration for the tables. I'll check and see if I can figure out if it;s one of my config options

Charley

I dug into it a bit more. I think he root of the issue is that some of my code is adding an another header row that doesn't have the right number of columns.

this still might be worth adding, since it makes even a table with an incorrect number of headers more functional
local[row+rowspan][column] != null

kthorngren

I think he root of the issue is that some of my code is adding an another header row that doesn't have the right number of columns.

You are probably seeing an error like this in the console:

Uncaught TypeError: Cannot read properties of undefined (reading 'cell')

this still might be worth adding, since it makes even a table with an incorrect number of headers more functional

Datatables has always required a corresponding th in each row of the thead for each column. Minimally to apply the sorting listeners. Additionally having mismatched headers would break things like ColReorder and column().header() for eaample. I updated Allan's test case with your fix this the long HTML tab. I added a third thead row that has 6 columns.

https://live.datatables.net/gokeseku/1/edit

Try moving column 5 to the right and you will see the second header moves but the corresponding cell in the third row doesn't follow and remains where it was. Also you can see in the console the able.column(6).header() call generates an error due to one of the header cells being non-existent.

Kevin

allan

DataTables requires valid HTML. A header row with an incorrect column count (when taking into account colspan / rowspan, body columns, etc etc) is invalid HTML and is something I'm happy for DataTables to throw an error on.

Allan