HTML-sourced data with group row not supported?!?!
HTML-sourced data with group row not supported?!?!
miwarren
Posts: 5Questions: 2Answers: 0
I'm working on an integration with this plugin, with a library that's pretty much requiring me to manually render the table.
When I pass it the following table :
<table id="report-table-vEWLZKrBJ6" class="report-table" style="width: 100%;">
<thead>
<tr>
<th>Store</th>
<th>Cash Sales</th>
<th>Credit Sales</th>
<th>Tips</th>
<th>Gross Sales</th>
<th>Discounts</th>
<th>Credits Issued</th>
<th>Credit Card Total</th>
<th>Tax</th>
<th>Net Sales</th>
</tr>
</thead>
<tbody>
<tr role=row>
<th
role=row
colspan=10
>2020-01-16</th>
</tr>
<tr role="row">
<td>Broad Ripple #1 (1)</td>
<td>$10.26</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$10.26</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.77</td>
<td>$9.49</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total records : 1</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>
</table>
and say
$(`#report-table-vEWLZKrBJ6`).DataTable()
I'm greeted with the following cryptic error:
Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined
After some banging my head against the code, I found it was the group header row that is causing the issue. But WHY?!?
For some reason, filling that grouping header row with empty <th>s and removing the colspan fixes the issue.
Again, WHY!?
CodePen is available here: https://codepen.io/mwarren/pen/GRgYvqx?editors=1010
This discussion has been closed.
Answers
DataTables doesn't support colspan in a <tbody>.
Why doesn't it? It's proper HTML!
It is proper HTML but the Installation docs state that
colspanandrowspanare not supported in thetbody. Datatables does provide the RowGroup extension which might be of interest.Kevin