Grid Widget

by olragon

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<script type="text/javascript" ng:autobind src="http://code.angularjs.org/0.10.5/angular-0.10.5.js"></script>

    <div ng:controller="TodosCtrl">
    <table   ng:grid="teste">
            <tr ng:repeat="todo in todos">
                <td title="Name">{{todo.name}}</td>
                <td title="Estimate">{{todo.estimate | number}}</td>
                <td title="Done">{{todo.done | checkmark}}</td>
                <td title="Create At">{{todo.created_at }}</td>
            </tr>
    </table>
    </div>

CSS

.ui-state-default, .ui-widget-content {
    width:100px; 
    padding: 0.2em 0.4em; 
    font-size: 60%;
}
table {border-collapse: collapse;
}

JavaScript

angular.Array.skip = function (array, value) { return array.slice(value)}

angular.widget('@ng:grid', function(expression, template) {
    
    //HEADER   
    var header = angular.element('<thead><tr></tr></thead>'),
        headerRow = header.children('tr'),
        count = 0,
        tr = template.children('tbody').children('tr')
        expa = tr.attr('ng:repeat');     
        
    tr.attr('ng:repeat', expa + '.$orderBy(ngGridSortPagination.predicate, ngGridSortPagination.reverse).$skip(ngGridSortPagination.skipAt).$limitTo(ngGridSortPagination.limit)');

    angular.forEach(tr.children('td'), function(elm) {
        var column = angular.element(elm),
            exp = column.html(),
            exp = exp.replace(/[{}\s]/g, ""),
            name = exp.split(/\.(.+)?/)[1].split(/\|/)[0],
            filter = exp.split(/\.(.+)?/)[1].split(/\|/)[1],
            filterAttrib = (!filter) ? "" : ' filter="' + filter + '"' , 
            title = column.attr('title') || name;

        var headerCol = headerRow.append('<th class="ui-state-default" name="' + name +'"'+  filterAttrib + '" style="cursor: pointer;"><span style="display:inline-block">  </span>' + title + '</th>');
        column.addClass('ui-widget-content');
        column.attr('title', null);
        count += 1;
    });
    
    template.addClass('ui-widget');
    template.prepend(header);
    
    
    //PAGINATION
   var pager = angular.element('<tfoot class="ui-state-default"><tr><td align="center" colspan="' + count + '"></td></tr></tfoot>'),
        page = pager.children('tr').children('td');
    page.append('<span style="cursor: pointer; display:inline-block; margin-left:10px;; vertical-align:middle" class="ui-icon ui-icon-seek-first ui-state-disabled"></span>');
    page.append('<span style="cursor: pointer; display:inline-block; margin-left:10px;; vertical-align:middle" class="ui-icon ui-icon-seek-prev ui-state-disabled"></span>');
    page.append('<span style="display:inline-block;...