DataTable, export to pdf is not working properly with two headers and colspan

Question

I am using a data table to display my data and I want to export them to pdf.

I followed steps listed in example given in this link.

I am having a table in which I want two headers and out the two headers, one header having colspan i.e. as shown below

<th colspan=3>

So, when I try to export the table to pdf, it gives me only one header and that too having full column description. My code snippet with all the required CSS and JS files is as below:

<link href="https://cdn.datatables.net/1.10.11/css/dataTables.bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/buttons/1.1.2/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/buttons.print.min.js"></script>


<script type="text/javascript">
$(document).ready(function() {
    $('#dataTable').DataTable( {
            dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ]
        } );
    } );
</script>

<table id="dataTable" cellspacing="0" width="auto">
        <thead>
            <tr>
            <th colspan = 3></th>
            <th colspan = 3>IMP values</th>
            </tr>
            
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
          </tbody>
    </table>

The image below shows, table as seen in the browser

The image below shows, table as seen after exported to pdf

So, how can I get two headers in pdf using data table?

Thanks in advance.

Answer 1

The pdf exporting function currently only consider 1 row of column header, hence only one header row is exported.

In order to export with two header rows, we can make use of the customize option provided in the pdf export button. This option allow us to manipulate the pdf document object before export. By referring pdfmake documentation and the playground for table, we can see that the following changes are required to have more than one table header row.

1. Set the headerRows (no of header row) of the table to 2.
2. Insert the missing header row to the first of the pdf table body, as the header row cell given has col-Span, empty cell need to add to the header row to ensure each row have the same number of cells.

The following code snippet demonstrates the above changes.

Due to Download in Sandboxed Iframes (removed), the button in the code snippet will not work, you may copy the following code to an html file, and open the file with a browser to see the effect.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.21/b-1.6.2/b-flash-1.6.2/b-html5-1.6.2/b-print-1.6.2/datatables.min.css" />

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.21/b-1.6.2/b-flash-1.6.2/b-html5-1.6.2/b-print-1.6.2/datatables.min.js"></script>

<script type="text/javascript">
  $(document).ready(function() {
    $('#dataTable').DataTable({
      dom: 'Bfrtip',
      buttons: [
        'copy', {
          extend: 'csv',
          "download": "download"
        }, {
          extend: 'excel',
          "download": 'download'
        }, {
          extend: 'pdf',
          text: 'Export with two row headers',
          download: 'download',
          customize: function(pdfDocument) {
            pdfDocument.content[1].table.headerRows = 2;
            var firstHeaderRow = [];
            $('#dataTable').find("thead>tr:first-child>th").each(
              function(index, element) {
                var colSpan = element.getAttribute("colSpan");
                firstHeaderRow.push({
                  text: element.innerHTML,
                  style: "tableHeader",
                  colSpan: colSpan
                });
                for (var i = 0; i < colSpan - 1; i++) {
                  firstHeaderRow.push({});
                }
              });
            pdfDocument.content[1].table.body.unshift(firstHeaderRow);

          }
        }, {
          extend: 'print',
          download: 'download'
        }
      ]
    });
  });
</script>

<table id="dataTable" cellspacing="0" width="auto">
  <thead>
    <tr>
      <th colspan=3></th>
      <th colspan=3>IMP values</th>
    </tr>

    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
  </tbody>
</table>