JSFiddle - React, Tailwind, and code Playground
HTML
<pre><code id="res"></code></pre>
<pre><code>control:
a b c
-----
a a a
b a a
b b a
b c a
b c a
b c a
x c a
b a b
b b b
b b b
b b b
d b b
b c b
c d b
c b d</code></pre>
CSS
pre {
float: left;
padding: 5px;
border: 2px solid #000;
min-width: 80px;
margin: 5px;
}
JavaScript
[].map||(Array.prototype.map=function(a){for(var b=this,c=b.length,d=[],e=0,f;e<b;)d[e]=e in b?a.call(arguments[1],b[e],e++,b):f;return d})
function dynamicSort(property) {
return function (obj1,obj2) {
return obj1[property] > obj2[property] ? 1
: obj1[property] < obj2[property] ? -1 : 0;
}
}
function dynamicSortMultiple() {
//save the arguments object as it will be overwritten
//note that arguments object is an array-like object
//consisting of the names of the properties to sort by
var props = arguments;
return function (obj1, obj2) {
var i = 0, result = 0, numberOfProperties = props.length;
//try getting a different result from 0 (equal)
//as long as we have extra properties to compare
while(result === 0 && i < numberOfProperties) {
result = dynamicSort(props[i])(obj1, obj2);
i++;
}
return result;
}
}
var arr = [
{a:"a",b:"a",c:"a"},
{a:"b",b:"c",c:"b"},
{a:"b",b:"a",c:"a"},
{a:"b",b:"a",c:"b"},
{a:"b",b:"b",c:"a"},
{a:"b",b:"b",c:"b"},
{a:"b",b:"c",c:"a"},
{a:"b",b:"b",c:"b"},
{a:"b",b:"c",c:"a"},
{a:"b",b:"b",c:"b"},
{a:"b",b:"c",c:"a"},
{a:"c",b:"d",c:"b"},
{a:"d",b:"b",c:"b"},
{a:"c",b:"b",c:"d"},
{a:"x",b:"c",c:"a"}];
document.getElementById("res").innerText = "result:\na b c\n-----\n" + arr
.sort(dynamicSortMultiple("c","b","a"))
.map(function(val, i) {return [val["a"], val["b"], val["c"]].join(" ")})
.join("\n");