JSFiddle - React, Tailwind, and code Playground

by George

HTML

<div ng-app="sandboxApp">
    <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">
            <md-column md-column-name="Age" md-column-source="age"></md-column>
            <md-column md-column-name="Name" md-column-source="name"></md-column>
            <md-column md-column-name="Group" md-column-source="group"></md-column>
            <md-set-pagination pages="[5,10,25,100]"></md-set-pagination>
        </div>
    </article>
</div>

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;
}

.data-table {
  width: 100%;
  margin: 0.2em 0 0.5em 0em;
  border: 1px solid black;
  th, td {
    padding: 0.2 0.5...

JavaScript

var external_data = [
    { 'name': 'george', 'age': 39, 'group': 'family' },
    { 'name': 'evan', 'age': 44, 'group': 'family' },
    { 'name': 'vasya', 'age': 42, 'group': 'family' },
    { 'name': 'paco', 'age': 12, 'group': 'elgin' },
    { 'name': 'taco', 'age': 13, 'group': 'elgin' },
    
    { 'name': 'elisha', 'age': 20, 'group': 'elgin' },
    { 'name': 'terry', 'age': 21, 'group': 'elgin' },
    { 'name': 'larry', 'age': 33, 'group': 'stooges' },
    { 'name': 'curly', 'age': 32, 'group': 'stooges' },
    { 'name': 'moe', 'age': 34, 'group': 'stooges' },
    
    { 'name': 'shemp', 'age': 35, 'group': 'stooges' },
    { 'name': 'ned', 'age': 56, 'group': 'flanders' },
    { 'name': 'mod', 'age': 54, 'group': 'flanders' },
    { 'name': 'nod', 'age': 14, 'group': 'flanders' },
    { 'name': 'tod', 'age': 15, 'group': 'flanders' },
    
    { 'name': 'homer', 'age': 54, 'group': 'simpsons' },
    { 'name': 'marge', 'age': 53, 'group': 'simpsons' },
    { 'name': 'bart', 'age': 23, 'group': 'simpsons' },
    { 'name': 'lisa', 'age': 19, 'group': 'simpsons' },
    { 'name': 'maggie', 'age': 15, 'group': 'simpsons' },
    
    { 'name': 'knight', 'age': 54, 'group': 'ateam' },
    { 'name': 'baracas', 'age': 53, 'group': 'ateam' },
    { 'name': 'face', 'age': 61, 'group': 'ateam' },
    { 'name': 'colonel', 'age': 72, 'group': 'ateam' },
    { 'name': 'murdock', 'age': 68, 'group': 'ateam' },
    
    { 'name': 'grendel', 'age': 223, 'group': 'legend' }
];

var app = angular.module( 'sandboxApp', [] )
.filter( 'offset', function() {
    return function( input, start ) {
        start = parseInt( start, 10 );
        return input.slice( start );
    };
})
.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( 'mdTable', ['$filter', function( $filter ) {
    return...