JSFiddle - React, Tailwind, and code Playground

by charleycartee

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/v/bs-3.3.7/jq-3.2.1/jszip-2.5.0/dt-1.10.16/af-2.2.2/b-1.5.1/b-colvis-1.5.1/b-flash-1.5.1/b-html5-1.5.1/b-print-1.5.1/cr-1.4.1/fc-3.2.4/fh-3.1.3/kt-2.3.2/r-2.2.1/rg-1.0.2/rr-1.2.3/sc-1.4.4/sl-1.2.5/datatables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/v/bs-3.3.7/jq-3.2.1/jszip-2.5.0/dt-1.10.16/af-2.2.2/b-1.5.1/b-colvis-1.5.1/b-flash-1.5.1/b-html5-1.5.1/b-print-1.5.1/cr-1.4.1/fc-3.2.4/fh-3.1.3/kt-2.3.2/r-2.2.1/rg-1.0.2/rr-1.2.3/sc-1.4.4/sl-1.2.5/datatables.min.js"></script>
<table class="dataTable table table-striped" border="0" cellpadding="0" cellspacing="0">
			<thead>
				<tr>
					<th>Table Header Cell 1</th>
					<th>Table Header Cell 2</th>
					<th>Table Header Cell 3</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Text1</td>
					<td>01/01/2012</td>
					<td>10</td>
				</tr>
				<tr>
					<td>Text3</td>
					<td>01/01/2013</td>
					<td>7</td>
				</tr>
				<tr>
					<td>Text2</td>
					<td>01/01/2014</td>
					<td>6</td>
				</tr>
				<tr>
					<td>Text4</td>
					<td>01/01/2015</td>
					<td>5</td>
				</tr>
				<tr>
					<td>Text5</td>
					<td>01/01/2016</td>
					<td>4</td>
				</tr>
				<tr>
					<td>Text6</td>
					<td>01/01/2017</td>
					<td>3</td>
				</tr>
			</tbody><tbody>				
		</tbody></table>
<table class="dataTable table table-striped noPaging allHtml5Buttons" border="0" cellpadding="0" cellspacing="0">
			<thead>
				<tr>
					<th>Table Header Cell 1</th>
					<th>Table Header Cell 2</th>
					<th>Table Header Cell...

JavaScript

$('.dataTable').each(function (){
var buttonConfig = [];
if($(this).hasClass("copyHtml5") || $(this).hasClass("allHtml5Buttons"))
buttonConfig.push({extend:'copyHtml5',title: 'Data export'});
if($(this).hasClass("excelHtml5") || $(this).hasClass("allHtml5Buttons"))
buttonConfig.push({extend:'excelHtml5',title: 'Data export'});
if($(this).hasClass("csvHtml5") || $(this).hasClass("allHtml5Buttons"))
buttonConfig.push({extend:'csvHtml5',title: 'Data export'});
if($(this).hasClass("pdfHtml5") || $(this).hasClass("allHtml5Buttons"))
buttonConfig.push({extend:'pdfHtml5',title: 'Data export'});
var table = $(this).DataTable({buttons: buttonConfig, paging: !$(this).hasClass("noPaging"),});
});