ng-labs-datagrid
A datagrid directive for angular.
Usage
include labsDatagrid in your app
angular.module('exampleApp', [labsDatagrid])
example controller:
angular.module('exampleApp').controller('exampleCtrl', function($scope) {
$scope.columns = [{name:'First Name',column:'firstName'},{name:'Last Name',column: 'lastName'}];
$scope.rows = [{
lastName:'Warner',
firstName:'Andy
},
{
lastName: 'Doe',
firstName: 'Jon'
}];
$scope.sort = {}
$scope.filter = {}
$scope.pageFn = function(page) {
//DO SOMETHING HERE
}
})
adding a datagrid to your page
labs-datagrid expects you to write your own row markup. Due to some strange angular/browser things with TR we get to use the div tag for our cells (the datagrid includes a style that changes the display of the first level of divs to table-cell)
<labs-datagrid columns="columns" rows="rows" sort="sort" filter="filter" pageFn="pageFn">
<div>{{row.firstName}}</div><div>{{row.lastName}}</div>
</labs-datagrid>
Side Note:
Try using labsCollection with labsDatagrid if you use labsCollection as the rows attribute you wont need to set sort, filter or pageFn