Add table cell borders with PDF export button when using Datatables.net

The default export does not have the table cell borders which can make it difficult to read for rich tables.
JavaScript

BEFORE

	{ 
		text: 'PDF', 
		extend: 'pdf', 
		className: 'btn btn-sm btn-outline-secondary', 
		exportOptions: { columns: ':visible' }, 
		orientation: 'landscape', 
		extension: '.pdf', 
		init: function(api,node,config){ 
			$(node).removeClass('dt-button') 
		} 
	}

AFTER - You can see the customize portion is added.

	{ 
		text: 'PDF', 
		extend: 'pdf', 
		className: 'btn btn-sm btn-outline-secondary', 
		exportOptions: { columns: ':visible' }, 
		orientation: 'landscape', 
		customize: function (doc) {
               		var tblBody = doc.content[1].table.body;
               		doc.content[1].layout = {
               			hLineWidth: function(i, node) { return (i === 0 || i === node.table.body.length) ? 2 : 1;},
               			vLineWidth: function(i, node) { return (i === 0 || i === node.table.widths.length) ? 2 : 1;},
				hLineColor: function(i, node) { return (i === 0 || i === node.table.body.length) ? 'black' : 'gray';},
				vLineColor: function(i, node) { return (i === 0 || i === node.table.widths.length) ? 'black' : 'gray';}
			}
		},				
		extension: '.pdf', 
		init: function(api,node,config){ 
			$(node).removeClass('dt-button') 
		} 
	}

Written by khawley
https://datatables.net/forums/discussion/40529/pdf-export-styles


Posted by fbrefere001 on Wednesday August 28, 2024