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="//momentjs.com/downloads/moment.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>
<script src="//cdn.datatables.net/plug-ins/1.10.16/sorting/datetime-moment.js"></script>
<table class="dataTable table table-striped" border="0" cellpadding="0" cellspacing="0" data-col-reorder="true">
			<thead>
        <tr>
          <th rowspan="2">Table Header Cell 1</th>
          <th colspan="2">Cell 2/3 grouping</th>
        </tr>
				<tr>
					<th>Table Header Cell 2</th>
					<th>Table Header Cell 3</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Text1</td>
					<td>12/01/2012</td>
					<td>10</td>
				</tr>
				<tr>
					<td>Text3</td>
					<td>12/02/2012</td>
					<td>7</td>
				</tr>
				<tr>
					<td>Text2</td>
					<td>12/03/2012</td>
					<td>6</td>
				</tr>
				<tr>
					<td>Text4</td>
					<td>11/01/2012</td>
					<td>5</td>
				</tr>
				<tr>
					<td>Text5</td>
					<td>11/02/2012</td>
					<td>4</td>
				</tr>
				<tr>
					<td>Text6</td>
					<td>01/01/2013</td>
					<td>3</td>
				</tr>
				<tr>
					<td>Text7</td>
					<td>01/02/2012</td>
					<td>2</td>
				</tr>        
			</tbody><tbody>				
		</tbody></table>
    
    <table class="dataTable table table-striped" border="0" cellpadding="0" cellspacing="0" data-col-reorder="true">
			<thead>
        <tr>
       ...

JavaScript

$.fn.dataTable.moment( 'MM/DD/YYYY');
var buttonConfig = [];

buttonConfig.push({extend:'copyHtml5',title: 'Data export'});
$('.dataTable').each(function (){
	var table = $(this).DataTable({buttons:buttonConfig});
	var buttonContainer = table.buttons( 0, null ).containers();
	buttonContainer.addClass("pull-right");
	buttonContainer.prependTo($("#" + $(this).attr('id') + "_filter").parent());
});