JSFiddle - React, Tailwind, and code Playground

by Oleh Aloshkin

CSS

table,
tr,
td,
th {
  border: 1px solid black;
}

JavaScript

var data1 = [1, 3, 5, 6, 4, 2];
var data2 = ["Google", "Yandex", "Bing", "Yahoo", "DuckDuckGo"];

var data = [data1, data2];

var maxLength = 0;

function foundMaxLength() {
  for (var dataArray = 0; dataArray < data.length; dataArray++) {
    if (data[dataArray].length > maxLength) {
      maxLength = data[dataArray].length;
    }
  }
}

function render() {
  var body = document.body;
  var table = "<table>";
  table += "<thead><tr>";
  for (var header = 0; header < data.length; header++) {
    table += "<th>Header " + header + "</th>";
  }
  table += "</tr></thead>";
  table += "<tbody>";
  for (var rows = 0; rows < maxLength; rows++) {
    table += "<tr>";
    for (var column = 0; column < data.length; column++) {
      if (data[column][rows] !== undefined) {
        table += "<td>" + data[column][rows] + "</td>";
      } else {
        table += "<td></td>";
      }
    }
    if (rows + 1 == maxLength) {
      table += "<tr>";
      for (var buttons = 0; buttons < data.length; buttons++) {
        table += "<td><button class='button " + buttons + "'>Click " + buttons + "</button></td>";
      }
      table += "</tr>";
    }
    table += "</tr>";
  }
  table += "</tbody>";
  table += "</table>";
  body.innerHTML = table;
}

function parseAndSort(el) {
  var columnNumber = el.className;
  columnNumber = columnNumber.split(" ")[1];
  var columnValues = new Array();
  var rows = document.getElementsByTagName("tr");
  for (var rowsInTable = 0; rowsInTable < rows.length; rowsInTable++) {
    if (rowsInTable != 0 && rowsInTable != rows.length - 1) {
      for (var rowSelected = 0; rowSelected < data.length; rowSelected++) {
        var element = rows[rowsInTable].getElementsByTagName("td");
        if (columnNumber == rowSelected && element[rowSelected].textContent != "") {
          columnValues.push(element[rowSelected].textContent);
        }
      }
    }
  }
  data[Object.keys(data)[columnNumber]] = columnValues.sort();
  render();
  onclick();
}

function...