JSFiddle - React, Tailwind, and code Playground

by princeofabyss

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.js"></script>
<script src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/js/dataTables.checkboxes.min.js"></script>
<table id="questions-pool" width="100%">
  <thead>
    <tr>
      <th></th>
      <th>Questions Pool</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>Question 1?</td>
      <td>387</td>
    </tr>
    <tr>
      <td></td>
      <td>Question 2?</td>
      <td>386</td>
    </tr>
    <tr>
      <td></td>
      <td>Question 3?</td>
      <td>385</td>
    </tr>
    <tr>
      <td></td>
      <td>Question 4?</td>
      <td>384</td>
    </tr>
    <tr>
      <td></td>
      <td>Question 5?</td>
      <td>383</td>
    </tr>
    <tr>
      <td></td>
      <td>Question 6?</td>
      <td>382</td>
    </tr>
    <tr>
      <td></td>
      <td>Question 7?</td>
      <td>381</td>
    </tr>
    <tr>
      <td></td>
      <td>Question 8?</td>
      <td>380</td>
    </tr>
    <tr>
      <td></td>
      <td>Question 9?</td>
      <td>379</td>
    </tr>
    <tr>
      <td></td>
      <td>Question 10?</td>
      <td>378</td>
    </tr>
    <tr>
      <td></td>
      <td>Question 11?</td>
      <td>377</td>
    </tr>
    <tr>
      <td></td>
      <td>Question 12?</td>
      <td>376</td>
    </tr>
    <tr>
      <td></td>
      <td>Question 13?</td>
      <td>375</td>
    </tr>
    <tr>
      <td></td>
      <td>Question 14?</td>
      <td>374</td>
    </tr>
    <tr>
      <td></td>
      <td>Question 15?</td>
      <td>373</td>
    </tr>
    <tr>
      <td></td>
      <td>Question 16?</td>
      <td>372</td>
    </tr>
    <tr>
      <td></td>
      <td>Question 17?</td>
      <td>371</td>
    </tr>
    <tr>
      <td></td>
      <td>Question 18?</td>
      <td>370</td>
    </tr>
    <tr>
      <td></td>
      <td>Question 19?</td>
      <td>369</td>
  ...

CSS

td:last-child,
th:last-child {
  text-align: right
}

#questions-pool_wrapper #upper-controls,
#questions-pool_wrapper #lower-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 5px;
  background: #c1c1c1;
}

#questions-pool_wrapper #upper-controls #questions-pool_length,
#questions-pool_wrapper #lower-controls #questions-pool_info {
  padding-left: 15px;
}

#questions-pool_wrapper #upper-controls #questions-pool_filter {
  padding-right: 15px;
}

#questions-pool_wrapper #upper-controls #questions-pool_length label,
#questions-pool_wrapper #upper-controls #questions-pool_length select,
#questions-pool_wrapper #upper-controls #questions-pool_filter label {
  float: none;
  margin: 0;
}

#questions-pool_wrapper #upper-controls #questions-pool_length label,
#questions-pool_wrapper #upper-controls #questions-pool_filter label,
#questions-pool_wrapper #lower-controls #questions-pool_info {
  font-weight: 700;
}

#questions-pool_wrapper #upper-controls #questions-pool_length select,
#questions-pool_wrapper #upper-controls #questions-pool_filter input {
  font-weight: 400;
}

#questions-pool_wrapper #upper-controls #questions-pool_filter input {
  float: none;
  margin: 0 0 0 5px;
}

#questions-pool_wrapper #lower-controls #questions-pool_paginate a {
  color: #555;
}

#questions-pool_wrapper #lower-controls #questions-pool_paginate .paginate_button {
  display: inline-block;
  padding: 5px 10px;
  margin-left: 10px;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  border-radius: 2px;
  font-weight: 700;
}

#questions-pool_wrapper #lower-controls #questions-pool_paginate .paginate_button:hover {
  background: #333;
  color: #fff;
}

#questions-pool_wrapper #lower-controls #questions-pool_paginate .paginate_button.current {
  background: #fff;
  color: #555;
}

JavaScript

jQuery(function($) {

  $('#questions-pool').DataTable({
    ordering: false,
    dom: '<"#upper-controls"lf>t<"#lower-controls"ip>',
    lengthMenu: [
      [10, 50, 100, -1],
      [10, 50, 100, 'All']
    ],
    initComplete: function(settings) {
      var api = this.api();
      var selected = [387, 386, 385, 384, 383, 382, 381, 380, 379, 378];
      alert(selected);

      api.cells(
        api.rows(function(idx, data, node) {
          alert(data[2]);
          return (selected.indexOf(data[2]) >= 0) ? true : false;
        }).indexes(),
        0
      ).checkboxes.select();
    },
    columnDefs: [{
      targets: 2,
      checkboxes: {
        selectAllPages: false,
      }
    }],
  });

});