JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.2.1/jszip-2.5.0/dt-1.10.16/b-1.5.1/b-html5-1.5.1/b-print-1.5.1/datatables.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.2.1/jszip-2.5.0/dt-1.10.16/b-1.5.1/b-html5-1.5.1/b-print-1.5.1/datatables.min.js"></script>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
</head>
<body>
<div class="container">
<table id="example" class="table table-bordered table-hover dt-responsive display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th class="newline">Total:</th>
<th class="newline"></th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>170,750</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>162,700</td>
...
JavaScript
$(document).ready( function () {
var table = $('#example').DataTable({
dom: 'Btirp',
buttons: [{
extend: 'csvHtml5',
text: 'CSV',
filename: 'csv_file',
footer: true
},
{
extend: 'excelHtml5',
text: 'Excel',
filename: 'excel_file',
footer: true,
exportOptions: {
format: {
footer: function ( data, row, column, node ) {
// `column` contains the footer node, apply the concat function and char(10) if its newline class
if ($(column).hasClass('newline')) {
//need to change double quotes to single
data = data.replace( /"/g, "'" );
//split at each new line
splitData = data.split('<br>');
data = '';
for (i=0; i < splitData.length; i++) {
//add escaped double quotes around each line
data += '\"' + splitData[i] + '\"';
//if its not the last line add CHAR(13)
if (i + 1 < splitData.length) {
data += ', CHAR(10), ';
}
}
//Add concat function
data = 'CONCATENATE(' + data + ')';
return data;
}
return data;
}
}
},
customize: function( xlsx ) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
var col = $('col', sheet);
//set the column width otherwise it will be the length of the line without the newlines
$(col[3]).attr('width', 50);
// Apply cell styling for wrap text and to make the cell a function
// For the last row column E and F
$('row:last c[r^="E"], row:last c[r^="F"]', sheet).each(function() {
if ($('is t', this).text()) {
//wrap text
$(this).attr('s', '55');
//change the type to `str` which is a formula
...