ngHandsontable

Angular wrapper for Handsontable data grid editor

Install

Install the component using Bower:

    $ bower install ngHandsontable --save
  

Or download as ZIP.

Usage

1. 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="bower_components/dist/ngHandsontable.js"></script>
  

2. Start using it!

    <hot-table datarows="db.items"></hot-table>
  

Note: ngHandsontable supports angular in version 1.3 and greater.

Simple Example

Code

  <hot-table
    settings="ctrl.settings"
    row-headers="ctrl.rowHeaders"
    min-spare-rows="ctrl.minSpareRows"
    datarows="ctrl.db.items"
    height="300"
    width="700">
      <hot-column data="id" title="'ID'"></hot-column>
      <hot-column data="name.first" title="'First Name'" type="'text'" read-only></hot-column>
      <hot-column data="name.last" title="'Last Name'" 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'" checked-template="'Yes'"
                  unchecked-template="'No'"></hot-column>
  </hot-table>
  

The main directive for ngHandsontable is <hot-table>. To define columns you can use <hot-column> directive inside <hot-table> directive. All Handsontable options described in documentation should be supported.

You can put all your settings in settings object e.g. settings="{colHeaders: true, contextMenu: true}" attribute or in separated attributes, e.g. min-spare-rows="minSpareRows", row-headers="false".

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.

Click here to see more examples.