JSFiddle - React, Tailwind, and code Playground

by paulhildebrandt

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<table class="dataTable" id="springTable">
  <thead>
    <tr>
      <th>Length</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>4</td>
    </tr>
    <tr>
      <td>10</td>
    </tr>
    <tr>
      <td>6</td>
    </tr>
    <tr>
      <td>8</td>
    </tr>
    <tr>
      <td>22</td>
    </tr>
    <tr>
      <td>13</td>
    </tr>
    <tr>
      <td>3</td>
    </tr>
    <tr>
      <td>27</td>
    </tr>
    <tr>
      <td>27</td>
    </tr>
    <tr>
      <td>17</td>
    </tr>
    <tr>
      <td>6</td>
    </tr>
  </tbody>
</table>

JavaScript

$(document).ready(function() {
    $('#springTable').DataTable({
      columnDefs: [{
        targets: 0,
        type: 'custom'
      }]
    });

    jQuery.fn.dataTableExt.oSort["custom-desc"] = function(x, y) {
      return parseInt(x) < parseInt(y);
    };

    jQuery.fn.dataTableExt.oSort["custom-asc"] = function(x, y) {
      return parseInt(x) > parseInt(y);
    };
  });