How to remove header in PDF export result from DataTable and change color table fill to white?

user_15905112 0
Viewed 754

I tried removing the header in the exported PDF from the DataTable but it didn't work. Also, how to change the color table to full white and border black?

var table = $('#ReportTable').DataTable( {
    lengthChange: false,
    buttons: [
                {"extend": 'pdf', 
                "className": 'btn btn-sm btn-primary rounded-pill px-3 mb-3 mb-sm-0',
                    customize: function(doc) {
                        doc.header = false;
                        doc.pageMargins = [ 150, 20, 150, 20 ];
                    },
                },
                {
                    "extend": 'print',
                    "className": 'btn btn-sm btn-primary rounded-pill px-3 mb-3 mb-sm-0'
                },
            ]
} );

table.buttons().container()
    .appendTo( '#ReportTable_wrapper .col-md-6:eq(0)' );

enter image description here

laravel datatables
1 Answers

You can use title to control the title ("SiPanda") and you can use customize to control the different colors (striped lines) used for alternate rows in the PDF.

I don't want to interfere with your existing use of customize, so here is my test example which you can use as a model:

var table = $('#example').DataTable( {
dom: 'Brftip',
buttons: [
  { 
    extend: 'pdfHtml5', 
    text: 'To PDF',
    title: '',
    customize: function ( pdf, btn, tbl ) {
      delete pdf.styles.tableBodyOdd.fillColor;
    }
  }  
]
} );

The title: '' is straightforward (assuming your PDF is actually getting its title from the web page's title).

The delete pdf.styles.tableBodyOdd.fillColor; assumes that your DataTable is using the "standard" zebra-stripes" style.

This command works because the DataTable passes the following properties to PDFMake:

tableBodyEven: Object {  }
tableBodyOdd: Object { fillColor: "#f3f3f3" }

So, we remove the fillColor: "#f3f3f3" property from the tableBodyOdd object.

If you have used a different DataTables styling, you may see something different from what I see - in which case you can use console.log( pdf ); to take a closer look.

UPDATE

I missed the part about "and border black" - so here is an approach for that, also:

buttons: [
  { 
    extend: 'pdfHtml5', 
    text: 'To PDF',
    title: '',
    customize: function ( pdf, btn, tbl ) {
      delete pdf.styles.tableBodyOdd.fillColor;

      pdfMake.tableLayouts = {
        exampleLayout: {
          hLineWidth: function (i) {
            return 0.2;
          },
          vLineWidth: function (i) {
            return 0.2;
          },
          hLineColor: function (i) {
            return 'black';
          },
          vLineColor: function (i) {
            return 'black';
          }
          //paddingLeft: function (i) {
          //  return i === 0 ? 0 : 8;
          //},
          //paddingRight: function (i, node) {
          //  return (i === node.table.widths.length - 1) ? 0 : 8;
          //}
        }
      };

      pdf.content[0].layout = "exampleLayout";
    }
  }  
]

In the above snippet, I define an object called pdfMake.tableLayouts which contains a custom object called exampleLayout.

My exampleLayout defines thin black lines around every cell in the table.

I then use this custom layout by using:

pdf.content[0].layout = "exampleLayout";

You can choose your own line widths and colors.

The end result:

enter image description here

user_125673650
Related