HTML-sourced data with group row not supported?!?!

miwarren

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

tangerine

DataTables doesn't support colspan in a <tbody>.

miwarren

Why doesn't it? It's proper HTML!

kthorngren

Why doesn't it? It's proper HTML!

It is proper HTML but the Installation docs state that colspan and rowspan are not supported in the tbody. Datatables does provide the RowGroup extension which might be of interest.

Kevin