JSFiddle - React, Tailwind, and code Playground

by Mottie

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.28.5/js/jquery.tablesorter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.28.5/js/jquery.tablesorter.widgets.min.js"></script>
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.default.css">
<table id="tablesorter-example">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>001</td>
    </tr>
    <tr>
      <td>2</td>
      <td>1</td>
    </tr>
    <tr>
      <td>3</td>
      <td>01</td>
    </tr>
    <tr>
      <td>4</td>
      <td>000001</td>
    </tr>
    <tr>
      <td>5</td>
      <td>00001</td>
    </tr>
    <tr>
      <td>6</td>
      <td>0001</td>
    </tr>
    <tr>
      <td>7</td>
      <td>2</td>
    </tr>
    <tr>
      <td>8</td>
      <td>10</td>
    </tr>
    <tr>
      <td>9</td>
      <td>12</td>
    </tr>
  </tbody>
</table>

JavaScript

$(document).ready(function() {

  $.tablesorter.addParser({
    id: 'leadingZeros',
    is: function() {
      return false;
    },
    format: function(s, table) {
      var number = parseFloat(s),
        str = number.toString();
      if (s.length !== str.length) {
        // subtract a decimal equivalent of the string length
        // so "0001" sorts before "01"
        number -= 0.00000001 * (s.length - str.length);
      }
      return number;
    },
    type: 'number'
  });

  $("#tablesorter-example").tablesorter({
    headers: {
      1: { sorter: 'leadingZeros' }
    }
  });

});