angular directive for frozen columns

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" type="text/css" />

<style type="text/css">

  .table-frozen {

    position: relative;

  }

  .table-frozen .col-frozen {

    background-color: white;

  }

</style>

​

<div class="container" ng-app="frozen-example" ng-controller="instagram">

  <div class="table-frozen"><div class="table-responsive text-nowrap">

    <table class="table">

      <thead>

        <tr>

          <th class="col-frozen">Photo</th>

          <th class="col-frozen">Likes</th>

          <th>Comments</th>

          <th>Caption</th>

          <th>Comments</th>

        </tr>

      </thead>

      <tbody>

        <tr ng-repeat="photo in photos">

          <td class="col-frozen">

            <img ng-src="{{photo.images.thumbnail.url}}"/>

          </td>

          <td class="col-frozen">{{photo.likes.count}}</td>

          <td>{{photo.comments.count}}</td>

          <td>{{photo.caption.text}}</td>

          <td>

            <ul class="list-unstyled">

              <li ng-repeat="comment in photo.comments.data">{{comment.text}}</li>

            </ul>

          </td>

        </tr>

      </tbody>

    </table>

  </div></div>

</div>

​

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-resource.min.js"></script>

<script>

angular

  .module('frozen-example', ['ngResource'])

  .factory('Photo', function($resource) {

    return $resource('photos.json');

  })

  .controller('instagram', function($scope, Photo) {

    $scope.photos = Photo.query();

  })

  .directive('tableFrozen', function() {

    function TableCtrl() {

      this.rows = [];

      this.columns = [];

      this.freezeLater = _.debounce(this.freeze);

    }

​

    TableCtrl.prototype.add = function(elem) {

      var tr = elem.parent(),

          i = _.indexOf(tr.children(), elem[0]);

​

      this.rows.push(tr);

      (this.columns[i] = this.columns[i] || []).push(elem);

​

      this.freezeLater();

    };

​

    TableCtrl.prototype.unfreeze = function() {

      _.forEach(this.columns, function(elems) {

        _.invoke(elems, 'css', { position: null, width: null });

      });

    };

​

    TableCtrl.prototype.freeze = function() {

      this.unfreeze();

​

      _.forEach(_.uniq(this.rows), function(row) {

        row.css({ height: row.prop('offsetHeight') });

      });

​

      var left = 0;

      _.forEach(this.columns, function(elems) {

        elems.width = _.reduce(elems, function(maxWidth, elem) {

          var width = elem.prop('offsetWidth');

          return width > maxWidth ? width : maxWidth;

        }, 0);

​

        elems.left = left;

        left += elems.width;

​

        _.forEach(elems, function(elem) {

          elem.css({ position: 'absolute', width: elems.width });

​

          var next = elem.next(),

              property = next.hasClass('col-frozen') ? 'left' : 'padding-left';

          next.css(property, elems.left + elems.width);

        });

      });

    };

​

    return {

      restrict: 'AC',

      controller: TableCtrl

    };

  })

  .directive('colFrozen', function() {

    return {

      restrict: 'AC',

      require: '^tableFrozen',

      link: function(scope, elem, attrs, tableCtrl) {

        scope.$evalAsync(function() {

          tableCtrl.add(elem);

        });

      }

    }

  }); 

</script>

​