JSFiddle - React, Tailwind, and code Playground

by S_YOU

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div ng-app="app">
  <table ng-controller="newQueryController">
    <tr>
      <th ng-repeat="column in columns | orderBy:columnToSortBy:reverse">
        <h6 ng-bind="column.name" ng-click='sortBy(column.name)'></h6>
        <img src='/static/images/asc.gif' ng-show="orderByAsc">
        <img src='/static/images/desc.gif' ng-show="orderByDesc">
        <img src='/static/images/bg.gif' ng-show="orderByNothing">
      </th>
    </tr>
    <tr ng-repeat="row in rows">
      <td ng-repeat="(key, value) in row" ng-bind="value"></td>
    </tr>
  </table>
</div>

JavaScript

var mainQueryModule = angular.module('app', []);

mainQueryModule.controller("newQueryController", function($scope, $http, $compile) {
  var results = {
    columns: [{
      "type": "STRING",
      "name": "nk"
    }, {
      "type": "STRING",
      "name": "Bn"
    }, {
      "type": "STRING",
      "name": "Sk"
    }, {
      "type": "STRING",
      "name": "ank"
    }, {
      "type": "STRING",
      "name": "Bnk"
    }, {
      "type": "STRING",
      "name": "Skk"
    }, {
      "type": "STRING",
      "name": "Name"
    }, {
      "type": "STRING",
      "name": "Phone"
    }, {
      "type": "STRING",
      "name": "Age"
    }, {
      "type": "STRING",
      "name": "Tank"
    }, {
      "type": "STRING",
      "name": "Bank"
    }, {
      "type": "STRING",
      "name": "Skunk"
    }],
    rows: []
  };
  for (index = 0; index < 1000; index++) {
    results['rows'].push({
      nk: "select * from faker 100000000000",
      Bn: 35,
      Sk: 567,
      ank: "ank",
      Bnk: "Bnk",
      Skk: "Skk",
      Name: "Erik",
      Phone: 100000 + index,
      Age: 29 + index,
      Bank: "Big" + index,
      Tank: 16 + index,
      Skunk: "123" + index
    })
  }

  $scope.runQuery = (client_id) => {
    // $http.post("fakeurl/", {test:123}).then(function(response){
    //      console.log(response)
    $scope.columns = results["columns"];
    $scope.columnToSortBy = null;
    $scope.rows = results["rows"];
    $scope.reverse = false;
    $scope.orderByAsc = false;
    $scope.orderByDesc = false;
    $scope.orderByNothing = true;
    // })
  }

  $scope.runQuery();
})