Implementation of data grid using bootstrap (^3.x.x) for angular applications (^1.x.x).

Uses custom style of dataTable.

$ bower install angular-minimal-grid

Embed it in your HTML:

<link href="./bower_components/angular-minimal-grid/css/minimal-grid.css" rel="stylesheet">
<script src="./bower_components/angular-minimal-grid/js/minimal-grid.js"></script>

$ npm install angular-minimal-grid

Embed it in your HTML:

<link href="./node_modules/angular-minimal-grid/css/minimal-grid.css" rel="stylesheet">
<script src="./node_modules/angular-minimal-grid/js/minimal-grid.js"></script>

Inject angular-minimal-grid module as a dependency into your app:

var app = angular.module('app', [
  'ngMinimalGrid'
])

Example of minimum usage:

<minimal-grid columns="myColumns" rows="myRows"></minimal-grid>

In controller:

$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.

It's suportted custom labels by Provider methods:

app.config(function(minimalGridConfigProvider){
  minimalGridConfigProvider
    .setStatsMessage('Mostrando %1 à %2 de %3 resultados')
    .setFirstLabel('Primeiro')
    .setLastLabel('Último')
})

It's suportted custom rendering of cell value: uses onRender

$scope.myColumns = [
  { key: 'name', title: 'Name' },
  { key: 'lastName', title: 'Last Name' },
  { key: 'age', title: 'Age', onRender: function(val){
    if (val%2 == 0)
      return '<b>'+val+'</b>' // HTML allowed
    else
      return val
  } }
]
$scope.myRows = [
  { name: 'John ', lastName: 'Doe', age: 30 },
  { name: 'Marie ', lastName: 'Doe', age: 28 }
]

Set the max rows peer page. Default is 10.

<minimal-grid columns="myColumns" rows="myRows"
  pagination-max="15"
  ></minimal-grid>

Set the range of number's page to show. Default is 5.

<minimal-grid columns="myColumns" rows="myRows"
  pagination-range="3"
  ></minimal-grid>

It's suportted nested objects: uses angular's parse.

$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 }
]

Keep in mind: this implementation uses the power of callbacks to do anything by out of the grid directive.

The isolated scope binding:

If you want to do somenthing when the user clicks on a row just add a binding on a click:

<minimal-grid columns="myColumns" rows="myRows"
  on-click-row="myCallbackClick(row)"
  ></minimal-grid>

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.

If you want to do somenthing when the user clicks on a page number (previous or next) just add a binding on a paginate:

<minimal-grid columns="myColumns" rows="myRows"
  on-change-paginate="myCallbackPaginate(pages)"
  ></minimal-grid>

pages will be something like this:

{
  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.

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:

<minimal-grid columns="myColumns" rows="myRows"
  on-change-order-by="myCallbackOrderBy(orderBy)"
  ></minimal-grid>

orderBy will be something like this:

{
  orderdirection: "asc", 
  orderby: "name"
}

It's important to pass "orderby" as parameter: Uses angular's parameter by reference.

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.

<minimal-grid columns="myColumns" rows="myRows"
  fake="true"
  ></minimal-grid>

Using this mode you will need to set the row's length by setting totalRows

<minimal-grid columns="myColumns" rows="myRows"
  fake="true"
  total-rows="myRowsLenght"
  ></minimal-grid>

Combine with callbacks and feel the power.

To run the package's test, first install the dependencies, then run npm test:

$ npm install --only=dev
$ bower install

or

$ npm install

MIT License