JSFiddle - React, Tailwind, and code Playground

HTML

<section></section>
<table border="1">
    <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 = [];
$('table th').each(function(index, item) {
   headers[index] = $(item).html();
});
$('table tr').has('td').each(function() {
   var arrayItem = {};
   $('td', $(this)).each(function(index, item) {
      arrayItem[headers[index]] = $(item).html();
   });
   array.push(arrayItem);
});

var headersString = '';  
for (var i=0; i < headers.length; i++) {  
   headersString += '<th>'+ headers[i] +'</th>';  
}

var dirCols = {};
$(document).on('click', 'table tr th', function() {
   table = $('<table border="1"><tr>'+headersString+'</tr>');
   var thSortKey = $(this).text();
   var dir = dirCols[$(this).text()] || 1;
   dirCols[$(this).text()] = -1 * dir;
   function compare(el1, el2, index) {
      return el1[index] == el2[index] ? 0 : dir * (el1[index] < el2[index] ?-1 : 1);
   }

   array.sort(function(el1,el2){
      return compare(el1, el2, ""+thSortKey+"");
   });
   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').replaceWith(table);
});