Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including ng-handsontable with all npm packages installed. Try it out:

ng-handsontable lists no main file and has no index.js, so it can't be directly required. If this is a mistake, please let us know. It may however contain internal files that you can require manually:

// require("ng-handsontable/[??]")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

ng-handsontable v0.13.0

AngularJS directive for Handsontable

ngHandsontable - the AngularJS directive for Handsontable Build Status

Enables creation of data grid applications in AngularJS.

Demo

See the demo at http://handsontable.github.io/ngHandsontable.

Usage

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>

Include component to your app:

angular.module('my-app', ['ngHandsontable']);

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
];

Directives and attributes specification

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.

License

The MIT License (see the LICENSE file for the full text)

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free