JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
<meta name="description" content="Export with customisable file name" />
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.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"/>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.min.css"/>
<script type="text/javascript" src="https://yenta.esportsdesk.com/media/leagues/themes/assets/js/plugins/DataTables/datatables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"></script>
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="payTable" 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>
       ...

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;
    if ($(header[numColumns - 1]).text() === 'Actions') {
        numColumns -= 1;
    }
    header.forEach(function(th, index) {
        if (index < numColumns) {
            names.push($(th).text());
        }
    });
    return names;
}

function getFooterNames(dt) {
    var footer = dt.columns().footer().toArray();
    var names = [];
    var numColumns = footer.length;
    if ($(footer[numColumns - 1]).text() === 'Actions') {
        numColumns -= 1;
    }
    footer.forEach(function(th, index) {
        if (index < numColumns) {
            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) {
    if (typeof value === 'object' && value !== null) {
        return Object.values(value).some(item => containsUnwantedFilter(item)) || value['@data-filter'] === 'action8925';
    }
    return false;
}

function buildRow(data, rowNum, styleNum, cellStyle = {}) {
    var style = styleNum ? ' s="' + styleNum + '"' : '';
    var row = '<row r="' + rowNum + '">';
    for (i = 0; i < data.length; i++) {
        colNum = (i + 10).toString(36).toUpperCase();
        var cr = colNum + rowNum;
        if (cellStyle.hasOwnProperty(i)) {
            style = ' s="' + cellStyle[i] + '"';
        }
        var cellType = 'inlineStr';
        var cellValue = data[i];
        if ((isSumColumn(i) || isColumnNumber(i))...