JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/v/bs-3.3.7/jszip-2.5.0/dt-1.13.3/b-2.3.5/b-html5-2.3.5/datatables.min.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>How do?</h1>
<table id="example-table">
<thead>
<tr>
<th>ID</th>
<th>Classes</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1,25,6</td>
</tr>
<tr>
<td>2</td>
<td>4,28</td>
</tr>
<tr>
<td>3</td>
<td>42</td>
</tr>
<tr>
<td>4</td>
<td>12,28,47</td>
</tr>
<tr>
<td>5</td>
<td>14</td>
</tr>
<tr>
<td>6</td>
<td>14,47</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/v/bs-3.3.7/jszip-2.5.0/dt-1.13.3/b-2.3.5/b-html5-2.3.5/datatables.min.js"></script>
<script...
JavaScript
$(function () {
$('#example-table').DataTable({
columns: [
{name: 'id'},
{
name: 'classes',
type: 'string'
}
],
dom: 'fBlrtip',
buttons: [
{
extend: 'excel',
title: '',
messageTop: '',
customize: (xlsx) => {
const sheet = xlsx.xl.worksheets['sheet1.xml'];
$('row c[r^="B"]', sheet).each((index, node) => {
// Don't format the first header cell
if (node.getAttribute('r') !== 'B1') {
// Format data cells as left aligned text
node.setAttribute('s', '50');
}
});
},
// Uncomment so commas are not stripped from exported data
/*exportOptions: {
format: {
body: (cellHTML, rowIndex, colIndex, cellNode) => {
if (colIndex === 1) {
return cellHTML.replaceAll(',', ', ');
}
return cellHTML;
},
}
},*/
}
]
});
});