AngularJS directive for Handsontable
npm install ng-handsontableEnables creation of data grid applications in AngularJS.
See the demo at http://handsontable.github.io/ngHandsontable.
Include the library files:
``html`
Include component to your app:
`js`
angular.module('my-app', ['ngHandsontable']);
Template:
`html`
min-spare-rows="minSpareRows"
datarows="db.items"
height="300"
width="700">
Controller:
`javascript`
$scope.db.items = [
{
"id": 1,
"name": {
"first": "John",
"last": "Schmidt"
},
"address": "45024 France",
"price": 760.41,
"isActive": "Yes",
"product": {
"description": "Fried Potatoes",
"options": [
{
"description": "Fried Potatoes",
"image": "//a248.e.akamai.net/assets.github.com/images/icons/emoji/fries.png"
},
{
"description": "Fried Onions",
"image": "//a248.e.akamai.net/assets.github.com/images/icons/emoji/fries.png"
}
]
}
},
//more items go here
];
Directives and attributes specification
Main directive for creating table is . For defining column options you can use settings object with
columns property. If you want to describe column behavior in declarative way you can add directive
as a children of element and add all neccessary attributes to describe column options.
All Handsontable options listed here should be supported.
Options in camelCase mode should be passed to the directive in hyphenate mode e.q autoWrapCol: true -> .
It's recommended to put all your settings in one big object (settings="ctrl.settings"`).
Settings attribute unlike any other attributes is not watched so using this can be helpful to achieve higher performance.
The MIT License (see the LICENSE file for the full text)