https://github.com/handsontable/ngHandsontable

Official AngularJS directive for Handsontable
https://github.com/handsontable/ngHandsontable

angularjs data-grid data-table dynamic-table excel grid grid-editor spreadsheet table

Last synced: 3 months ago
JSON representation

Official AngularJS directive for Handsontable

• Host: GitHub
• URL: https://github.com/handsontable/ngHandsontable
• Owner: handsontable
• License: mit
• Created: 2012-09-17T15:14:10.000Z (about 12 years ago)
• Default Branch: develop
• Last Pushed: 2022-09-24T02:47:51.000Z (about 2 years ago)
• Last Synced: 2024-08-08T20:43:49.479Z (3 months ago)
• Topics: angularjs, data-grid, data-table, dynamic-table, excel, grid, grid-editor, spreadsheet, table
• Language: JavaScript
• Homepage: http://handsontable.github.io/ngHandsontable/
• Size: 12.5 MB
• Stars: 433
• Watchers: 55
• Forks: 159
• Open Issues: 31
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ngHandsontable - the AngularJS directive for [Handsontable](https://github.com/handsontable/handsontable) [![Build Status](https://travis-ci.org/handsontable/ngHandsontable.png?branch=master)](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)