JSFiddle - React, Tailwind, and code Playground

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

var table = $('#mainTable').dataTable({
  "ajax": "https://api.myjson.com/bins/zvujb",
  "language": {
    "sEmptyTable": "No data available."
  },
  rowId: 'id',
  "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(e) {
    var id = $(this).parents('tr').attr('id');
    console.log(id);
    var rowid = document.getElementById(id);
    console.log(rowid);
    var Pos = table.fnGetPosition(rowid);
    table.fnDeleteRow(Pos);
});