JSFiddle - React, Tailwind, and code Playground

by Aashish Handa

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.20/b-1.6.1/b-html5-1.6.1/datatables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.20/b-1.6.1/b-html5-1.6.1/datatables.min.js"></script>
<h3><a target="_blank" href="https://www.gyrocode.com/articles/jquery-datatables-colspan-in-table-body-tbody/">jQuery DataTables: COLSPAN in table body TBODY</a> <small>HTML data</small></h3>

<table id="example" class="stripe hover cell-border order-column" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Ashton Cox</td>
            <td colspan="3" align="center">N/A</td>
            <td style="display: none"></td>
            <td style="display: none"></td>
            <td>2009/01/12</td>
            <td>$86,000</td>
        </tr>
        <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>
        <tr>
            <td>Bradley Greer</td>
            <td>Software Engineer</td>
            <td>London</td>
            <td>41</td>
           ...

JavaScript

$(document).ready(function (){
    var table = $('#example').DataTable({
        dom: 'Bfrtip',
        buttons: [{        
            extend:'pdfHtml5',
            download:'open',
            customize: function(doc) {
								console.log(doc.content)
									doc.styles.title = {
										color: 'black',
										fontSize: '12',
										bold: true,
										alignment: 'left',
                    'columnDefs': [
                       {
                          'targets': [1, 2, 3, 4, 5],
                          'orderable': false,
                          'searchable': false
                       }
                    ],
                    'rowsGroup': [0],
                    
									},
									//pageMargins [left, top, right, bottom] 
									doc.pageMargins = [ 20, 20, 20, 20 ];
									var objLayout = {};
                  objLayout['createdRow'] = function(row, data, dataIndex){
                      // If name is "Ashton Cox"
                      if(data[0] === 'Ashton Cox'){
                          // Add COLSPAN attribute
                          $('td:eq(1)', row).attr('colspan', 3);

                          // Hide required number of columns
                          // next to the cell with COLSPAN attribute
                          $('td:eq(2)', row).css('display', 'none');
                          $('td:eq(3)', row).css('display', 'none');

                          // Update cell data
                          this.api().cell($('td:eq(1)', row)).data('colspan');
                      }
                  	};
									objLayout['hLineWidth'] = function(i) { return .5; };
									objLayout['vLineWidth'] = function(i) { return .5; };
									objLayout['hLineColor'] = function(i) { return '#aaa'; };
									objLayout['vLineColor'] = function(i) { return '#aaa'; };
									objLayout['paddingLeft'] = function(i) { return 4; };
									objLayout['paddingRight'] = function(i) { return 4; };
									doc.content[1].layout =...