Sort An HTML Table In Alphabetical Or Numerical Order – Sortable Tables

Preview:

Description:

A JavaScript plugin for sortable tables which enables the user to sort the table columns in alphabetical or numerical order.

How to use it:

Insert the minified version of the Sortable Tables plugin into the HTML file.

<link rel="stylesheet" href="dist/sortable-tables.min.css">
<script src="dist/sortable-tables.min.js"></script>

Add the CSS class ‘sortable-table’ to your HTML table and add the class ‘numeric-sort’ to table columns containing numeric values.

<table class="sortable-table">
  <thead>
      <tr>
          <th>Token</th>
          <th>Symbol</th>
          <th class="numeric-sort">Volume</th>
          <th class="numeric-sort">Price</th>
          <th class="numeric-sort">Change</th>
          <th class="numeric-sort">Required</th>
          <th class="numeric-sort">Nodes</th>
          <th class="numeric-sort">Coins</th>
          <th class="numeric-sort">Worth</th>
          <th class="numeric-sort">Daily</th>
          <th class="numeric-sort">Weekly</th>
          <th class="numeric-sort">Monthly</th>
          <th class="numeric-sort">Yearly</th>
          <th class="numeric-sort">ROI % (annual)</th>
          <th class="numeric-sort">ROI days</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td><a href="javascript:void(0)">Dash</a></td>
          <td>DASH</td>
          <td>$210,097,837</td>
          <td>$212.36</td>
          <td>-2.52%</td>
          <td>1,000.0</td>
          <td>3,616</td>
          <td>0.19</td>
          <td>$212,360.00</td>
          <td>$40.35</td>
          <td>$282.44</td>
          <td>$1,210.45</td>
          <td>$14,727.17</td>
          <td>6.935%</td>
          <td>5264</td>
      </tr>
      <tr>
          <td><a href="javascript:void(0)">ZCoin</a></td>
          <td>XZC</td>
          <td>$654,600</td>
          <td>$14.32</td>
          <td>9.42%</td>
          <td>1,000.0</td>
          <td>3,497</td>
          <td>0.67</td>
          <td>$14,323.30</td>
          <td>$9.60</td>
          <td>$67.18</td>
          <td>$287.90</td>
          <td>$3,502.76</td>
          <td>24.455%</td>
          <td>1493</td>
      </tr>
      <tr>
          <td><a href="javascript:void(0)">Alqo</a></td>
          <td>ALQO</td>
          <td>$18,110</td>
          <td>$0.10</td>
          <td>3.94%</td>
          <td>10,000.0</td>
          <td>3,693</td>
          <td>22.44</td>
          <td>$962.00</td>
          <td>$2.16</td>
          <td>$15.11</td>
          <td>$64.76</td>
          <td>$787.94</td>
          <td>81.906%</td>
          <td>446</td>
      </tr>
      <tr>
          <td><a href="javascript:void(0)">Gincoin</a></td>
          <td>GIN</td>
          <td>$80,169</td>
          <td>$4.69</td>
          <td>2.00%</td>
          <td>1,000.0</td>
          <td>1,928</td>
          <td>3.52</td>
          <td>$4,685.70</td>
          <td>$16.49</td>
          <td>$115.46</td>
          <td>$494.81</td>
          <td>$6,020.19</td>
          <td>128.480%</td>
          <td>285</td>
      </tr>
      <tr>
          <td><a href="javascript:void(0)">Infinex</a></td>
          <td>IFX</td>
          <td>$7,419</td>
          <td>$0.52</td>
          <td>0.00%</td>
          <td>1,000.0</td>
          <td>1,458</td>
          <td>3.11</td>
          <td>$518.60</td>
          <td>$1.61</td>
          <td>$11.29</td>
          <td>$48.39</td>
          <td>$588.69</td>
          <td>113.515%</td>
          <td>322</td>
      </tr>
  </tbody>
</table>

Changelog:

v1.1.2 (11/14/2020)

• refactor: Enclose the package inside an IIFE to not expose internal function