JSFiddle - React, Tailwind, and code Playground

by Marc Roussel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.dataTables.min.css"/>

 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</script>
  </head>
  <body style="">
   ...

CSS

th {
  padding:0;
  margin:0;
  text-align:left;
}

JavaScript

$(document).ready( function() {
	InitDataTables("#example");
  SetDataTablesButtons("#example");
});

function InitDataTables(TableId) {
    var TheTable = $(TableId).DataTable({
    		dom: 'Bfrtip',
        searching: false,
        paging: false,
        info: false,
        ordering: false,
        buttons: [
          'copy', 'excel'
        ],
        initComplete: function () {
        }
    });

    TheTable.on('buttons-processing', function ( e, indicator, buttonApi, DataTable, node, config ) {
        if (indicator) {
            $(TableId).find('input:not(:hidden)').each(function() {
                $(this).parent().html("<span class='forexport'>" + this.value + "</span>");
            });
        } else {
            var RevertBackToInputTrue = "<input checked='checked' type='checkbox' value='true'>"
            var RevertBackToInputfalse = "<input type='checkbox' value='false'>"

            var Index = 0;

            $(TableId).find('span.forexport').each(function () {
                if ($(this).text() == "true") {
                    $(TableId).find('span').each(function () {
                        $(this).replaceWith(RevertBackToInputTrue.replace("@@INDEX", Index));
                    });
                }
                else {
                    $(TableId).find('span').each(function () {
                        $(this).replaceWith(RevertBackToInputfalse.replace("@@INDEX", Index));
                    });
                }

                Index++;
            });
        }
    });
}
function SetDataTablesButtons(TableName) {
    var table = $(TableName).DataTable();

        new $.fn.dataTable.Buttons(table, {
            buttons: [
                { "extend": 'copy', "text": '<span class="fa fa-copy" style="font-size: 1.1em"> ' + "  Copy" + '</span>', "className": 'btn btn-primary' },
                { "extend": 'excel', "text": '<span class="fa fa-file-excel-o" style="font-size: 1.1em">  Excel</span>', "className": 'btn btn-primary' }
    ...