JSFiddle - React, Tailwind, and code Playground

by mindplay

HTML

<h3>Sort a list:</h3>

<ul>
    <li>A</li>
    <li>C</li>
    <li>B</li>
    <li>E</li>
    <li>D</li>
</ul>

<h3>Sort a table:</h3>

<table>
    <tr><td>5</td><td>foooo</td></tr>
    <tr><td>4</td><td>fooo</td></tr>
    <tr><td>1</td><td>foo</td></tr>
    <tr><td>3</td><td>fo</td></tr>
    <tr><td>2</td><td>f</td></tr>
</table>

CSS

table td { border:solid 1px #ddd; }

JavaScript

/**
 * Sort a list of elements and apply the order to the DOM.
 *
 * https://gist.github.com/mindplay-dk/6825439
 */
jQuery.fn.order = function(asc, fn) {
    fn = fn || function (el) {
        return $(el).text().replace(/^\s+|\s+$/g, '');
    };
    var T = asc !== false ? 1 : -1,
        F = asc !== false ? -1 : 1;
    this.sort(function (a, b) {
        a = fn(a), b = fn(b);
        if (a == b) return 0;
        return a < b ? F : T;
    });
    this.each(function (i) {
        this.parentNode.appendChild(this);
    });
};

// alphabetical list sort, ascending: (default)

$('ul li').order();

// sort table rows by descending value in first column:

$('table tr').order(false, function (el) {
    return parseInt($('td', el).text());
});