JSFiddle - React, Tailwind, and code Playground

by helloIndia

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<div class="tab-content mt-5" id="myTabContent">

  <div class="tab-pane fade show active" id="kt_tab_pane_allPrograms" role="tabpanel" aria-labelledby="kt_tab_pane_allPrograms">

    <div class="Inner_kt_tableR">
      <div class="Inner_kt_tableR_top">
        <div class="row">
          <div class="col-sm-6">
            <div class="Inner_kt_tableR_top_inner">
              <a href="javascript:void(0);" data-toggle="modal" data-target="#addstaffModal" class="form_brntnxd minwdth mrbtmklright">
                Add
              </a>
              <a href="javascript:void(0);" class="form_brntnxd minwdth archiv mrbtmklright borbtn">Archive</a>
              <a href="javascript:void(0);" class="form_brntnxd minwdth archiv mrbtmklright borbtn">Export</a>
              <a href="javascript:void(0);" class="form_brntnxd minwdth borbtn mrbtmklright">Import</a>
              <a href="javascript:void(0);" class="form_brntnxd minwdth borbtn" data-toggle="modal" data-target="#addfilterfModal">Filters • 3</a>
              <div class="f_p_searchk"><input type="text" class="form-control" placeholder="Search" id="program_table_search_query">
                <span><i class="fas fa-search"></i></span>
              </div>
            </div>
          </div>
          <div class="col-sm-6">
            <div...

JavaScript

$(document).ready(function () {
  var table = $("#program_table").DataTable({
    dom: "tplis",
    language: {
      lengthMenu: "View _MENU_",
      searching: true,
      info: "_END_ of _TOTAL_",
      paginate: {
        next: "Next",
        previous: "Prev"
      }
    },
    initComplete: function (settings, json) {
      $("#program_page_nitionsd").append(
        $("#program_table_wrapper .dataTables_paginate")
      );
      $("#program_page_viewd").append(
        $("#program_table_wrapper .dataTables_length")
      );
      $("#program_page_info").append(
        $("#program_table_wrapper .dataTables_info")
      );
    },
    columns: [
      {
        data: "id"
      },
      {},
      {
        data: "name"
      },
      {
        data: "organization"
      },
      {
        data: "numberOfStudents"
      },
      {
        data: "lastChanged"
      },
      {}
    ],
    order: [[1, "asc"]]
  });
  $(".dataTables_length").addClass("bs-select");
});