# ngHandsontable - the AngularJS directive for [Handsontable](https://github.com/handsontable/handsontable) [](https://travis-ci.org/handsontable/ngHandsontable)
Enables creation of data grid applications in AngularJS.
## Demo
See the demo at http://handsontable.github.io/ngHandsontable.
## Usage
Include the library files:
```html
```
Include component to your app:
```js
angular.module('my-app', ['ngHandsontable']);
```
Template:
```html
```
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](http://docs.handsontable.com/Options.html) 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.
## License
The MIT License (see the [LICENSE](https://github.com/handsontable/ngHandsontable/blob/master/LICENSE) file for the full text)