JSFiddle - React, Tailwind, and code Playground

by Colin Marks

HTML

<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js"></script>
<link rel="stylesheet" href="http://themetrace.com/demo/bracket/css/style.default.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css">
<div class="table-responsive private-network-table">
  <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper no-footer">
    <div id="DataTables_Table_0_filter" class="dataTables_filter">
      <label>Search:
        <input type="search" class="" placeholder="" aria-controls="DataTables_Table_0">
      </label>
    </div>
    <table id="device-table" class="table device-table dataTable no-footer" id="DataTables_Table_0" role="grid" aria-describedby="DataTables_Table_0_info">
      <thead>
        <tr role="row">
          <th width="5%" class="sorting_asc" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-sort="ascending" aria-label="#: activate to sort column descending" style="width: 57px;">#</th>
          <th width="10%" class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Device: activate to sort column ascending" style="width: 136px;">Device</th>
          <th width="15%" class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending" style="width: 214px;">Name</th>
          <th width="15%" class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="IP Address: activate to sort column ascending" style="width: 216px;">IP Address</th>
          <th width="15%" class="sorting" tabindex="0" aria-controls="DataTables_Table_0"...

CSS

.dataTables_filter,
.dataTables_info {
  display: none;
}

JavaScript

$(document).ready(function() {
$('#device-table').DataTable({
ordering:false,
  fixedHeader: {
    header: true,
    footer: true
  }
});
 $('.device-table thead').on( 'click', 'th', function () {
alert('x');

} );



});