JSFiddle - React, Tailwind, and code Playground

by ronnjoe

HTML

<script src="//cdn.datatables.net/1.8.2/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.8.2/css/demo_table.css">
<link rel="stylesheet" href="//cdn.datatables.net/tabletools/2.0.0/css/TableTools.css">
<script src="//cdn.datatables.net/tabletools/2.0.0/js/TableTools.min.js"></script>
<script src="//cdn.datatables.net/tabletools/2.0.0/swf/copy_cvs_xls_pdf.swf"></script>
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
        </tr>
    </thead>
 
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
        </tr>
    </tfoot>
 
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
        </tr>
    </tbody>
</table>

JavaScript

$(document).ready(function() {
      TableTools.DEFAULTS.aButtons = [{
            "sExtends": "print",
            // "sMessage": "Print Preview  - Please press Escape or Backspace or Enter key when done.",
          ////cdn.datatables.net/tabletools/2.0.0/swf/copy_cvs_xls_pdf.swf
            "sInfo": "<h3>To get return on main page Please press 'Escape' or 'Backspace' or 'Enter' key.</h3>"
        }, {
            "sExtends": "xls"
        }];
    TableTools.DEFAULTS.sSwfPath = "//cdn.datatables.net/tabletools/2.0.0/swf/copy_cvs_xls.swf";
    $('#example').dataTable( {
        sDom: 'T<"clear">lfrtip'
    } );
} );