JSFiddle - React, Tailwind, and code Playground

HTML

HML code

    <table class="table datatable-colvis-state table-striped" id="table" style="white-space:nowrap;">
       <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 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...

JavaScript

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) {
            return...