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/dt-2.0.1/af-2.7.0/cr-2.0.0/fc-5.0.0/rr-1.5.0/datatables.min.css" rel="stylesheet">
    <script src="https://cdn.datatables.net/v/dt/jq-3.7.0/dt-2.0.1/af-2.7.0/cr-2.0.0/fc-5.0.0/rr-1.5.0/datatables.min.js"></script>
</head>
<style>

</style>
<body>
    <table id="SummaryTable" class="cell-border compact hover order-column row-border stripe">

    </table>
</body>
<script>
    
</script>  
</html>

<!-- I can move rows by moving one position, that way I can move rows to any position, actually I want to move rows to any position by one drag event. I hope you undertand, if you not get my point. Please look the column swapping.-->

CSS

body{
    overflow: hidden;
margin: 0;
}

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;
}

JavaScript

function callFMScript( blend, record_date ){
        var param = blend + '\n' + record_date ;
        FileMaker.PerformScriptWithOption ( "Get Data From Web", param, "0" );
    }
  var displayfilter = "Default";

  $(document).ready( function(){
    
    var table = $("#SummaryTable").DataTable({
        data : [{"fieldData":{"Blend_code":"003DEDL557B04","Day1_qty":1000,"Day2_qty":100,"Day3_qty":10000,"Day4_qty":1000,"Day5_qty":1000,"Day6_qty":2000,"Day7_qty":100,"Zone_name":"ZONE 1","day1":"05/03/2024","day2":"06/03/2024","day3":"07/03/2024","day4":"08/03/2024","day5":"09/03/2024","day6":"10/03/2024","day7":"11/03/2024","record_date":"03/05/2024"},"modId":"0","portalData":{},"recordId":"4510"},{"fieldData":{"Blend_code":"B-SMA","Day1_qty":"","Day2_qty":1000,"Day3_qty":"","Day4_qty":"","Day5_qty":"","Day6_qty":"","Day7_qty":"","Zone_name":"ZONE 1","day1":"05/03/2024","day2":"06/03/2024","day3":"07/03/2024","day4":"08/03/2024","day5":"09/03/2024","day6":"10/03/2024","day7":"11/03/2024","record_date":"03/05/2024"},"modId":"0","portalData":{},"recordId":"4511"},{"fieldData":{"Blend_code":"DHS","Day1_qty":111,"Day2_qty":"","Day3_qty":"","Day4_qty":"","Day5_qty":"","Day6_qty":"","Day7_qty":"","Zone_name":"ZONE 1","day1":"05/03/2024","day2":"06/03/2024","day3":"07/03/2024","day4":"08/03/2024","day5":"09/03/2024","day6":"10/03/2024","day7":"11/03/2024","record_date":"03/05/2024"},"modId":"0","portalData":{},"recordId":"4512"},{"fieldData":{"Blend_code":"EJBD","Day1_qty":"","Day2_qty":1300,"Day3_qty":"","Day4_qty":"","Day5_qty":5000,"Day6_qty":"","Day7_qty":"","Zone_name":"ZONE 1","day1":"05/03/2024","day2":"06/03/2024","day3":"07/03/2024","day4":"08/03/2024","day5":"09/03/2024","day6":"10/03/2024","day7":"11/03/2024","record_date":"03/05/2024"},"modId":"0","portalData":{},"recordId":"4513"}],
        columns : [
            {data : 'fieldData.Blend_code' ,title: "Blend_code"},
            {data : 'fieldData.Day1_qty', title: "Day 1"},
            {data :...