JSFiddle - React, Tailwind, and code Playground

by jasonblewis

HTML

<div id="tableDiv"></div>

CSS

<script src="/javascripts/buttons.html5.min.js"></script>
<script src="/javascripts/buttons.print.min.js"></script>
<script src='/bower_components/pdfmake/build/pdfmake.min.js'></script>
<script src='/bower_components/pdfmake/build/vfs_fonts.js'></script>

JavaScript

function formatdate(data,type,row) {
     return data.substring(0,6);
 };
 
 $( document ).ready( function( $ ) {
     $.ajax({
         "url": '[% json_data_url %]',
         "success": function(json) {
             console.log(mycols);
             var tableHeaders = ''; 
	     $.each(mycols, function(i, val){
		 tableHeaders += "<th>" + val.data + "</th>";
		 if(val.formatter){
//		     console.log(val.formatter);
//		     mycols[i].render = val.formatter;
//		     console.log(val.render);
		 };
		 
             });
             $("#tableDiv").html('<table id="displayTable" class="display compact" cellspacing="0"><thead><tr>' + tableHeaders + '</tr></thead></table>');
	     json.columns = mycols;
	     json.dom = 'Blfrtip'; // customise the table
	     json.buttons = ['copy',
			       'csv',
			       'excel',
			       {extend: 'pdfHtml5',
				text: 'PDF',
				orientation: 'landscape',
				pageSize: 'A4',
				download: 'download',
				filename: '*',
				extension: 'pdf'
			       },
			       'print'];

             $('#displayTable').DataTable(json);
         },
         "dataType": "json"
     });
 });
</script>