Angular Grid

by Anov Siradj

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<script src="http://code.angularjs.org/angular-1.0.0rc1.js"></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 title="Create At">{{todo.created_at | date}}</td>
            </tr>
        </table>
    </div>
</div>

JavaScript

//// 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() {
        var direc = {
            compile: function compile(tElement, tAttrs) {

                //tElement.attr('id', 'sample')

                //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),
                        expc = column.html(),
                        exp = expc.replace(/[{}\s]/g, ""),
                        name = exp.split(/\.(.+)?/)[1].split(/\|/)[0],
                        filter = exp.split(/\.(.+)?/)[1].split(/\|/)[1],
                        filterAttrib = (!filter) ? "" : ' filter="' + filter + '"',
                        title = column.attr('title') || name,
                        width = column.attr('width') || 100;
                    headerRow.append('<th class="ui-state-default" name="' + name + '"' + filterAttrib + '" style="cursor: pointer;width: ' + width + 'px; font-weight:bold"><span style="display:inline-block">  </span>' + title + '</th>');
                    column.addClass('ui-widget-content');
                    column.attr('title', null);
                    count += 1;
                });

                tElement.addClass('ui-widget');
                tElement.prepend(header);

               ...