https://github.com/angular-libs/ui-grid
simple ui grid in AngularJS
https://github.com/angular-libs/ui-grid
bower ui-grid
Last synced: 4 months ago
JSON representation
simple ui grid in AngularJS
- Host: GitHub
- URL: https://github.com/angular-libs/ui-grid
- Owner: angular-libs
- Created: 2015-07-22T10:38:04.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2020-05-28T22:44:05.000Z (about 6 years ago)
- Last Synced: 2026-01-23T09:57:36.044Z (5 months ago)
- Topics: bower, ui-grid
- Language: JavaScript
- Homepage:
- Size: 615 KB
- Stars: 1
- Watchers: 3
- Forks: 1
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ui-grid
[](https://greenkeeper.io/)
[](http://gruntjs.com/)
[](https://travis-ci.org/angular-libs/ui-grid)
[](https://gemnasium.com/angular-libs/ui-grid)
[](https://codecov.io/github/angular-libs/ui-grid?branch=master)
[](https://coveralls.io/github/angular-libs/ui-grid?branch=master)
[](https://badge.fury.io/bo/ng-ui-grid)
[](https://ci.appveyor.com/project/angular-libs/ui-grid/branch/master)
[](http://issuestats.com/github/angular-libs/ui-grid)
[](http://issuestats.com/github/angular-libs/ui-grid)
[](https://www.codacy.com/app/kuldeepkeshwar/ui-grid)
[](https://app.review.ninja/angular-libs/ui-grid)
[](https://insight.sensiolabs.com/projects/33b672a9-d02a-469d-9242-e083482de9db)
## ui-grid can be used to create grid with basic functionality like (sort,filter,pagination)
#Installing
#### Bower
```javascript
bower install ng-ui-grid
```
#### CDN
##### You can use rawgit.com's cdn url to access the files in the Bower repository. These files are hosted by MaxCDN. Just alter the version as you need.
* https://rawgit.com/angular-libs/ui-grid/master/dist/scripts/ui-grid.js
* https://rawgit.com/angular-libs/ui-grid/master/dist/scripts/ui-grid.min.js
## Directives :
* **ui-grid** : the core directive for the ui-grid which accept an configuration object.
| Property | type | Description |
| :--------|:---------|:-------|
| src | `string`/`object` | collection of items, can be array or Url or promise |
| remote | `boolean`(default: false) | mark true to enable remote paging |
| manualFilter | `boolean`(default: false) | mark true to enable to trigger filtering of the records manually |
| listeners | `object` | callback functions
1). beforeLoadingData : called before loading the records.
2). afterLoadingData : called after loading the records
| | | |
|:--------|:---------|:-------|
| pager | `object` | paging configuation object e.g
```javascript
var pager={
count:20
}
```
| | | |
|:--------|:---------|:-------|
| filters | `array` | array of filter object e.g
```javascript
var filters=[{
key:'last_name',
value:'smith',
filterfn:function(){...}
},{
key:'city',
value:'la',
filterfn:function(){...}
}]
```
* **ui-grid-filter** : used to apply filters
| Type | Description |
| :---------:|:-------:|
| `string`/`object`| can be name of the proptery or filter object with filter function e.g |
```javascript
var filter={
key:'last_name',
filterfn:function(){...}
}
```
* **ui-grid-sort** : used to apply sort
| Type | Description |
| :---------:|:-------:|
| `string`/`object`| can be name of the proptery or sorter object with sort function e.g
```javascript
var sorter={
key:'last_name',
sortfn:function(){...}
}
```
* **ui-grid-repeat** : responsible for rendering the grid row
## Usage :
### **ui-grid** :
#### HTML
```html
First Name
Last Name
Age
City
{{item.first_name}}
{{item.last_name}}
{{item.age}}
{{item.city}}
```
##### CODE
```javascript
angular.module('myApp',['ui.grid']);
angular.module('myApp').controller("myCtrl",function($scope){
var master_list=[];
for(var k=1;k<=5000;k++){
master_list.push({first_name:'A'+k,last_name:'a'+k,age:k,city:'city'+k})
}
$scope.gridOptions={
src:master_list
}
});
```
### **ui-grid-sort** : accepts property name e.g 'last_name' or Object which has property name and sort function.
#### HTML
```html
th ui-grid-sort='sort1'>First Name
Last Name
Age
City
{{item.first_name}}
{{item.last_name}}
{{item.age}}
{{item.city}}
```
#### CODE
```javascript
angular.module('myApp',['ui.grid']);
angular.module('myApp').controller("myCtrl",function($scope){
var master_list=[];
for(var k=1;k<=5000;k++){
master_list.push({first_name:'A'+k,last_name:'a'+k,age:k,city:'city'+k})
}
$scope.gridOptions={
src:master_list
}
$scope.sort1={
key:'first_name',
sortFn:function(array,sorter,order){
array.sort();
}
}
});
```
### **ui-grid-filter** : accepts property name e.g 'first_name' or Object which has property name and filter function.
#### HTML
```html
th ui-grid-sort='sort1'>First Name
Last Name
Age
City
{{item.first_name}}
{{item.last_name}}
{{item.age}}
{{item.city}}
```
#### CODE
```javascript
angular.module('myApp',['ui.grid']);
angular.module('myApp').controller("myCtrl",function($scope){
var master_list=[];
for(var k=1;k<=5000;k++){
master_list.push({first_name:'A'+k,last_name:'a'+k,age:k,city:'city'+k})
}
$scope.gridOptions={
src:master_list
}
$scope.sort1={
key:'first_name',
sortFn:function(array,sorter,order){
array.sort();
}
}
$scope.filter1={
key:'last_name',
filterFn:function(array,filter,value){
for(var i = array.length - 1; i >= 0; i--) {
if(value && array[i][filter.key]!=value){
array.splice(i, 1);
}
}
}
}
});
```
[](https://github.com/angular-libs/ui-grid)
[](https://bitdeli.com/free "Bitdeli Badge")
[](https://bitdeli.com/free "Bitdeli Badge")