JSFiddle - React, Tailwind, and code Playground

by Will McKinley

HTML

<div id="target"></div>
<script>
var VideoList = [],
  content,
  fields = ["Title", "VideoID", "DateUploaded", "Category", "Time", "Action"],
  num = 10,
  sortField = "Title",
  sortDirection = 1,
  compare = function(a, b) {
    if (a[sortField] < b[sortField]) return -1 * sortDirection;
    if (a[sortField] > b[sortField]) return 1 * sortDirection;
    return 0;
  },
  sortArray = function(field) {
  	if( sortField === field ) sortDirection = -1 * sortDirection;
  	sortField = field;
    VideoList.sort(compare);
    buildTable();
  },
  creatVideos = function() {
    for (var x = 0; x < num; x++) {
      var video = {},
        z = Math.floor(Math.random() * 200);
      for (var i in fields) {
        if(fields[i]==='VideoID') {
        video[fields[i]] = z;
        } else {
        video[fields[i]] = fields[i] + "-" + z;
        }
      }
      VideoList.push(video);
    }
  },
  buildTable = function() {
    content = "<table>";
    content += "<tr>";
    content += "<th>image</th>";
    for (var x in fields) {
      content += "<th class='field field-" + fields[x] + "' onclick='sortArray(\"" + fields[x] + "\")'>" + fields[x] + "</th>";
    }
    content += "</tr>";
    for (var i in VideoList) {
      content += "<tr>";
      content += "<td width='20%'><a href='https://www.youtube.com/watch?v=" + VideoList[i].VideoID + "'onclick='playVideo(" + i + ")'>" + "<img src ='https://i.ytimg.com/vi/" + VideoList[i].VideoID + "/hqdefault.jpg' width=175 height=130></a></td>";
      for (var x in fields) {
        content += "<td>" + VideoList[i][fields[x]] + "</td>";
      }
      content += "</tr>";
    }
    content += "</table>";
    document.getElementById('target').innerHTML = content;
  };
  
creatVideos();
buildTable();




</script>

CSS

.field { cursor: pointer; }