    <style type="text/css">
    label {
        font-weight: normal !important;
    }

    #user-body-table tr {
        cursor: pointer;
    }

    tbody>tr.highlight>td {
        background: #aed1ea !important;
    }

    tbody>tr.highlight>td input {
        background: #aed1ea !important;
    }

    .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;
        padding-left: 8px !important;
        text-align: left !important;
        background-color: #eee;
    }

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

    td input,
    td select {
        border-radius: 0px !important;
        border-color: transparent !important;
        background-color: white;
        height: 30px;
        width: 95%;
    }

    #userLoadingModal {
        z-index: 9999 !important;
    }
</style>
<div id="screen[index]" style="padding-top: 20px;">
    <div>
        <div class="col-md-12">
        </div>
    </div>

    <div class="col-md-12" id="errorShow"></div>

    <div class="col-md-6" style="margin-top: 20px;">
        <div class="tableFixHead" id="testData" style="height: 600px;overflow: auto;">
            <select style="display:none;" id="cobusergroup" >
                <?php echo $this->getUserGroupOption(); ?>
            </select>
            <table class="table table-bordered" style="width: 100%; max-width: 100%; margin-bottom: 20px;" id="user-table">
                <thead style="background-color: grey;color:white;">
                    <tr>
                        <th width='4%'>
                            <i class="fa fa-filter" style="font-size:12px;cursor:pointer;" onclick="filterRow('user-row-filter',this,true);"></i>
                        </th>
                        <th data-field="code" class="kt-datatable__cell" style="width: 20%;" id="col_code" name="user_sort_column" onclick="sortingColumn(this,'col_code','desc');">
                            Code<i class="fa"></i>
                        </th>
                        <th data-field="name" class="kt-datatable__cell" style="width: 50%;" id="col_name" name="user_sort_column" onclick="sortingColumn(this,'col_name','desc');">
                            Name<i class="fa fa-sort-up"></i>
                        </th>
                        <th data-field="user_group" class="kt-datatable__cell" style="width:30%;" id="col_user_group" name="user_sort_column" onclick="sortingColumn(this,'col_user_group','desc');">
                            User Group<i class="fa fa-sort-up"></i>
                        </th>
                        <!-- <th data-field="status" class="kt-datatable__cell" style="width: 20%;" id="col_status" name="user_sort_column" onclick="sortingColumn(this,'col_status','asc');">
                            Status<i class="fa"></i>
                        </th> -->
                    </tr>
                    <tr style="left: 0px;" id="user-row-filter">
                        <td width="4%" data-field="filter" id="col_filter">&nbsp;</td>
                        <td width="20%" data-field="code" id="col_code">
                            <input type="text" class="form-control" name="user-input-filter" id="txtcolcode" onkeyup="filterData(this,1);" />
                        </td>
                        <td width="50%" data-field="name" id="col_name">
                            <input type="text" class="form-control" name="user-input-filter" id="txtcolname" onkeyup="filterData(this,2);" />
                        </td>
                        <td width="30%" data-field="user_group" id="col_user_group">
                            <select name="user_group" id="cobusergroup">
                                <option hidden>Choose a User Group</option>
                            </select>
                        </td>
                        <!-- <td width="20%" data-field="status" id="col_status">
                            <input type="text" class="form-control" name="user-input-filter" id="txtcolstatus" onkeyup="filterData(this,3);" />
                        </td> -->
                    </tr>
                </thead>
                <tbody id="user-table-body">
                </tbody>
            </table>
        </div>
    </div>

    <div class="col-md-8" style="margin-top: 20px;clear: both;">
        <button class="col-sm-2 btn btn-secondary" style="background-color:grey;color:white;margin-right: 10px;" type="button" onclick="saveUser();">Ok</button>
		<button class="col-sm-2 btn btn-secondary" style="background-color:grey;color:white;margin-right: 10px;" type="button" onclick="addNewUserLine();">Add New</button>
		<button class="col-sm-2 btn btn-secondary" style="background-color:grey;color:white;margin-right: 10px;" type="button" onclick="amendUserLine();">Amend</button>
		<button class="col-sm-2 btn btn-secondary" style="background-color:grey;color:white;margin-right: 10px;" type="button" onclick="deleteUserLine();">Delete</button>
		<button class="col-sm-2 btn btn-secondary" style="background-color:grey;color:white;" type="button" onclick="resetUserPassword();">Reset Password</button>
    </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>

<!-- //================================================================= -->
<!-- LOADING PROGRESS MODAL -->
<div id="userLoadingModal" tabindex="-1" class="modal fade" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background-color:#3c8dbc;color:white;">
                <h4 class="modal-title" id="userLoadingModalTitle">Processing...</h4>
            </div>
            <div class="modal-body">
                <div class="progress progress-striped active">
                    <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:100%">
                        <!-- <span class="sr-only">70% Complete</span> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- //================================================================= -->

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

<script>
    $(document).ready(function() {
        sorts = "";

        filterRow('user-row-filter', this, false);
        userFilter();
    });
</script>