How to use rowspan and colspan in tbody using datatable.js?

krutssss picture krutssss · Dec 4, 2014 · Viewed 71.1k times · Source

Whenever I use <td colspan="x"></td>, I get the following error:

Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined(…)

Demo

It's working properly without DataTables.js, but when we use this structure with datatable.js it is not working. We need above table structure. Does anyone have any idea how we can use this table structure datatable.js?

Answer

Dirk Bergstrom picture Dirk Bergstrom · Dec 1, 2015

You can hack around the lack of colspan support by adding an "invisible" cell for every cell that's eliminated:

<tr>
 <td colspan="3">Wide column</td>
 <td style="display: none;"></td>
 <td style="display: none;"></td>
</tr>
<tr>
 <td>Normal column</td>
 <td>Normal column</td>
 <td>Normal column</td>
</tr>

DataTables doesn't complain, the table renders normally and sorting works (invisible columns sort as the empty string).

I haven't tried this with rowspan.