<style>
    .table-borderless th,
    .table-borderless td,
    .table-borderless thead th,
    .table-borderless tbody+tbody {
        padding: 4px;
    }

    .kt-datatable.kt-datatable--default>.kt-datatable__table>.kt-datatable__head .kt-datatable__row>.kt-datatable__cell,
    .kt-datatable.kt-datatable--default>.kt-datatable__table>.kt-datatable__body .kt-datatable__row>.kt-datatable__cell,
    .kt-datatable.kt-datatable--default>.kt-datatable__table>.kt-datatable__foot .kt-datatable__row>.kt-datatable__cell>.kt-marginless {
        padding: 4px;
    }

    #delivery-list-table td input[type=text],
    #delivery-list-table td select {
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        border: none;
        padding: 10px;
        box-sizing: border-box;
    }

    #delivery-list-table table {
        border-collapse: collapse;
        width: 100%;
    }

    #delivery-list-table th, td {
        padding: 8px 16px;
    }

    #delivery-list-table td {
        vertical-align: middle !important;
        padding: 0px !important;
        text-align: center !important;
        background-color: #eee;
    }

    #delivery-list-table td {
        position: relative;
    }
</style>

<div class="row">
    <div class="col-lg-12">
        <div class="card-body row" style="padding-top: 0px;">
            <div class="col-lg-6">
                <div class="kt-datatable kt-datatable--default kt-datatable--brand kt-datatable--loaded">

                    <div style="display:none;">
                        <select class="form-control" id="cmbProspectDeliveryContact"></select>
                    </div>
                    <table class="kt-datatable__table" id="prospectdelivery-table">
                        <thead class="kt-datatable__head" style="background-color: #E0E0E0">
                            <tr class="dnd-moved kt-datatable__row" style="left: 0px;">
                                <th data-field="deliveryid" class="kt-datatable__cell" id="col_deliveryid" name="prospect-delivery_sort_column" onclick="sortingColumn(this,'col_deliveryid','asc');" style="display: none;">
                                    ID<span><i class="fa"></i></span>
                                </th>
                                <th data-field="deliverycode" class="kt-datatable__cell" style="width: 5%;" id="col_deliverycode" name="prospect-delivery_sort_column" onclick="sortingColumn(this,'col_deliverycode','desc');">
                                    Delivery Code<span><i class="fa fa-sort-up"></i></span>
                                </th>
                                <th data-field="deliveryaddress" class="kt-datatable__cell" style="width: 10%;" id="col_deliveryaddress" name="prospect-delivery_sort_column" onclick="sortingColumn(this,'col_deliveryaddress','asc');">
                                    Delivery Address<span><i class="fa"></i></span>
                                </th>
                                <th data-field="deliverycontact" class="kt-datatable__cell" style="width: 5%;" id="col_deliverycontact" name="prospect-delivery_sort_column" onclick="sortingColumn(this,'col_deliverycontact','asc');">
                                    Contact<span><i class="fa"></i></span>
                                </th>
                                <th data-field="filter" class="kt-datatable__cell" style="width: 2%;" id="col_filter">
                                    <button type="button" id="btnFilterDelivery" style="border:0px;" onclick="filterRow('delivery-row-filter',this,true);"><i class="fa fa-filter" style="color:black;"></i></button>
                                </th>
                            </tr>
                            <!-- <tr data-row="delivery-rows-0" class="dnd-moved kt-datatable__row" style="left: 0px;" id="delivery-row-filter"> -->
                            <tr class="dnd-moved kt-datatable__row" style="left: 0px; display:none;" id="delivery-row-filter">
                                <td data-field="deliveryid" class="kt-datatable__cell" id="col_deliveryid" style="display: none;">&nbsp;</td>
                                <td data-field="deliverycode" class="kt-datatable__cell" id="col_deliverycode">
                                    <input type="text" class="form-control" name="prospectdelivery-input-filter" id="txtcoldeliverycode" onkeyup="filterData(this,1);" />
                                </td>
                                <td data-field="deliveryaddress" class="kt-datatable__cell" id="col_deliveryaddress">
                                    <input type="text" class="form-control" name="prospectdelivery-input-filter" id="txtcoldeliveryaddress" onkeyup="filterData(this,2);" />
                                </td>
                                <td data-field="deliverycontact" class="kt-datatable__cell" id="col_deliverycontact">
                                    <input type="text" class="form-control" name="prospectdelivery-input-filter" id="txtcoldeliverycontact" onkeyup="filterData(this,8);" />
                                </td>
                                <td data-field="filter" class="kt-datatable__cell" id="col_filter">&nbsp;</td>
                            </tr>
                        </thead>
                        <tbody class="kt-datatable__body" id="prospect-delivery-list-table">
                        </tbody>
                    </table>
                    <br>
                    <div class="col-lg-12 text-right">
                        <button class="btn btn-success btn-sm btn-icon btn-icon-md" type="button" id="btnNewDelivery" onclick="newProspectDelivery();"><i class="fa fa-plus"></i></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>