JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://ilcdnstatic.investorslounge.com//assets/css/layout_css/bootstrap.min.css?v=1.4.0.2-53">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://ilcdnstatic.investorslounge.com//assets/css/layout_css/style.bundle.min.css?v=1.4.0.2-53">
<link rel="stylesheet" href="https://ilcdnstatic.investorslounge.com//css/Minified/css_LayoutM5.min.css?v=1.4.0.2-53">
<link rel="stylesheet" href="https://ilcdnstatic.investorslounge.com//css/Minified/css_shortScreener.min.css?v=1.4.0.2-53">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.0/css/font-awesome.css">
<div class="main bg-white">
    <div class="padding-top-10">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-2 col-lg-3">
                    <h1 class="stock_heading margin-0"> Screener</h1>
                    <div class="asOfDate text-xl-left text-sm-left">
                        <span>&nbsp; as of : </span> <span id="asOfDate"></span>
                    </div>
                </div>

                <div class="col-sm-9 col-lg-9 d-sm-block d-sm-flex justify-content-end align-content-center align-items-baseline indicesFilter">

                    

                    
                    <div class="down"></div>
                    
                </div>
            </div>
      
        </div>
    </div>

    <div class="container-fluid screener-page-content">
        <div class="padding-bottom-20 m--margin-top-10">
            <div class="row">
                <div class="col-md-12">

                    <div class="m-portlet__body position-relative">

                        <div class="justify-content-between...

CSS

.screener-pre-load-msg {
    font-size: 20px;
    height: 400px;
    padding: 190px 10px 0;
    border: 1px solid #ccc;
    background: #ececec;
    color: #2c2c2d;
}

.value_millions, .asOfDate, #asOfDate {
    color: #898686;
    font-size: 9px;
}

thead {
    background-color: #fcfcfc;
    text-transform: uppercase;
}

.table thead tr th{
    font-size: 12px;
    font-weight: 400;
}
.table td {
    font-weight: 400;
    font-size: 14px;
}   

.font-heavy{
    font-weight: 700 !important;
}

.logo_stock img{
    border-radius: 30px;
    width: 30px;
    box-shadow: 0px 0px 3px #ccc;
    margin-right: 10px;
}

.dropdown > .dropdown-menu:after {
    border-bottom: 7px solid #cccccc;
}

.white-space{
    white-space : nowrap;
}

.m-auto{
    margin: 0 auto;
}

.stock_heading {
    font-weight: 500;
}

.dataTables_wrapper .dataTables_paginate {
    padding-top: 0;
}
.form-group {
    margin-bottom: 0;
}

.portlet.light .dataTables_wrapper .dt-buttons {
    margin: 0 0 20px 0;
}

#filter_button, #clear_button {
    margin: 0px 0 0 0 !important;
    border: none;
    height: 32px;
}

.indicesFilter button.multiselect.dropdown-toggle.btn.btn-default {
    margin-right: 5px;
    height: 30px;
    padding: 5px;
    background: #fff;
    color: #000;
    border: 1px solid #ebedf2 !important;
    border-radius: 2px;
}

select#ddlTabColumns {
    background: #fff;
    color: #000;
    height: 30px;
    font-size: 12px;
    border: 1px solid #ebedf2 !important;
}
.form-control[readonly], .form-control {
    border-color: #ebedf2;
}
.dropdown .btn {
    background: #efefef;
    color: #000;
    font-weight: 500;
}

.input-group-addon {
    padding: 6px 6px 0;
    font-size: 11px;
    font-weight: 400;
    line-height: 2;
    color: #cecece;
    text-align: center;
    background-color: #f2f3f6;
    border: 1px solid #ebedf2;
    border-radius: 4px;
}
.btn_position {
    position: absolute;
    top: -30px;
}

.forestgreen {
    color: #00a97f;
}
.red {
    color:...

JavaScript

var postionX, postionY;
var table;
var mainObject = {
    selectedDropType: "0",
    columnIndex: [],
    postRequestValues: {
        dropDownType: "Indices",
        id: "2",
        tabValue: "Overview",
        subTabValue: ""
    },
    }
$(document).ready(function () {
   showGridData();// Initialize Grid after page ready
});

function showGridData() {
	table = $('#dataGrid').DataTable({
 "language": {
            "aria": {
                "sortAscending": ": activate to sort column ascending",
                "sortDescending": ": activate to sort column descending"
            },
            "emptyTable": "No data available in table",
            "info": "Showing _START_ to _END_ of _TOTAL_ entries",
            "infoEmpty": "No entries found",
            "infoFiltered": "(filtered1 from _MAX_ total entries)",
            "lengthMenu": "_MENU_ entries",
            "search": "Search:",
            "zeroRecords": "No matching records found"
        },

        "lengthMenu": [
            [5, 10, 15, 30, -1],
            [5, 10, 15, 30, "All"] // change per page values here
        ],
        // set the initial value
        "pageLength": 10,
        "sDom": 'lBfrtip',
        "dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
        "responsive": false,
        //"searching": false,
        "ordering": true,
        "paging": false,
        "bLengthChange": false,
        "bPaginate": false,
        "autoWidth": false,
        "scrollX": true,
        "deferRender": true,
       

});
  $('th').each(function () {
            var innerHTML = $(this).html();
            var title = $('th').eq($(this).index()).text();
            var objSortMask = $(this).children('.sortMask');
            var objSpan = $(this).children('span');

            // if sorting exists, add html to div
            var tableHtml = "";
            if (objSortMask.length > 0)...