JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://underscorejs.org/underscore-min.js"></script>
<div id="result"></div>
<button id="sortByName">Name</button>
<button id="sortByDescription">Description</button>
JavaScript
var array = [{ name: 'test_1234', description: 'zzaaa bb cc'},
{ name: 'zz1111', description: 'ZAAbbbcc'},
{ name: 'TEST', description: '4422'},
{ name: '1a2929', description: 'abcdef'},
{ name: 'abc', description: 'Full description'},
{ name: 'GGGGH', description: '123456'}];
$('#sortByName').click(function () {
sortRows('name');
});
$('#sortByDescription').click(function () {
sortRows('description');
});
function sortRows(sortProperty) {
$("#result").text('');
var sorted = _.sortBy(array, function (i) {
switch(sortProperty) {
case 'name':
return i.name.toLowerCase();
break;
case 'description':
return i.description.toLowerCase();
break;
}
});
_.each(sorted, function (el) {
$("<div>").text(el.name + ' - ' + el.description).appendTo($('#result'));
});
}