Light, flexible and performant Data Grid for AngularJS apps, with built-in sorting, pagination and filtering options, unified API for client-side and server-side data fetching, seamless synchronization with browser address bar and total freedom in mark-up and styling suitable for your application. Angular 1.3 - 1.6 compliant.
Demo Bootstrap: http://angular-data-grid.github.io/demo/bootstrap/
Demo Material: http://angular-data-grid.github.io/demo/material/
Demo 100k: http://angular-data-grid.github.io/demo/100k/
Demo Angular UI Router: http://angular-data-grid.github.io/demo/bootstrap/ui-router.html
<table> layout to any <div> structure.Using Bower: bower install angular-data-grid
Using NPM: npm install angular-data-grid
Direct download: get ZIP archive from here
Then use files from dist folder (see below).
Include scripts in you application: angular.min.js, dataGrid.min.js and pagination.min.js (include the second one only if you need pagination).
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://github.com/angular-data-grid/angular-data-grid.github.io/raw/master/bower_components/angular-data-grid/dist/pagination.min.js"></script>
<script src="https://github.com/angular-data-grid/angular-data-grid.github.io/raw/master/bower_components/angular-data-grid/dist/dataGrid.min.js"></script>Inject dataGrid dependency in your module.
angular.module('myApp', ['dataGrid', 'pagination'])Initialize grid with additional options in your controller. To do that, add grid-data directive to element and pass 2 required parameters grid-options and grid-actions:
<div grid-data grid-options="gridOptions" grid-actions="gridActions">
<!-- sample table layout goes below, but remember that you can you any mark-up here. -->
<table class="table">
<thead>
<tr>
<th sortable="code" class="sortable">
Order #
</th>
<th sortable="placed" class="sortable">
Date Placed
</th>
<th sortable="purchaseOrderNumber" class="sortable">
Purchase Order #
</th>
<th sortable='total.value' class="sortable">
Total
</th>
</tr>
</thead>
<tbody>
<tr grid-item>
<td ng-bind="item.code"></td>
<td ng-bind="item.placed | date:'MM/dd/yyyy'"></td>
<td ng-bind="item.purchaseOrderNumber"></td>
<td ng-bind="item.total.formattedValue"></td>
</tr>
</tbody>
</table>
</div>
$scope.gridOptions = {
data: [], //required parameter - array with data
//optional parameter - start sort options
sort: {
predicate: 'companyName',
direction: 'asc'
}
};NOTE: grid-item wrapper directive used in the example above, to make code more concise, but you can always use regular ng-repeat instead, like: ng-repeat="item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage track by $index"
grid-options: object in your controller with start options for grid. You must create this object with at least 1 required parameter - data.grid-actions: object in your controller with functions for updating grid. You can pass string or create empty object in controller.
Use this object for calling methods of directive: sort(), filter(), refresh().grid-data directive you can use pagination directive.{{filtered.length}} value.gridOptions.data to any JSON array object. $scope.gridOptions = {
data: [], //required parameter - array with data
};For server side pagination/filtering to fetch data by page:
getData method to some function with URL params as 1st parameter and data itself as 2d parameter:$scope.gridOptions = {
getData: getServerData,
};
function getServerData(params, callback) {
$http.get(contextPath + '/some/list' + params).then(function (response) {
var data = response.data.some,
totalItems = response.data.someCount;
callback(data, totalItems);
}; To enable sorting, just add attribute sortable to your table headers. This will specify the property name you want to sort by.
Also you can add class sortable to display acs/decs arrows.
<th sortable="code" class="sortable">
Order #
</th>
<th sortable="placed" class="sortable">
Date Placed
</th>$scope.gridOptions = {
data: [], //required parameter - array with data
//optional parameter - start sort options
sort: {
predicate: 'companyName',
direction: 'asc'
}
};You can optionally use grid-pagination directive to display paging with previous/next and first/last controls.
Directive is built on a base of excellent Angular UI component and shares extensive API:
<pagination max-size="5" boundary-links="true"
ng-if="paginationOptions.totalItems > paginationOptions.itemsPerPage"
total-items="paginationOptions.totalItems"
ng-model="paginationOptions.currentPage"
ng-change="reloadGrid()"
items-per-page="paginationOptions.itemsPerPage">
</pagination>Settings can be provided as attributes in the paginationConfig.
ng-change : ng-change can be used together with ng-model to call a function whenever the page changes.
ng-model : Current page number. First page is 1.
ng-disabled : Used to disable the pagination component
total-items : Total number of items in all pages.
items-per-page (Defaults: 10) : Maximum number of items per page. A value less than one indicates all items on one page.
max-size (Defaults: null) : Limit number for pagination size.
num-pages readonly (Defaults: angular.noop) : An optional expression assigned the total number of pages to display.
rotate (Defaults: true) : Whether to keep current page in the middle of the visible ones.
direction-links (Default: true) : Whether to display Previous / Next buttons.
previous-text (Default: 'Previous') : Text for Previous button.
next-text (Default: 'Next') : Text for Next button.
boundary-links (Default: false) : Whether to display First / Last buttons.
first-text (Default: 'First') : Text for First button.
last-text (Default: 'Last') : Text for Last button.
template-url (Default: 'template/pagination/pagination.html') : Override the template for the component with a custom provided template
Data Grid supports 4 built-in types of filters: text, select, dateFrom and dateTo.
To use it, add attribute filter-by to any element and pass property name, which you want to be filtered.
Also you need add attribute filter-type with type of filter.
After that you need call filter() method in ng-change for text or select inputs and in ng-blur/ng-focus for datepickers.
Filters are synchronized with URL by ng-model value.
<input type="text" class="form-control order-search-box"
placeholder="Search By Order #"
ng-change="gridActions.filter()"
ng-model="code"
filter-by="code"
filter-type="text">
If you need to use some custom filters (e.g. filter by first letter), add filter-by to specify property name, which you want filtering and add ng-model property.
Then create in gridOptions.customFilters variable named as ng-model with filtering function. Filtering function accepts items, value, predicate arguments and returns filtered array.
$scope.gridOptions = {
data: [],
customFilters: {
startFrom: function (items, value, predicate) {
return items.filter(function (item) {
return value && item[predicate] ? !item[predicate].toLowerCase().indexOf(value.toLowerCase()) : true;
});
}
}
};
You can disable/enable URL synchronization for the whole grid or on a level of particular filter.
Global parameter gridOptions.urlSync (boolean, default is 'false') works for the whole grid.
Each filter has optional parameter disable-url (boolean, default is 'false'). If you set it to true, URL-synchronization for this particular filter will be disabled.
If you need to use 2 or more grids on page, please add id to grids, and then use grid-id attribute on filters to specify their corresponding grid. Example