JSFiddle - React, Tailwind, and code Playground

by jrunning

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyController">
        <h2>Buildings</h2>

    <table class="table table-hover table-bordered">
        <thead>
            <tr>
                <th>Name</th>
                <th>Floors</th>
                <th>Users</th>
            </tr>
        </thead>
        <tbody>
            <tr data-ng-repeat="building in project.buildings">
                <th>{{building.name}}</td>
                <td>{{building.floors}}</td>
                <td>{{building.users}}</td>
            </tr>
            <tr>
                <th>Total</th>
                <td>{{project.buildingTotals.floors}}</td>
                <td>{{project.buildingTotals.users}}</td>
            </tr>
        </tbody>
    </table>
  </div>
</div>

CSS

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

th {
    text-align: left;
    font-weight: normal;
}

thead th, tbody tr:last-child th {
    font-weight: bold;
}

td, thead th:not(:first-child) {
    padding-left: 10px;
    text-align: right;
}

JavaScript

var app = angular.module('myApp', [
  'my.controllers'
]);

var controllers = angular.module('my.controllers', []);
controllers.controller('MyController', function($scope) {
    $scope.project = { "buildings": [
        { "name" : "North Campus" , "floors" : "4" , "users" : "8" } , 
        { "name" : "South Campus" , "floors" : "2" , "users" : "15" } , 
        { "name" : "East Wing" , "floors" : "8" , "users" : "23" }
    ] };

    $scope.project.buildingTotals = _.reduce( $scope.project.buildings,
        function(sums, building) {
            return { floors: sums.floors + parseInt(building.floors),
                     users:  sums.users + parseInt(building.users) };
        },
        { floors: 0, users: 0 } // initial values
    );
});