angular-minimal-grid
Implementation of data grid using bootstrap (^3.x.x) for angular applications (^1.x.x).
Uses custom style of dataTable.
Installation
Bower
$ bower install angular-minimal-grid
Embed it in your HTML:
NPM
$ npm install angular-minimal-grid
Embed it in your HTML:
Dependency injection
Inject angular-minimal-grid
module as a dependency into your app:
var app = angular
Usage
Example of minimum usage:
In controller:
$scopemyColumns = key: 'name' title: 'Name' key: 'lastName' title: 'Last Name' key: 'age' title: 'Age' $scopemyRows = name: 'John ' lastName: 'Doe' age: 30 name: 'Marie ' lastName: 'Doe' age: 28
That's all.
Customization
Custom labels
It's suportted custom labels by Provider methods:
method | property | default value |
---|---|---|
setStatsMessage(String ) |
statsMessage | 'Showing %1 to %2 of %3 results' |
setFirstLabel(String ) |
firstButtonLabel | First |
setLastLabel(String ) |
lastButtonLabel | Last |
app
Custom rendering
It's suportted custom rendering of cell value: uses onRender
$scopemyColumns = key: 'name' title: 'Name' key: 'lastName' title: 'Last Name' key: 'age' title: 'Age' { if val%2 == 0 return '<b>'+val+'</b>' // HTML allowed else return val } $scopemyRows = name: 'John ' lastName: 'Doe' age: 30 name: 'Marie ' lastName: 'Doe' age: 28
Max limit per page
Set the max rows peer page. Default is 10
.
Max limit of pagination
Set the range of number's page to show. Default is 5
.
Nested objects
It's suportted nested objects: uses angular's parse.
$scopemyColumns = key: 'person.user.name' title: 'Name' key: 'lastName' title: 'Last Name' key: 'age' title: 'Age' $scopemyRows = person: user: name: 'John ' lastName: 'Doe' age: 30 person: user: name: 'Marie ' lastName: 'Doe' age: 28
Getting the control
Keep in mind: this implementation uses the power of callbacks to do anything by out of the grid directive.
The isolated scope binding:
property | type | required |
---|---|---|
columns | array | yes |
rows | array | yes |
fake | bool | |
totalRows | integer | |
pagination-max | integer | |
pagination-range | integer | |
on-change-order-by | function | |
on-change-paginate | function | |
on-click-row | function |
on-click-row
If you want to do somenthing when the user clicks on a row just add a binding on a click:
row
will be something like this:
name: "John" lastName: "Doe" age: 30
It's important to pass "row" as parameter: Uses angular's parameter by reference.
on-change-paginate
If you want to do somenthing when the user clicks on a page number (previous or next) just add a binding on a paginate:
pages
will be something like this:
current: 2 first: 1 last: 10 max: 10 next: 3 pagination: 1 previous: 1 range: 5 total: Array10
It's important to pass "pages" as parameter: Uses angular's parameter by reference.
on-change-order-by
If you want to do somenthing when the user clicks on a header (to change the order by) just add a binding on a order by:
orderBy
will be something like this:
orderdirection: "asc" orderby: "name"
It's important to pass "orderby" as parameter: Uses angular's parameter by reference.
fake mode
Here's the trick! Setting fake="true"
makes the grid perform ordernation and pagination just visualy. This way it's possible to perform yourself ordenation or pagination or whatever you want. Perfect to make async calls and server things.
Using this mode you will need to set the row's length by setting totalRows
Combine with callbacks and feel the power.
Tests
To run the package's test, first install the dependencies, then run npm test
:
$ npm install --only=dev$ bower install
or
$ npm install
License
MIT License