JSFiddle - React, Tailwind, and code Playground

by Calvin Ananda

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
  <table id="mainTable" class="table table-bordered table-hover">
    <thead>
      <tr>
        <th></th>
        <th>Audience Name</th>
        <th>Type</th>
        <th>Size</th>
        <th>Date Created</th>
        <th>Actions</th>
      </tr>
    </thead>
  </table>

JavaScript

$('#mainTable').dataTable({
  "ajax": "https://api.myjson.com/bins/zvujb",
  "columns": [
        { "data": "id"},
        { "data": "name" },
        { "data": "subtype"},
        { "data": "approximate_count" },
        { "data": "time_created" },
        {data: null ,
        "sClass" : "center",
        "sDefaultContent" : '<button class="deleteRow">Delete</button> '
        },
             ],   
  "columnDefs": [{
    "targets": 0,
    "checkboxes": {
      "selectRow": true
    },
    "render": function(data, type, full, meta) {
      return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
    }
  }],
  "scrollY": "200px",

}); // mainTable

$(document).on('click', '.deleteRow', function() {
$(this).closest('tr').remove();
});