ngHandsontable

Angular wrapper for Handsontable data grid editor

AngularJS

Install


Install the component using Bower:

    $ bower install ngHandsontable --save
  
using NPM:

    $ npm install ng-handsontable --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.

Fork me on GitHub

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.

More demos

PRO features


To install Handsontable PRO overwrite regular handsontable version with new one:

    $ bower install handsontable=git@git.handsontable.com:handsontable/handsontable-pro.git --save
  
If you don't have license for Pro yet, please click here for more info.