JSFiddle - React, Tailwind, and code Playground

by Luiza CICONE

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<body ng-app="app">
  <div ng-controller="myCtrl">
    <table class="table table-condensed">
      <thead>
        <tr>
          <th ng-repeat="header in tableHeader">{{header}}</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="record in tableData" ng-if="!noRecord">
          <td>{{record.name}}</td>
          <td>{{record.code}}</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td class="text-center">
            <a href="#/update/{{record.id}}">
            <span class="glyphicon glyphicon-pencil" data-toggle="tooltip" title="Update">
              Update
            </span>
            </a>
            <span class="glyphicon glyphicon-remove" data-toggle="tooltip" title="Delete">Delete</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

JavaScript

var myApp = angular.module('app', []);
myApp.controller('myCtrl', function($scope) {
  var data = [{
    name: "Tankers",
    code: "TANK",
    id: 1,
    children: [{
      name: "Oiler",
      code: "OIL",
      id: 2
    }, {
      "name": "Chemical",
      "code": "CHEM",
      "id": 3,
      "children": [{
        "name": "Production",
        "code": "PROD",
        "id": 6
      }]
    }]
  }, {
    "name": "Bulker",
    "code": "BULK",
    "id": 4,
    "children": [{
      "name": "Logger",
      "code": "LOG",
      "id": 5
    }]
  }, {
    "name": "Sterilized",
    "code": "STER",
    "id": 21
  }];
  
  $scope.tableHeader = ["Name", "Code", "Updated By", "Date Updated", "Options"];

  $scope.tableData = data;
  $scope.noRecord = data.length === 0;

});