JSFiddle - React, Tailwind, and code Playground

by Todd

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="N  https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div id="appWrapper" data-ng-cloak="" data-ng-controller="appCntrl">
  <div id="wrap">
    <!-- Nav panel -->
    <div class="navbar navbar-default navbar-fixed-top nav-pills">
      <div class="container">
        <ul class="nav navbar-nav navbar-left nav-pills">
          <li>
            <span class="glyphicon glyphicon-filter" aria-hidden="true"></span>
            <input id="row-filter" data-ng-model="myFilter" type="text" />
          </li>
          <li>
            <button class="btn btn-default">Add New Parameter</button>
          </li>
          <li>
            <button id="myBtn" class="btn btn-info" data-ng-click="showDetailFlag = !showDetailFlag">Show Detail</button>
          </li>
          <li>
            <p class="btn btn-default">{{showDetailFlag}}</p>
          </li>
        </ul>
      </div>
    </div>
    <!-- End Container -->
    <!-- Begin page content -->
    <row-details data-ng-if="showDetailFlag" details="paramDetails" types="paramTypes"></row-details>
    <div class="container" data-ng-if="!showDetailFlag">
      <table id="params-list" class="table table-hover">
        <thead>
          <tr>
            <th>Type</th>
            <th>Description</th>
            <th>Value</th>
            <th>Active?</th>
          </tr>
        </thead>
        <tbody>
          <tr row-values values="paramValues"></tr>
        </tbody>
      </table>
    </div>
    <!-- End Container -->

  </div>
  <!-- End Wrap -->
</div>

CSS

html,
body {
  height: 100%;
}

body {
  padding-top: 30px;
}

#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by its height */
  margin: 0 auto;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

#wrap > .container {
  padding: 60px 15px 0;
}


/*  Parameters List  */

#params-list {
  margin-right: auto;
  margin-left: auto;
  width: 95%;
}

#params-list td,
#params-list th {
  white-space: normal;
  overflow-x: hidden;
  height: 10px;
  text-overflow: ellipsis;
  max-width: 25px;
}

#params-list tbody tr.odd td {
  background: #eee;
}

#params-list tr > td:last-child,
#params-list tr > th:last-child {
  width: 85px;
  text-align: center;
  border-left: 1px solid purple;
}

JavaScript

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

app.service('fetch', function($http) {

  this.allParams = function(cb) {
    return {
      data: [{
        NAME: "PNAME1",
        VALUE: "PVALUE1",
        TYPE: "PTYPE1",
        ACTIVE: "YES",
        DESCR: "PDESCR1"
      }, {
        NAME: "PNAME2",
        VALUE: "PVALUE2",
        TYPE: "PTYPE2",
        ACTIVE: "NO",
        DESCR: "PDESCR2"
      }]
    };
  };


  this.paramTypes = function(cb) {
    return {
      data: [{
        NAME: "TYPE1",
        DESCR: "TYPE1_DESCR",
        TITLE: "TYPE1_TITLE"
      }, {
        NAME: "TYPE2",
        DESCR: "TYPE2_DESCR",
        TITLE: "TYPE2_TITLE"
      }]
    };
  }

});


app.directive('rowValues', function() {
  return {
    restrict: 'A',
    template: '<form id="frm-details"> <h4>Details for: {{details.NAME}}</h4> \
              <button type="submit" class="btn btn-default">Submit</button></form>',
    scope: {
      values: "=",
      showDetail: "&ngdblClick"
    },
    replace: true
  };
});

app.directive('rowDetails', function() {
  return {
    restrinct: 'E',
    template: '<tr data-ng-repeat="row in values" data-ng-dblclick="showDetail(row)" > \
            <td>{{row.NAME}}</td> \
            <td>{{row.DESCR}}</td> <td>{{row.VALUE}}</td> \
            <td data-param-active="{{row.ACTIVE}}"></td> \
            </tr>',
    scope: {
      details: "=",
      types: "="
    },
    replace: true
  };
});


app.controller('appCntrl', ['$scope', 'fetch', function($scope, fetch) {
  $scope.paramTypes = {};
  $scope.paramDetails;
  $scope.showDetailFlag = false;

  $scope.showDetail = function(row) {
    console.log(row);
    $scope.showDetailFlag = true;
  };

  /**
   * assigns parameters to scope and resets isDirty flag
   *
   * @callback from $watch myFiler
   * @param {object} d - {error, data, status}
   */
  $scope.allParamsData = function(d) {
    console.log("callback fired");
    if (d.error) {
      // do stuff
    } else {
     ...