ngHandsontable - the AngularJS directive for Handsontable
Enables creation of data grid applications in AngularJS.
Note: This is a fork of the original ngHandsontable, created to allow us to expand and customize the functionality as needed.
Notable changes from the original:
- uses
$parse
to parse the value of thedatarows
attribute, which is much more robust and also allows for sorting and filtering the options (very similar to ngRepeat) - deep watch on the row object so that if the options change the dropdowns will be updated accordingly
autocompleteFactory
now receives the entirescope
object in order to support the above
See a demo of the original at http://handsontable.github.io/ngHandsontable
Using Bower:
bower install --save myfarms-nghandsontable
Include the library files:
<link rel="stylesheet" media="screen" href="bower_components/handsontable/dist/handsontable.full.css">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/handsontable/dist/handsontable.full.js"></script>
<script src="dist/ngHandsontable.js"></script>
Template:
<hot-table settings="{colHeaders: colHeaders, contextMenu: ['row_above', 'row_below', 'remove_row'], afterChange: afterChange}"
row-headers="false"
min-spare-rows="minSpareRows"
datarows="db.items"
height="300"
width="700">
<hot-column data="id" title="'ID'"></hot-column>
<hot-column data="name.first" title="'First Name'" type="grayedOut" read-only></hot-column>
<hot-column data="name.last" title="'Last Name'" type="grayedOut" read-only></hot-column>
<hot-column data="address" title="'Address'" width="150"></hot-column>
<hot-column data="product.description" title="'Favorite food'" type="'autocomplete'">
<hot-autocomplete datarows="description in product.options"></hot-autocomplete>
</hot-column>
<hot-column data="price" title="'Price'" type="'numeric'" width="80" format="'$ 0,0.00'"></hot-column>
<hot-column data="isActive" title="'Is active'" type="'checkbox'" width="65" checked-template="'Yes'" unchecked-template="'No'"></hot-column>
</hot-table>
Controller:
$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
];
Main directive for creating table is <hot-table>
. 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 <hot-column>
directive
as a children of <hot-table>
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
-> <hot-table auto-wrap-col>
.
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)