<style>
    .tableFixHead          { overflow: auto; height: 100px; }
    .tableFixHead thead th { position: sticky; top: 0; z-index: 1; background-color:grey;}
    table  { border-collapse: collapse; width: 100%; }
    th, td { padding: 8px 16px;}

    td {
        vertical-align: middle!important;
        padding:0px!important;
        text-align:left!important;
        background-color: #eee;
    }

    tr.highlight > td {
        background: #3c8dbc!important;
        color: #333!important;
    }

    #allaccountreport-table thead th i { padding-left: 5px; }
</style>
<div id="screen[index]" style="padding-top: 20px;">
    <div class="col-md-12" id="errorShow"></div>

    <div class="col-md-12" style="margin-top: 10px;">
        <div class="tableFixHead" id="allAccountReportTable" style="height: 710px;overflow: auto;">
            <table class="table table-bordered" style="width: 100%; max-width: 100%; margin-bottom: 20px;" id="allaccountreport-table">
            </table>
        </div>
    </div>

    <!-- button to trigger the things -->
    <button id="activatebuttonscreen[index]" onclick='reactivatescreen();' style="display: none;">activate screen button</button>
</div>

<div id="screen[index]a"></div>

<!-- the function index that you want to run -->
<script type="text/javascript">
    function reactivatescreen() {
        swal2("activation screen [index]");
    }
</script>

<script>
$(document).ready(function () {
    filterAllAccountReport();
});
</script>
