JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<div ng-app="test" ng-controller="sessionCtrl as vm">
{{vm.testvar}}
  <table>
    <thead>
      <tr>

        <th ng-click="vm.sortType='name'; vm.sortReverse=!vm.sortReverse" ng-if="vm.columnVisiblity.name">NAME
        </th>
        <th ng-click="vm.sortType='specification'; vm.sortReverse=!vm.sortReverse" ng-if="vm.columnVisiblity.specification">SPECIFICATION
        </th>
        <th ng-click="vm.sortType='type'; vm.sortReverse=!vm.sortReverse" ng-if="vm.columnVisiblity.type">TYPE
        </th>
      </tr>
    </thead>

    <tbody>
      <tr ng-repeat="item in vm.TableData | orderBy:vm.sortType:vm.sortReverse">

        <td ng-if="vm.columnVisiblity.name">{{item.name}}</td>
        <td ng-if="vm.columnVisiblity.specification">{{item.specification}}</td>
        <td ng-if="vm.columnVisiblity.type">{{item.type}}</td>
      </tr>
    </tbody>

  </table>
  <a href="#" ng-model="vm.columnVisibility.name" ng-click="vm.columnVisiblity.name=!vm.columnVisiblity.name">TOGGLE NAME</a>

  <a href="#" ng-model="vm.columnVisibility.specification" ng-click="vm.columnVisiblity.specification=!vm.columnVisiblity.specification">TOGGLE SPECIFICATION</a>

  <a href="#" ng-model="vm.columnVisiblity.type" ng-click="vm.columnVisiblity.type=!vm.columnVisiblity.type">TOGGLE TYPE</a>
</div>

JavaScript

angular.module('test', []);

angular.module("test").controller("sessionCtrl", sessionCtrl);


function sessionCtrl() {
  var vm = this;
  vm.testvar= "HELLO";
  vm.sortType = 'name';
  vm.sortReverse = false;

  vm.columnVisiblity = {

    name: true,
    specification: true,
    type: true,
  };
  vm.TableData = [{

    name: "2017/03/01-14",
    specification: "IDB-idb-1wk",
    type: "Full"

  }, {

    name: "2017/03/01-17",
    specification: "Set-04",
    type: "Full"
  }, {
    name: "2017/03/04-11",
    specification: "IDB-idb-1wk",
    type: "Full"
  }];


}