CODEWITHSUNDEEP
datatables
alex
alex

Reputation: 611

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?

Upvotes: 0

Views: 2510

Answers (2)

andrewJames
andrewJames

Reputation: 21916

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.

Upvotes: 0

alex
alex

Reputation: 611

I was able to add a custom column by adding the following to my exportOptions in my dataTabel config:

customizeData: function (data) {
            data['header'].push('Custom Field');
            $.each(data['body'], function(key, row) {
                row.push('');
            });
        }

Upvotes: 1

Related Questions