JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
<meta name="description" content="Export with customisable file name" />
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.11.4/b-2.2.2/b-html5-2.2.2/rg-1.1.4/datatables.min.css"/>
 <link rek="stylesheet" href="https://cdn.datatables.net/buttons/3.0.2/css/buttons.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.11.4/b-2.2.2/b-html5-2.2.2/rg-1.1.4/datatables.min.js"></script>    
    <!-- <script src="https://cdn.datatables.net/buttons/3.0.2/js/dataTables.buttons.min.js"></script> -->
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="table" class="display nowrap" width="100%">
        <thead>
          <tr>
             <th>Date</th>
             <th class="nosort">Time</th>
             <th>Name</th>
             <th>Player ID</th>
             <th>User ID</th>
             <th>Category</th>
             <th>Event</th>
             <th>Team</th>
             <th>Action</th>
             <th class="noshow">FDT</th>
             <th>Pay Type</th>
             <th>TXN ID</th>
             <th>Details</th>
             <th class="noshow">Note</th>
             <th class="sum">Reg. Fee</th>
             <th class="sum">Discount</th>
             <th class="nosort"></th>
             <th class="noshow">Note</th>
             <th>Tax</th>
             <th class="sum">Proc. Fee</th>
             <th class="sum" style="text-align:right">Conv. Fee</th>
             <th class="sum">Collected</th>
             <th>Date Paid</th>
             <th>Notes</th>
             <th class="nosort text-center">Actions</th>
          </tr>
       </thead>
       <tfoot>
          <tr>
             <th>Date</th>
             <th class="nosort">Time</th>
             <th>Name</th>
             <th>Player...

JavaScript

$(document).ready(function() {
      function setSheetName(xlsx, name) {
        if (name.length > 0) {
            var source = xlsx.xl['workbook.xml'].getElementsByTagName('sheet')[0];
            source.setAttribute('name', name);
        }
    }
    
    function getHeaderNames(dt) {
        var header = dt.columns().header().toArray();
        var names = [];
        var numColumns = header.length; // Get the total number of columns
        if ($(header[numColumns - 1]).text() === 'Actions') {
            numColumns -= 1; // Reduce the count by one to ignore the last column
        }
        header.forEach(function(th, index) {
            if (index < numColumns) { // Only add names of columns that are not the last 'Actions' column
                names.push($(th).text());
            }
        });
        return names;
    }
    
    function getFooterNames(dt) {
        var footer = dt.columns().footer().toArray();
        var names = [];
        var numColumns = footer.length; // Get the total number of columns
        // Check if the last column's name is 'Actions'
        if ($(footer[numColumns - 1]).text() === 'Actions') {
            numColumns -= 1; // Reduce the count by one to ignore the last column
        }
        footer.forEach(function(th, index) {
            if (index < numColumns) { // Only add names of columns that are not the last 'Actions' column
                names.push($(th).text());
            }
        });
        return names;
    }
    
    function buildCols(data) {
        var cols = '<cols>';
        for (i = 0; i < data.length; i++) {
            colNum = i + 1;
            cols += '<col min="' + colNum + '" max="' + colNum + '" width="20" customWidth="1"/>';
        }
        cols += '</cols>';
        return cols;
    }
    
    function containsUnwantedFilter(value) {
        // Check if the value is an object and contains the unwanted @data-filter attribute
        if (typeof value === 'object' && value !== null) {
    ...