JSFiddle - React, Tailwind, and code Playground

by George

HTML

<div>This is a sandbox test of a table</div>
    <article id="test3" class="table-frame" ng-controller="stubbedCtrl">
        <button ng-click="updateSource()">Update Source</button>
        <div md-table md-table-data="data" option-filter-text="on" option-show-pages="on">
            <div>Child Content</div>
            <md-row md-row-data-id="{{row['name'] + '-' + row['group']}}" md-row-data-class="make_green"></md-row>
            <md-column md-column-name="Age" md-column-source="age" md-column-data-class="{{row['group']}}"><span ng-bind="row['age']"></span></md-column>
            <md-column md-column-name="Name" md-column-source="name" md-column-data-class="make_red"><span ng-bind="row['name']"></span></md-column>
            <md-column md-column-name="Group" md-column-source="group" md-column-data-id="{{row['group'] + row['age'] + row['name'] + '-grp'}}" md-column-data-class="{{row['age']>15?'make_red':'default'}}"><span ng-bind="row['group']"></span></md-column>
            <md-set-pagination pages="[5,10,25,100]" initial="10"></md-set-pagination>
        </div>
    </article>

CSS

.th-caret-up:after {
  content: '\2191';
}

.th-caret-down:after {
  content: '\2193';
}

.search-box {
  //font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  height: 50px;
  background-color: cyan;
  -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg); 
       -o-transform: rotate(45deg);
}

.search-box:before {
  //content: '\f002';
  content: '\26B2';
}

.pagination {
  text-align: center;
  ul {
    display: inline-flex;
    padding: 0;
    margin: 0.5em auto;
  }
  .disabled {
    color: #999999;
    //background-color: transparent;
    cursor: default;
    a {
      color: #999999;
    }
  }
  .active {
    background-color: #eeeeff;
  }
  ul > li {
    display: inline;
    border: gray 1px solid;
    background-color: white;
    //border-left-width: 1px;
    padding: 0.2em 0.8em;
    text-align: center;
    min-width: 1.2em;
    &:first-child {
      -webkit-border-top-left-radius: 5px;
      -moz-border-radius-topleft: 5px;
      border-top-left-radius: 5px;
      -webkit-border-bottom-left-radius: 5px;
      -moz-border-radius-bottomleft: 5px;
      border-bottom-left-radius: 5px;
    }
    &:last-child {
      -webkit-border-top-right-radius: 5px;
      -moz-border-radius-topright: 5px;
      border-top-right-radius: 5px;
      -webkit-border-bottom-right-radius: 5px;
      -moz-border-radius-bottomright: 5px;
      border-bottom-right-radius: 5px;
    }
    &:hover {
      background-color: #dfdfdf;
    }
    a {
      //margin: 0.1em;
      min-width: 3em;
      text-decoration: none;
      color: #005580;
      margin-left: auto;
      margin-right: auto;
    }
  }
}
.table-frame {
  background-color: tan;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  padding: 1em;
  @include rounded-shadow( tan, blue );
}

.showing-count {
  font-style: italic;
}

.make_red { 
  color: white;
  background-color: red !important;
}

.make_green {
  color: white;
  background-color:...

JavaScript

var app = angular.module( 'sandboxApp', [] )
.factory( 'myFactory', [function() {
    var data_store = { 
        'data_key': external_data,
        'data_key_2': [ { 'name': 'foo', 'age': 33 }, { 'name': 'bar', 'age': 34 } ]
    };
    var table_configurations = {
        'test_configuration_1': json_options_example
    };
    return {
        getData: function( key ) { return data_store[key]; },
        getTableConfiguration: function( key ) { return table_configurations[key]; }
    };
}])
.filter( 'offset', function() {
    return function( input, start ) {
        start = parseInt( start, 10 );
        return start ? input.slice( start ) : input;
    };
})
.controller( 'stubbedCtrl', ['$scope', function( $scope ) {
    $scope.data = function() { return external_data; };
    $scope.updateSource = function() { external_data = external_data.splice( 0, 4 ); console.log( $scope.data() ) };
}])
.directive( 'mdTableSave', ['$filter', '$compile', function( $filter, $compile ) {
    return {
        restrict: 'A',
        scope: {
            md_table_data_func: '&mdTableData',
            md_table_option_filter_text: '@optionFilterText',
            md_table_option_show_pages: '@optionShowPages'
        },
        //transclude: true,
        template2: 
            '<div>Data is <span ng-bind="md_table_data_func"></span></div>' + 
            '<div>Delin is <span ng-bind="deliniations|json"></span></div>' + 
            '<span class="page-count-selector-label">Items Per Page: </span>' +
            '<select ng-show="md_table_option_show_pages" class="page-count-selector" ng-model="items_per_page" ' +
            '    ng-options="v.id as v.value for v in deliniations" ' +
            '    ng-selected="items_per_page"></select>' +
            '<span ng-show="md_table_option_filter_text">' +
            '    <input type="text" class="form-control" placeholder="Search" ng-model="search_text">' +
            '</span>' +
            '<span ng-bind="search_text"></span>' +
...