Search code examples
datatables

Add custom column to DataTable Export

When exporting my dataTable to a PDF I'd like to add an extra blank column that doesn't exist on the dataTable itself. All it needs is the headline and a blank field for each row. Is that possible somehow?

Solution

  • You can add an extra empty column to the PDF by manipulating the PDFMake document structure.

    You can access this structure using the pdfHtml5.customize function.

    A simple demo:

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

      dom: 'Bfrtip',
      buttons: [{
        extend: 'pdf',
        customize: function (pdf) {
          addExtraColumn(pdf);
        }
      }
    ]
    });
  });

  function addExtraColumn(pdf) {
    pdf.content[1].table.body.forEach(function(row, idx) { 
      let newCell = structuredClone(row[0]);
      newCell.text = idx === 0 ? "New Heading" : "";
      row.push( newCell );
      console.log( row );
    })
  };
    <!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Export to PDF</title>

  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css"/>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.min.css"/>
 
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <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/1.12.1/js/jquery.dataTables.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
  
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

</head>

<body>

<div style="margin: 20px;">

<table id="example" class="display nowrap dataTable cell-border" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Data</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Adelaide Nixon</td>
                <td>One</td>
            </tr>
            <tr>
                <td>Bruna Nash</td>
                <td>Two</td>
            </tr>
        </tbody>
    </table>

</div>


</body>

    So, if you start with a table which looks like this:

    enter image description here

    Then the PDF will look like this:

    enter image description here

    From there, you may want to further customize the PDF - for example, by drawing lines around every cell, and so on.

    You can read the PDFMake documentation for tables, and see examples for more guidance.