JSFiddle - React, Tailwind, and code Playground

by Skooljester

HTML

<div id="holder"></div>

JavaScript

function sortJsonArrayByProp(objArray, prop){
    if (arguments.length<2){
        throw new Error("sortJsonArrayByProp requires 2 arguments");
    }
    if (objArray && objArray.constructor===Array){
        var propPath = (prop.constructor===Array) ? prop : prop.split(".");
        objArray.sort(function(a,b){
            for (var p in propPath){
                if (a[propPath[p]] &amp;&amp; b[propPath[p]]){
                    a = a[propPath[p]];
                    b = b[propPath[p]];
                }
            }
            // convert numeric strings to integers
            a = a.match(/^\d+$/) ? +a : a;
            b = b.match(/^\d+$/) ? +b : b;
            return ( (a < b) ? -1 : ((a > b) ? 1 : 0) );
        });
    }
}

var arr = [{"Functional Category":"T-Shirt","Brand Name":"threadless","When Obtained":"Last 3 Months","How Obtained":"Purchased","How Often Worn":"Monthly","Where It's Made":"India","Has a Graphic":"Yes"},{"Functional Category":"T-Shirt","Brand Name":"RVCA","When Obtained":"2 Years Ago","How Obtained":"Purchased","How Often Worn":"Bi-Monthly","Where It's Made":"Mexico","Has a Graphic":"Yes"},{"Functional Category":"T-Shirt","Brand Name":"Dogfish Head","When Obtained":"Last 6 Months","How Obtained":"Gift","How Often Worn":"Tri-Monthly","Where It's Made":"Honduras","Has a Graphic":"Yes"},{"Functional Category":"Sweater","Brand Name":"H&M","When Obtained":"Last Month","How Obtained":"Purchased","How Often Worn":"Weekly","Where It's Made":"Bangladesh","Has a Graphic":"No"},{"Functional Category":"V-Neck","Brand Name":"Zine","When Obtained":"Last 3 Months","How Obtained":"Gift","How Often Worn":"Bi-Monthly","Where It's Made":"China","Has a Graphic":"No"},{"Functional Category":"Long-sleeve","Brand Name":"H&M","When Obtained":"Last 6 Months","How Obtained":"Purchased","How Often Worn":"Bi-Monthly","Where It's Made":"China","Has a Graphic":"No"},{"Functional Category":"T-Shirt","Brand Name":"threadless","When Obtained":"Last 3 Months","How...