Vanilla JavaScript table sort
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md Apr 16, 2018
CONTRIBUTING.md
LICENSE Create LICENSE Dec 16, 2017
PULL_REQUEST_TEMPLATE.md Create PULL_REQUEST_TEMPLATE.md Apr 16, 2018
README.md Less code, more comments Apr 2, 2018
sortable.css Less code, more comments Apr 2, 2018
sortable.html minor edits Jul 10, 2017
sortable.js Remove dir-* also when dir is not set Apr 16, 2018
sortable.min.css Less code, more comments Apr 2, 2018
sortable.min.js Remove dir-* also when dir is not set Apr 16, 2018
sortable.scss Less code, more comments Apr 2, 2018

README.md

sortable - a tiny, vanilla JS table sorter

Makes any table with class="sortable", er, sortable. That is the user can click on a table header and change the sorting of the table rows.

Just include the JavaScript and it will work. No function calls needed, all is done with an eventListener. (the CSS is not strictly needed, but makes it pretty and user friendly)

Worth mentioning:

  • 630 bytes minified.

  • Works with JS/ajax generated tables.(due to the eventListener)

  • Lightning fast. For Huge tables it will slow down of course. That's just life I guess.

  • Requires thead and tbody.

  • cross browser, ie9+

  • eventListeners attached to the rows WILL be removed

An example

<table class="sortable">
  <thead>
    <tr>
      <th>Role</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Master</td>
      <td>Rick</td>
    </tr>
    <tr>
      <td>Servant</td>
      <td><a href="javascript:alert('Morty');">Morty</a></td>
    </tr>
  </tbody>
</table>
<link href="sortable.css" rel="stylesheet">
<script src="sortable.js"></script>