JSFiddle - React, Tailwind, and code Playground

by MSI_29

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Summary Portal</title>

    <!-- CDN contain the column reorder, fixed header and row reorder -->
    
    <link href="https://cdn.datatables.net/v/dt/jq-3.7.0/jszip-3.10.1/dt-2.0.1/af-2.7.0/b-3.0.1/b-colvis-3.0.1/b-html5-3.0.1/b-print-3.0.1/cr-2.0.0/date-1.5.2/fc-5.0.0/fh-4.0.1/kt-2.12.0/r-3.0.0/rg-1.5.0/rr-1.5.0/sc-2.4.1/sb-1.7.0/sp-2.3.0/sl-2.0.0/sr-1.4.0/datatables.min.css" rel="stylesheet">
 
    <script src="https://cdn.datatables.net/v/dt/jq-3.7.0/jszip-3.10.1/dt-2.0.1/af-2.7.0/b-3.0.1/b-colvis-3.0.1/b-html5-3.0.1/b-print-3.0.1/cr-2.0.0/date-1.5.2/fc-5.0.0/fh-4.0.1/kt-2.12.0/r-3.0.0/rg-1.5.0/rr-1.5.0/sc-2.4.1/sb-1.7.0/sp-2.3.0/sl-2.0.0/sr-1.4.0/datatables.min.js"></script>

</head>
<style></style>
<body>
    <div class="continer">
        <div id="aboveContent">
            <span><h3 id="Total_qty"></h3></span><span>
            <!-- <button type="submit" id="export">Export</button></span> -->
        </div>
        <table id="SummaryTable" class="cell-border hover order-column row-border stripe compact">
        </table>
    </div>
    
</body>
<script>

</script>  
</html>

CSS

body{
    overflow: hidden;
margin: 0;
}

div.dt-layout-cell {
    display: table-cell;
    vertical-align: middle;
     padding: 0px; 
}

thead tr{
    background-color: antiquewhite;

}

table.dataTable>thead>tr>th,table.dataTable>thead>tr>td {
    padding:0px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3)
}

table.dataTable>tbody>tr>td{
    padding:0px;
}
table.dataTable thead th {
    width: 0px; 
}

table.dataTable thead th {
    height: 30px;
}

div.dt-container div.dt-layout-row.dt-layout-table div.dt-layout-cell {
     display:block;
}

 table.dataTable td {
     font-size: 12px;
    }

.dt-column-title{
    font-size: 12px;
}
#Total_qty{
    margin: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.container{
    width: 100%;
}
.button{
    background-color: antiquewhite;
    border-radius: 5%;
    border:none;
    padding-left: 10px;
    padding-right: 10px;
    /*padding-top: 5px;
    padding-bottom: 5px;*/

}

JavaScript

$("#export").on('click',function(event){

    var jsonString = createExportJson();
    console.log("Returned Json string : " + jsonString);
    callFMScript(jsonString);

})

function createExportJson(){
    var table = $("#SummaryTable").DataTable();
    var visibleColumnsData = table.columns(':visible').indexes().toArray();
    var columnNames = table.columns(':visible').header().toArray();
    var jsonData = [];

    visibleColumnsData.pop();

    var rowCount = table.data().length;

    for (var i = 0; i < rowCount; i++) {
        var rowObject = {};

        for (var j = 0; j < visibleColumnsData.length; j++) {
            var columnIndex = visibleColumnsData[j];
            var columnName = columnNames[j].innerText; 

            var cellData = table.cell(i, columnIndex).data();
            var test = table.cell(i, columnIndex).data();
            
            if (cellData !== undefined && cellData !== null) {
                rowObject[columnName] = cellData;
            }

        }

        jsonData.push(rowObject);
    }

    console.log("jsonData:", jsonData);

    var jsonString = JSON.stringify(jsonData);
    return jsonString;

}

//    var displayfilter = "$dayFilterValue";
var displayfilter = "Day1"

    function callFMScript( jsonData ){
        var param = jsonData;
        //FileMaker.PerformScriptWithOption ( "Get Data From Web", param, "0" );
    }

    function removeElements() {
        $('#dynamicDiv').remove();
            $('#myTable').DataTable().destroy(); 
        }

function dragEvent(){

    $("#SummaryTable tbody tr").attr("draggable", true);
    $("#SummaryTable tbody tr").each(function (i) {
        $(this).attr("data-id", i + 1);
    });

    const rows = $('tr[draggable="true"]');

    rows.each(function(index, row) {
        $(row).on('dragstart', handleDragStart);
        $(row).on('dragover', handleDragOver);
        $(row).on('drop', handleDrop);
    });

    function handleDragStart(e) {
        dragStartIndex =...