Angular Grid

ngGrid.js

//////////////////////////////////////
/// Grid Directive to Angular 1.0.2
//////////////////////////////////////

// To use:
//    <script>
//        var app = angular.module('myapp', ['ngGrid']);
//        var Ctrl = function($scope) { $scope.todos = [...] }
//    </script>
//    <div ng-app="myapp">
//        <div ng-controller="Ctrl">
//            <table ng-grid >
//                <tr ng-repeat="todo in todos">
//                    <td >{{todo.name}}</td>
//                    <td >{{todo.estimate | number}}</td>
//                    <td width="50">{{todo.done }}</td>
//                    <td name="created_at" sortable="true" title="Create At">{{todo.created_at | date}}</td>
//                </tr>
//            </table>
//        </div>
//    </div>​
//
//  Cleaned up for use with Twitter Bootstrap
//  Allowed to specify which columns should be sortable
//
//  I am currently working on a server side processing version (paging/sorting)


//// ngGrid Module
(function(angular) {

    angular.module('ngSkip', []).filter('skip', function() {
        return function(array, skipAt) {
            return array.slice(skipAt);
        };
    });

    angular.module('ngGrid', ['ngSkip']).directive('ngGrid', function() {
        return {
            compile: function compile(tElement, tAttrs) {
                //HEADER
                var header = angular.element('<thead><tr></tr></thead>'),
                    headerRow = header.children('tr'),
                    count = 0,
                    tr = tElement.children('tbody').children('tr'),
                    expa = tr.attr('ng-repeat');

                tr.attr('ng-repeat', expa + '| skip:ngGridSortPagination.skipAt | orderBy:ngGridSortPagination.predicate:ngGridSortPagination.reverse   | limitTo:ngGridSortPagination.limit');

                angular.forEach(tr.children('td'), function(elm) {
                    var column = angular.element(elm),
                        name =  column.attr('name'),
                        sortable = column.attr("sortable"),
                        title = column.attr('title') || '',
                        width = column.attr('width') || 'auto';

                    if(sortable) {
                        headerRow.append('<th name="' + name + '"' + '" style="cursor: pointer;min-width: ' + width + 'px;" ng-click="sortColumn($event)">' + title + '<i class=""></i></th>');
                    } else {
                        headerRow.append('<th>'+ title +'</th>')
                    }
                    column.attr('title', null);
                    column.attr('sortable', null);
                    column.attr('name', null);
                    count += 1;
                });
                tElement.prepend(header);


                //PAGINATION
                var footer = '<tfoot><tr><td colspan="' + count + '">' + '<div class="pagination pagination-right"><ul><li ng-class="{\'disabled\':ngGridSortPagination.page <= 1}"><a ng-click="goToFirst()">First</a></li><li ng-class="{\'disabled\':ngGridSortPagination.page <= 1}"><a ng-click="goToPrev()">Previous</a></li>' + '<li class="active"><a>Page {{ngGridSortPagination.page}} of {{ngGridSortPagination.lastPage}}</a></li>' + ' <li ng-class="{\'disabled\':ngGridSortPagination.page >= ngGridSortPagination.lastPage}"><a ng-click="goToNext()">Next</a></li><li ng-class="{\'disabled\':ngGridSortPagination.page >= ngGridSortPagination.lastPage}"><a ng-click="goToLast()">Last</a></li></ul></div>' + '</td></tr></tfoot>';
                tElement.append(footer);

                return function(scope, linkElement) {
                    scope.ngGridSortPagination = {};
                    var grid = scope.ngGridSortPagination;

                    //PAGINATION
                    var rhs = expa.match(/^\s*(.+)\s+in\s+(.*)\s*$/)[2],
                        collection = scope.$eval(rhs),
                        count = collection.length;

                    scope.$watch(rhs, function() {
                        count = scope.$eval(rhs).length;
                        grid.lastPage = Math.ceil(count / grid.limit);
                    });

                    grid.limit = 2;

                    grid.lastPage = Math.ceil(count / grid.limit);
                    grid.page = 1;
                    grid.skipAt = ((grid.page - 1) * grid.limit);

                    scope.goToFirst =  function() {
                        grid.page = 1;
                        grid.skipAt = 1;
                        grid.skipAt = ((grid.page - 1) * grid.limit);
                    };
                    scope.goToPrev = function() {
                        if (grid.page > 1) {
                            grid.page -= 1;
                            grid.skipAt = ((grid.page - 1) * grid.limit);
                        }
                    };
                    scope.goToNext = function() {
                        if (grid.page < grid.lastPage) {
                            grid.page += 1;
                            grid.skipAt = ((grid.page - 1) * grid.limit);
                        }
                    };
                    scope.goToLast = function() {
                        grid.page = grid.lastPage;
                        grid.skipAt = ((grid.page - 1) * grid.limit);
                    };


                    //ORDER
                    scope.sortColumn = function(ev) {
                        var sort = angular.element(ev.target).children('i');
                        grid.predicate = angular.element(ev.target).attr('name');
                        grid.reverse = false;

                        if (!sort.hasClass('icon-chevron-up') && !sort.hasClass('icon-chevron-down')) {
                            headerRow.children('th').children('i').removeClass('icon-chevron-up icon-chevron-down');
                            sort.addClass('icon-chevron-up');
                            grid.reverse = false;
                        } else {
                            if (sort.hasClass('icon-chevron-up')) {
                                grid.reverse = true;
                            } else {
                                grid.reverse = false;
                            }
                            sort.toggleClass('icon-chevron-up');
                            sort.toggleClass('icon-chevron-down');
                        }
                    };
                }
            }
        };
    });
})(window.angular);