JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
</head>
<body>

<table id="myTable" class="table table-hover table-striped table-bordered" width="100%">

        <thead id="table-head table-header-row">

        <tr>
            <th class="text-center align-middle" scope="col">Actions</th>
            <th class="text-center align-middle thAlign">Assignment Code</th>
            <th class="text-center align-middle thAlign">Assignment label</th>
            <th class="text-center align-middle thAlign">Label Details</th>
            <th class="text-center align-middle thAlign">GBU Code</th>
            <th class="text-center align-middle thAlign">Global Business</th>
			<th class="text-center align-middle thAlign displayNone">Global Business Dummy</th>
            <th class="text-center align-middle thAlign">is Deleted</th>
			<th class="text-center align-middle thAlign displayNone">is Deleted Dummy</th>
        </tr>
        </thead>
        <tbody>
          <tr>
					<td id="linksRow" class="textCenterAlign">
						<div id="updateCancel">
							<a class="editbtn textLink padding1" href="#">Edit</a>
							<a class="deletebtn textLink padding1" id="deletebtn" href="#">Delete</a>
						</div>
					</td>
					<td>Brazil</td>
  ...

JavaScript

$(document).ready(function() {
    $('#myTable').DataTable({
        "columnDefs": [{
            "orderable": false,
            "targets": 0
        }],
        "pageLength": 7,
        "order": [
            [1, "asc"]
        ],
        "paging": true,
        "lengthMenu": [
            [10, 25, 50, 100, -1],
            [20, 25, 50, 100, "All"]
        ],
        "ordering": true
    });
    var table = $('#myTable').DataTable();
    table.columns().every(function() {
        var term = this;
        $('input', this.footer()).on('keyup', function() {
            term
                .search(this.value)
                .draw();
        });
    });
    $('#myTable tfoot tr').appendTo('#myTable thead');

    $('#myTable').on('click', '.editbtn', function(event) {
        alert("Edit");
    });
});