Home Javascript JavaScript Client-Side HTML Table Sorting Library

JavaScript Client-Side HTML Table Sorting Library

Javascript webcodeflow · September 3, 2022 · 0 Comment

table-sort.js is a sorting library for HTML tables from the side of the JavaScript client with no dependencies required.

table-sort js is a simplified table sorter that is easy to implement by adding the CSS class table classification to the table tag.

How to make use of it:

1. Download the library and insert the table-sort.js into the HTML web page.

<script src="table-sort.js"></script>

2. Add the CSS class table-sort to your HTML table and the library will do the remaining.

<table class="table-sort">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

3. If you’d wish to sort table rows in reverse order, simply add the order-by-desc class to the th component.

<table class="table-sort">
  <thead>
    <tr>
      <th>Month</th>
      <th class="order-by-desc">Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

Minimal Table Sorter, HTML table sorting Plugin/Github