DataTables throwing error when colspan in table header cell

Question

I'm getting the following error when using a colspan in my th tag.

Uncaught TypeError: Cannot read property 'mData' of undefined

Normally this error occurs when the number of table cells is not equal in every row, but this is not the case. Here is my code:

<table id="foo">
<thead>
    <tr>
        <th colspan="5">asdf</th>
    </tr>
</thead>

<tbody>

    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>

</tbody>
</table>

<script>
    $('#foo').DataTable();
</script>

Here is an example in codepen: https://codepen.io/anon/pen/EQOVMe?editors=1111

Using jquery 1.12.3 and Data Tables 1.10.16

Any ideas?

Looks like a known issue, as per answer and conversation here: https://stackoverflow.com/questions/25377637/datatables-cannot-read-property-mdata-of-undefined — PM., Feb 26 '18 at 22:55
Hmm, not sure why it's not working when according to this `rowspan` and `colspan` are fully supported in headers. https://datatables.net/examples/basic_init/complex_header.html — user9263373, Feb 26 '18 at 23:24

user9263373 · Answer 1 · 2018-02-27T00:36:56.863

According to the documentation here, Datatables supports colspan and rowspan in the headers, but with this caveat.

Each column must have one TH cell which is unique to it for the listeners to be added.

I figured out a hacky workaround and I don't know if it's the best solution, but it does provide a working solution nonetheless.

Create two header rows and use the first header row with the colspan attribute and the second header row with all the individual columns. Then apply css display: none to hide the row. This will allow the datatable to initialize without erroring. However, I'm not sure if it might cause any side effects with other functionality.

UPDATE

Initially I applied display: none using css but this solution didn't draw the table using the full width of the container. So I modified this to apply the style in code after the table was initialized and drawn. This allows it to display in the full container width.

$(document).ready(function() {
  $('#foo').DataTable();
  $("tr.hideme").css({"display" : "none"});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/css/jquery.dataTables.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script>

<table id="foo">
  <thead>
    <tr>
      <th colspan="5">asdf</th>
    </tr>
    <tr class="hideme">
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>

  <tbody>

    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>

  </tbody>
</table>

Nice one, great answer. – William Walseth Feb 27 '18 at 00:22 — William Walseth, Feb 27 '18 at 00:22

score 0 · Answer 2 · answered Feb 27 '18 at 10:44

You can just simply use two tr inside thead of the table. It is not different than normally using colspan and rowspan in table. You can see the jsfiddle here.

<table width="100%" id="example">
  <thead style="background:#C0C0C0;">
    <tr>
      <th colspan="5">first headline</th>
    </tr>
    <tr>
      <th style="padding-left: 15px;"> Id </th>
      <th> Product Name </th>
      <th> Total Events </th>
      <th> Total Revenue </th>
      <th> Rental Time </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>$372,000</td>
      <td>New York</td>
      <td>4804</td>
    </tr>
    <tr>
      <td>Herrod Chandler</td>
      <td>Sales Assistant</td>
      <td>$137,500</td>
      <td>San Francisco</td>
      <td>9608</td>
    </tr>
  </tbody>

</table>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

$(document).ready(function() {
    $('#example').DataTable();
} );

DataTables throwing error when colspan in table header cell

2 Answers2

Linked