Lightweight Table Sorting Plugin For jQuery - FlexSort

FlexSort is a lightweight, flexible jQuery table sorting plugin which allows for sorting each column of an flexbox-based table individually by clicking on the header. Supports alphabets, numeric values and even currencies.

How to use it:

1. Place the core style sheet flexsort.css in the header, and the JavaScript file flexsort.js at the bottom of the html page.

<link rel="stylesheet" href="flexsort.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="flexsort.js"></script>

2. Add your tabular data into the flexbox table following the markup structure like this:

<div class="myflextable">
  <div class="table-row header">
    <div class="column name">Name</div>
    <div class="column age">Age</div>
    <div class="column sale">Total Sale</div>
  </div>

  <div class="table-row">
    <div class="column name">Alex Smith</div>
    <div class="column age">42</div>
    <div class="column sale">£44.25</div>
  </div>

  <div class="table-row">
    <div class="column name">John Roberts</div>
    <div class="column age">66</div>
    <div class="column sale">£31.12</div>
  </div>

  <div class="table-row">
    <div class="column name">David Jameson</div>
    <div class="column age">42</div>
    <div class="column sale">£11.74</div>
  </div>

  ...
  
</div>

3. Active the sorting functionality on the table.

$('div.myflextable').flexsort();

4. If you want to append more data to the table dynamically:

var data = [["Dave",48,25],["Robert",48,11]]
$('div.myflextable').flexsort({data: data});

5. All default config options.

$('div.myflextable').flexsort({

  // css class of rows
  row_name: "table-row",

  // css class of columns
  column_name: "column",

  // css class of headers
  header_row_class: "header",

  // array of SORTABLE columns, by default all
  columns: [] 
  
});

---

This awesome jQuery plugin is developed by MrJoelKelly. For more Advanced Usages, please check the demo page or visit the official website.