https://github.com/saulsluz/angular-minimal-grid
Simple data grid using bootstrap for angularjs applications
https://github.com/saulsluz/angular-minimal-grid
angularjs bootstrap grid-data
Last synced: about 1 month ago
JSON representation
Simple data grid using bootstrap for angularjs applications
- Host: GitHub
- URL: https://github.com/saulsluz/angular-minimal-grid
- Owner: saulsluz
- License: mit
- Created: 2017-07-03T19:02:53.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-08-21T14:14:39.000Z (almost 9 years ago)
- Last Synced: 2025-09-30T05:21:24.916Z (9 months ago)
- Topics: angularjs, bootstrap, grid-data
- Language: JavaScript
- Homepage:
- Size: 61.5 KB
- Stars: 0
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# angular-minimal-grid
Implementation of data grid using bootstrap (^3.x.x) for angular applications (^1.x.x).
Uses custom style of [dataTable](https://github.com/DataTables/DataTables).
### Installation
#### Bower
`$ bower install angular-minimal-grid`
Embed it in your HTML:
```html
```
#### NPM
`$ npm install angular-minimal-grid`
Embed it in your HTML:
```html
```
#### Dependency injection
Inject `angular-minimal-grid` module as a dependency into your app:
```js
var app = angular.module('app', [
'ngMinimalGrid'
])
```
### Usage
Example of minimum usage:
```html
```
In controller:
```js
$scope.myColumns = [
{ key: 'name', title: 'Name' },
{ key: 'lastName', title: 'Last Name' },
{ key: 'age', title: 'Age' }
]
$scope.myRows = [
{ 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` |
```js
app.config(function(minimalGridConfigProvider){
minimalGridConfigProvider
.setStatsMessage('Mostrando %1 à %2 de %3 resultados')
.setFirstLabel('Primeiro')
.setLastLabel('Último')
})
```
#### Custom rendering
It's suportted custom rendering of cell value: uses `onRender`
```js
$scope.myColumns = [
{ key: 'name', title: 'Name' },
{ key: 'lastName', title: 'Last Name' },
{ key: 'age', title: 'Age', onRender: function(val){
if (val%2 == 0)
return ''+val+'' // HTML allowed
else
return val
} }
]
$scope.myRows = [
{ 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`.
```html
```
##### Max limit of pagination
Set the range of number's page to show. Default is `5`.
```html
```
#### Nested objects
It's suportted nested objects: uses [angular's parse](https://docs.angularjs.org/api/ng/service/$parse).
```js
$scope.myColumns = [
{ key: 'person.user.name', title: 'Name' },
{ key: 'lastName', title: 'Last Name' },
{ key: 'age', title: 'Age' }
]
$scope.myRows = [
{ 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:
```html
```
`row` will be something like this:
```js
{
name: "John",
lastName: "Doe",
age: 30
}
```
It's important to pass "row" as parameter: Uses [angular's parameter by reference](https://docs.angularjs.org/guide/directive).
##### 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:
```html
```
`pages` will be something like this:
```js
{
current: 2,
first: 1,
last: 10,
max: 10,
next: 3,
pagination: 1,
previous: 1,
range: 5,
total: Array(10)
}
```
It's important to pass "pages" as parameter: Uses [angular's parameter by reference](https://docs.angularjs.org/guide/directive).
##### 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:
```html
```
`orderBy` will be something like this:
```js
{
orderdirection: "asc",
orderby: "name"
}
```
It's important to pass "orderby" as parameter: Uses [angular's parameter by reference](https://docs.angularjs.org/guide/directive).
##### 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.
```html
```
Using this mode you will need to set the row's length by setting `totalRows`
```html
```
Combine with callbacks and feel the power.
### Tests
To run the package's test, first install the dependencies, then run `npm test`:
```bash
$ npm install --only=dev
$ bower install
```
or
```bash
$ npm install
```
### License
MIT License