JSFiddle - React, Tailwind, and code Playground

by Skooljester

HTML

<table id="dataTable">
    <tr>
        <th>Functional Category</th>
        <th>Brand Name</th>
        <th>When Obtained</th>
        <th>How Obtained</th>
        <th>How Often Worn</th>
        <th>Where It's Made</th>
        <th>Has a Graphic</th>
    </tr>
    <tr>
        <td>T-Shirt</td>
        <td>threadless</td>
        <td>Last 3 Months</td>
        <td>Purchased</td>
        <td>Monthly</td>
        <td>India</td>
        <td>Yes</td>
    </tr>
    <tr>
        <td>T-Shirt</td>
        <td>RVCA</td>
        <td>2 Years Ago</td>
        <td>Purchased</td>
        <td>Bi-Monthly</td>
        <td>Mexico</td>
        <td>Yes</td>
    </tr>
    <tr>
        <td>T-Shirt</td>
        <td>Dogfish Head</td>
        <td>Last 6 Months</td>
        <td>Gift</td>
        <td>Tri-Monthly</td>
        <td>Honduras</td>
        <td>Yes</td>
    </tr>
    <tr>
        <td>Sweater</td>
        <td>H&M</td>
        <td>Last Month</td>
        <td>Purchased</td>
        <td>Weekly</td>
        <td>Bangladesh</td>
        <td>No</td>
    </tr>
    <tr>
        <td>V-Neck</td>
        <td>Zine</td>
        <td>Last 3 Months</td>
        <td>Gift</td>
        <td>Bi-Monthly</td>
        <td>China</td>
        <td>No</td>
    </tr>
    <tr>
        <td>Long-sleeve</td>
        <td>H&M</td>
        <td>Last 6 Months</td>
        <td>Purchased</td>
        <td>Bi-Monthly</td>
        <td>China</td>
        <td>No</td>
    </tr>
    <tr>
        <td>T-Shirt</td>
        <td>threadless</td>
        <td>Last 3 Months</td>
        <td>Purchased</td>
        <td>Tri-Monthly</td>
        <td>Chicago</td>
        <td>Yes</td>
    </tr>
    <tr>
        <td>Sweater</td>
        <td>H&M</td>
        <td>Last Month</td>
        <td>Purchased</td>
        <td>Bi-Monthly</td>
        <td>Bangladesh</td>
        <td>No</td>
    </tr>
    <tr>
        <td>V-Neck</td>
        <td>H&M</td>
        <td>Last 6 Months</td>
        <td>Purchased</td>
        <td>Bi-Montly</td>
       ...

CSS

#dataTable {
    display:none;
}

JavaScript

var array = [];
    var headers = [];
    $('#dataTable th').each(function(index, item) {
        headers[index] = $(item).html();
    });
    $('#dataTable tr').has('td').each(function() {
        var arrayItem = {};
        $('td', $(this)).each(function(index, item) {
            arrayItem[headers[index]] = $(item).html();
        });
        array.push(arrayItem);
    });

//alert(JSON.stringify(array));
var testString = JSON.stringify(array);
//alert(testString);
//$("#holder").text(testString);
//testString.sort()
var section = $("section");
var headersString = '';  
for (var i=0; i < headers.length; i++) {  
    headersString += '<th>'+ headers[i] +'</th>';  
}
table = $('<table border="1"><tr>'+headersString+'</tr>');

function sortArray(obj) {
   var a = [],x;
   for(x in obj){ 
     if(obj.hasOwnProperty(x)){
         a.push([x,obj[x]]);
     }
   }
   a.sort(function(a,b){ return a[0]>b[0]?1:-1; })
   return a;
    
   for (var j = 0; j < a.length; j++) {
      var currentHash = a[j];
      var tr = $('<tr>');
      for (var k in currentHash) {
         var td = $('<td>'+currentHash[k]+'</td>');
         td.appendTo(tr);
      }
      tr.appendTo(table);
   }
}
sortArray(testString);
table.appendTo(section);

/*
for (var j = 0; j < array.length; j++) {
    var currentHash = array[j];
    var tr = $('<tr>');
    for (var k in currentHash) {
        var td = $('<td>'+currentHash[k]+'</td>');
        td.appendTo(tr);
    }
    tr.appendTo(table);
}
table.appendTo(section);
*/
//headers.sort();
/*
for (var i=0; i< headers.length; i++) {
    $("<th>"+headers[i]+"</th>").appendTo(table);
}
*/