JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--   <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> -->
    <title>TOBACCO REQUIREMENT</title>

    <!-- Newly added CDN with Bootstrap -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/v/bs4-4.6.0/jq-3.7.0/jszip-3.10.1/dt-2.0.2/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/bs4-4.6.0/jq-3.7.0/jszip-3.10.1/dt-2.0.2/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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>

</head>
<body>
    <div class="continer">
        <div id="aboveContent">
            <h6>TOBACCO REQUIREMENT</h6>
        </div>
        <div class="table-responsive-sm">
            <table id="SummaryTable" class="table table-hover table-bordered table-sm">
                <thead class="thead-dark"></thead>
                <tfoot><tr><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr></tfoot>
            </table>
        </div> 
    </div>
    
</body>
</html>

CSS

body{
    overflow: hidden;
    margin: 0;
    font-size: small;
    font-family: serif;
}
div.dt-container div.dt-layout-cell {
    display: table-cell;
    vertical-align: middle;
    padding: 0px;
}
.btn {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
}
.table-sm td {
    padding-left: 2px;
    padding-right: 10px;
    padding-top: 1px;
    padding-bottom: 1px;
}
table.dataTable thead th, table.dataTable thead td, table.dataTable tfoot th, table.dataTable tfoot td{
    padding-left: 2px;
    padding-right: 10px;
    padding-top: 1px;
    padding-bottom: 1px;
}
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #28a745;
}
#aboveContent{
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn.disable-hover:hover {
    background-color: inherit;
    color: #007bff;
    cursor: default;
}
.split{
    padding-left: 22px;
    padding-right: 22px;
}
table {
    table-layout: fixed;
}

th, td {
    width: 100px;
    overflow: hidden;
    white-space: nowrap; 
}

div.dt-container div.row>* {
    margin-bottom: 0; 
}

JavaScript

var displayfilter = "Day0";
var columnIndex =0;
var entireRow = [];
var visibleRowsDay1= [];
var visibleRowsDay2= [];
var visibleRowsDay3= [];
var visibleRowsDay4= [];
var visibleRowsDay5= [];
var visibleRowsDay6= [];
var visibleRowsDay7= [];
var currentDay = '';


function saveDayDetails(direction) {
    var table = $("#SummaryTable").DataTable();
    entireRow = $('#SummaryTable').DataTable().rows().data().toArray();

    if (displayfilter === "Day1") {
        visibleRowsDay1=[];
        entireRow.forEach(function (rowData, index) {
            if (rowData.fieldData.Day1_qty !== '') {
                visibleRowsDay1.push(rowData);
            }
        });
    }

    if (displayfilter === "Day2") {
        visibleRowsDay2=[];
        entireRow.forEach(function (rowData, index) {
            if (rowData.fieldData.Day2_qty !== '') {
                visibleRowsDay2.push(rowData);
            }
        });
    }

    if (displayfilter === "Day3") {
        visibleRowsDay3=[];
        entireRow.forEach(function (rowData, index) {
            if (rowData.fieldData.Day3_qty !== '') {
                visibleRowsDay3.push(rowData);
            }
        });
    }

    if (displayfilter === "Day4") {
        visibleRowsDay4=[];
        entireRow.forEach(function (rowData, index) {
            if (rowData.fieldData.Day4_qty !== '') {
                visibleRowsDay4.push(rowData);
            }
        });
    }

    if (displayfilter === "Day5") {
        visibleRowsDay5=[];
        entireRow.forEach(function (rowData, index) {
            if (rowData.fieldData.Day5_qty !== '') {
                visibleRowsDay5.push(rowData);
            }
        });
    }

    if (displayfilter === "Day6") {
        visibleRowsDay6=[];
        entireRow.forEach(function (rowData, index) {
            if (rowData.fieldData.Day6_qty !== '') {
                visibleRowsDay6.push(rowData);
            }
        });
    }

    if (displayfilter === "Day7") {
        visibleRowsDay7=[];
   ...