valor-software / ng2-handsontable

Angular 2 directive for Handsontable

ng2-handsontable

Native Angular2+ wrapper for Handsontable.

Handsontable is a data grid component with an Excel-like appearance. Built in JavaScript, it integrates with any data source and comes with features like data validation, sorting, grouping, data binding or column ordering. Actively supported by the Handsoncode team and the GitHub community.

---

Quick start

1. Add ng2-handsontable to your package.json or install with npm i ng2-handsontable --save. The latest version of ng2-handsontable only works for Angular5+. For Angular2 or Angular4 use ng2-handsontable@2.

2. If you are using SystemJS, add the ng2-handsontable path to your SystemJS.config.js: 'ng2-handsontable': 'node_modules/ng2-handsontable/bundles/ng2-handsontable.umd.js'. Webpack (used by Angular-CLI) picks up the path automatically.

3. Import the HotTableModule into your module. Here's a TypeScript example:

import { HotTableModule } from 'ng2-handsontable';
...

@NgModule({
  ...
  imports: [
    HotTableModule
  ],
  ...
})
export class MyModule {
}

4. Use the hot-table component in your template. The following example displays the supported attributes:

<hot-table [data]="data"
           [columns]="columns"
           [colHeaders]="colHeaders"
           [colWidths]="colHeaders"
           [options]="options"
           (hotInstanceCreated)="init($event)"
           (HANDSONTABLE_EVENT)="eventHandler">
</hot-table>

• data: any[] - data source
• pageData: Observable<any[]> - observable data source for paged data
• columns?: any[] - descriptors of columns that contains information regarding type, format, source, ... of particular column
• colHeaders?: string[] - array of column headers, default column headers will be shown (or not be shown, it depends on other settings) if this parameter is undefined
• colWidths?: number[] - array of column sizes, default column size will be applied if this parameter is undefined
• options?: any - any of the Handsontable options
• hotInstanceCreated - Emits the Handsontable instance after it has been created. (Alternatively the this-context of the Handsontable hooks init() or afterInit() could be used.)
• 'HANDSONTABLE_EVENT' - all Handsontable events are implemented as EventEmitters, e.g. (beforeInit)="onBeforeInit".

The free version of Handsontable is used by default, but the pro-version could be used as a drop-in replacement.

5. The following methods are available as a public API on HotTableComponent (which you can access from your parent component with @ViewChild(HotTableComponent) hotTableComponent):

• getHandsontableInstance(): Handsontable - returns the underlying Handsontable Core instance; all registered Handsontable plugins are accessible via instance.getPlugin()
• markAsChanged(properties: ('data' | 'options' | 'colHeaders' | 'colWidths' | 'columns')[])- Call this function to mark any of the given input properties as changed in case they were changed partially, rather than replaced by a new object. The component picks up the latter through Angular's ngOnChanges(), but not the former. For example, when a new row is added to an existing 'data' input array, call markAsChanged(['data']).

6. See the demo and the demo sources for further details.

Troubleshooting

• ZoneJS < 0.8.20 was throwing an error because of Handsontable's wrapping of the native Promise. If you are not able to update zone.js, you will need to import handsontable before zone.js with import 'handsontable'. For an AngularCLI-project, the zone.js import happens in the polyfill.ts file.

Please follow this guidelines when reporting bugs and feature requests:

1. Use GitHub Issues board to report bugs and feature requests (not our email address)
2. Please always write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.

Thanks for your understanding!

License

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

ng2-handsontable's Issues

Get HotTable Instance to force render

Hi together,

I´m having problems with accessing the HotTable Instance in order to force a re-render for Data changes from JS (weirdly the table shows the changes when I scroll).
I tried to access it from a Parent Component with
@ViewChild(HotTableComponent) hotTableComponent,
where HotTableComponent is the Components Class, which shows the HotTable. But hotTableComponent is always undefined. If I try to use @ViewChild(HotTable) hotTableComponent, I get an TS error that HotTable is undefined.

Is this a Bug or am I doing something wrong?

Unable to load transpiler to transpile

When importing ng2-handsontable into the module file I get this error "Unable to load transpiler to transpile http://localhost:52607/node_modules/ng2-handsontable/index.js".

"(SystemJS) XHR error (404 Not Found) loading http://localhost:52607/traceur/traceur.js
	Error: XHR error (404 Not Found) loading http://localhost:52607/traceur/traceur.js
	    at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:52607/node_modules/zone.js/dist/zone.js:1242:29) [<root>]
	    at Zone.runTask (http://localhost:52607/node_modules/zone.js/dist/zone.js:166:47) [<root> => <root>]
	    at XMLHttpRequest.ZoneTask.invoke (http://localhost:52607/node_modules/zone.js/dist/zone.js:420:38) [<root>]
	Error loading http://localhost:52607/traceur/traceur.js
	Unable to load transpiler to transpile http://localhost:52607/node_modules/ng2-handsontable/index.js
	Error loading http://localhost:52607/node_modules/ng2-handsontable/index.js as "ng2-handsontable" from http://localhost:52607/app/app.module.js"

I used the quickstart files for Angular 2 to make sure it wasn't our own app that was conflicting with anything. Then npm install ng2-handsontable.

All I'm doing up to this point is adding the import to the module file.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import {HotTableModule} from 'ng2-handsontable';

@NgModule({
  imports:      [ BrowserModule, HotTableModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

I did try configuring traceur in another test to resolve the transpile error but it would lead to more errors in handsontable about $defineProperty is not a function.

Error: (SystemJS) $defineProperty is not a function
	TypeError: $defineProperty is not a function
	    at Object.createClass (http://localhost:52607/node_modules/handsontable/dist/handsontable.full.js:22329:5)

during beforeRemoveRow hook, the rows are already removed from table data array

Ng2-handsontable v1.0.3

Tried to hook on event beforeRemoveRow to get the row data that was about to be removed.
But it seems that the data bound to the table has already been updated with the row data removed.
Wonder if this event fired by the wrapper is asynchronous or blocking. it seems the actual beforeRemoveRow from the native table still proceed with execution in parallel.

Tried with native handsontable, when the beforeRemoveRow event was fired, the data array bound to the table still contains the original data rows before removal.

RowHeader not available?

I can't use rowHeaders is that normal?

angular 2 release

hey guys, can you let us know till when can we expect the update for the angular 2 final release version?

Data loading is not completely

When use angular2 and ngx - modals of the bootstrap process ng2-handsontable data, load data is incomplete, load only one column, when clicking handsontable area load data completely, why?

Explain use of Core Methods in ng directive

Hi,

I'm trying to use CoreMethods like updateSettings() from Handsontable but I can't find anywhere in the doc or in the demo files where Core Methods are call with ng2-handsontable.

It might be a good idea to write a small explanation or the clearly write if they are not available.

Thanks in Advance.

Getting 2 rows of data when pasting to one row in Chrome.

Hi There

When you copy a row and paste it into a different row on Chrome, 2 rows are inserted instead of one.

This only seems to happen when Handsontable is running inside Angular2. I think this is somehow related to ZoneJS since this issue seems also be happening in MeteorJS when the ZoneJS Bundle is used there (awsp/handsontable-meteor#17).

You can reproduce it here: https://valor-software.github.io/ng2-handsontable/

Steps to reproduce:

• Open example page in Chrome (47.0.2526.111)
• Click on a single row
• CMD+C (on Mac)
• Click on a different row (has to be writable)
• CMD+V

Two rows are inserted.

Any idea why ZoneJS might cause this issue on Chrome?

Best regards

Pascal Helfenstein

Change Border color of selected cells

Is there any possible way to change the border color of the selected cells?

After change and onmouse down doesn't work

Im working with the same files of the example but that methods of handsontable doesn´t work in the page work but no in the code

Also the autocomplete function is not working, I tried to change the full.js file but it seems to not working i need this functionality please :)

Column headers don't update

If I create a table and bind the col-headers to a component variable, like [col-headers]="colHeaders", then when I update the component variable colHeaders, the headers of the table don't update.

EDIT: Let me clarify. The headers will take the first assignment, but not any updates to the variable afterwards. The same thing is true of changes to the colHeaders and rowHeaders attributes of the options object. I can assign colHeaders and rowHeaders there, once, but any changes afterwards aren't reflected. so with [options]="options" or with [col-headers]="colHeaders", then the first time I set this.colHeaders=something or this.options.colHeaders=something the grid will update, but not any time after the first.

I'm not sure if this is a bug report or a feature request, but I'd expect them to.

In my use-case, I need to display different grids of different sizes with different headers depending on what the user clicks in some other place in the application.

This is in 0.48 (as 1.0 isn't coming down npm yet). If you need any other info I'd be happy to provide it.

pagedData or pageData

You use pagedData in library and pageData in Quick start

How do I use with the pro version?

How do I use with the pro version?

Thanks

ZoneAwarePromise overwritten when adding Handsontable to Angular-CLI scripts

I'm encountering the same issue AND workaround as described in the following Stack link:
https://stackoverflow.com/questions/44566898/zoneawarepromise-overwritten-when-adding-handsontable-to-angular-cli-scripts

I have yet to identify an actual solution to this issue, as simply moving the import of zone.js to main.ts feels absolutely hacky. Does anyone else have a known fix for this?

How to test ng2-handsontable?

Hi

I want test ng2-handsontable , please can you give me developer guide to build and test ?

Thank you

ng2-handsontable usage example

I am new to angular2. And can someone drop a hint how to use the ng2-handsontable in my component. Maybe I have not included something.

Exported external package typings file cannot contain tripleslash references

Hi !
I have added grid according to instructions. But on building app, shows me multiple errors.(Mainly 3 errors)

1. Can't find index
   Error source: module.d.ts file on path -> ng2-handsontable\node_modules\ng2-bootstrap\dist
2. Build: Duplicate identifier 'require' and 'promise'
   Error source: multiple files ts files like es6-object.d.ts, es6-promise.d.ts,index.d.ts etc.
3. Exported external package typings file cannot contain tripleslash references
   Error source: index.ts on path -> ng2-handsontable\components
   Below is my folder structure created.
   Note: I have @angular2 installed folder while under ng2-handsontable has angular2. Is that the root cause?
   

After change event and after cell mouse down events are not working

Hi,
I integrated ng2 handsontable basic in my project.
now i want to fire event on click of cell. but it is not working at my end.
also i am not getting any error on the console.
thanks.

Use with Angular 2 CLI

Please provide instructions how to work with Angular 2 CLI 1.0.0-beta.11-webpack ?

Please publish the npm package and doc

I am using your project but because of your github tells that I should use directive "hotTable" but the package of npm is still old. Please update it.

Upgrade to Angular 4.X.X

Hello can you upgrade ng2-handsontable to ngX-handsotable ?

+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
-- [email protected] -- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

The event callback did not work with sample code

Hi,
Thank you for providing this package.
I installed ng2-handsontable in my project. I copy/paste the sample demo program. The table displayed correctly, but the even call backs are not been invoked. I searched the internet and did not find any issue regrading this. So I think I might missed something...
I will be very appreciate with your help!
Thanks,
Kenny

Is there a import and export excel feature ?

Cannot find name 'Handsontable'

My Project is manage by Angular CLI
I've installed ng2-handsontable and handsontable with the following commands :

npm install handsontable --save
npm install ng2-handsontable --save

But when serving files on my local machine with yarn : i have the error Cannot find name 'Handsontable'

I manage to solve this issue by editing the handsontable.component.d.ts in node_modules/ng2-handsontable

replacing the following import :
import * as Handsontable from 'handsontable';
with
import Handsontable from 'handsontable';
but its kind of a dirty solution to me. Is it a bug or i did something wrong?

Need event to update parent(s) when HOT instance is created so HOT instance methods are available

This functionality should probably be implemented as a service to wrap the HOT instance and expose the methods....

But until then-

Would like an emitter to be called when HOT instance is created in component.

Angular 2

Is ng2-handsontable working on angular 2??

not compatible with handsontable > 0.18.0?

Hi,

cool package.

bower.json indicates dependency of handsontable 0.18.0. not exactly sure which stable version handsontable itself is on. is this package not compatible with handsontable > 0.18.0?

Custom Cell Renderer and Cell Editor

Are there any samples or documentation in using custom renderers and editors? I'm thinking it would be something like creating a component and assigning that component in the column definition as either the renderer or the editor.

Thanks, team!

[rowHeaders] in template

I know you can assign rowHeaders and colHeaders in the options object, but for some reason you can only assign colHeaders (or col-headers) in the template, not rowHeaders.

Not working with angular 4.0.0

Below is error from firefox console
Template parse warnings:
The element is deprecated. Use instead ("
[WARNING ->]<template [ngIf]="true">
<col [class.k-group-col]="true" *ngFor="let g of groups" />
"): ng:///SharedModule/ColGroupComponent.html@1:4 core.umd.js:3060:9
Environment config Object { API: "https://demo.com", ENV: "DEV" } app.component.js:17:9
Angular is running in the development mode. Call enableProdMode() to enable the production mode. core.umd.js:3052:9
ERROR Error: Uncaught (in promise): TypeError: registeredOverlays[type] is not a constructor
[12]</<.createOverlay@http://localhost:5555/node_modules/ng2-handsontable/bundles/ng2-handsontable.umd.js:7924:12
WalkontableOverlays@http://localhost:5555/static/handsontable/handsontable.full.js:2173:26
Walkontable@http://localhost:5555/static/handsontable/handsontable.full.js:1153:23
TableView@http://localhost:5555/static/handsontable/handsontable.full.js:20851:13
Core/this.init@http://localhost:5555/static/handsontable/handsontable.full.js:5096:17
Handsontable@http://localhost:5555/static/handsontable/handsontable.full.js:4232:3
HotTable.prototype.ngOnInit@http://localhost:5555/app/shared/handsontable/handsontable_WAMP.js:222:21
checkAndUpdateDirectiveInline@http://localhost:5555/node_modules/@angular/core/bundles/core.umd.js:10766:9
checkAndUpdateNodeInline@http://localhost:5555/node_modules/@angular/core/bundles/core.umd.js:12144:17
checkAndUpdateNode@http://localhost:5555/node_modules/@angular/core/b…
Stack trace:
[object Object]

beforeColumnSort does not honor returning false

Returning false from a beforeColumnSort handler in an Angular 4 component has no effect. The handler is invoked after the data is already locally sorted.

I tried setting the EventEmitter to synchronous, for example, @output() public beforeColumnSort = new EventEmitter(false); and this had no impact. beforeColumnSort is still called after the local sort has completed.

The native code for the sortColumn plugin only ever returns the sort column index and not a Boolean. For example, let allowSorting = Handsontable.hooks.run(this.hot, 'beforeColumnSort', this.hot.sortColumn, this.hot.sortOrder);

We are trying to implement server-side paging and sorting but we are unable to turn off the local sort.
See: https://docs.handsontable.com/0.29.2/Hooks.html#event:beforeColumnSort

Samples for Using Core API

First of all, thanks for the great work. I have searched through all the closed issues and codes but couldn't seem to find an example of a use case whereby the HOT APIs are being used. For example, I would like to get the underlying data of a sorted table using getData(r, c, r2, c2) from my component where the HOT is rendered.

Would you be so kind to point me to a documentation or a sample?

Thanks so much.

Problems when using in a lazy loaded module

I am trying to use the HotTableModule in a lazy loaded module in my app. Every other lazy loaded module works fine, and the lazy loaded module which imports HotTableModule works fine if I remove that import. I am using angular cli 1.3.0-rc.3, and I can see that Webpack is loading the module fine, but when the router tries to fetch the module, I get an error saying that the module could not be found.

I would like to confirm that this module has been tested in a lazy loaded setup or if it's a known bug that it's incompatible with lazy loading.

Thanks.

ng2-handsontable very basic sample with minimum requirement

Hi,
Is it possible to create Demo with very simple example?
For instance,

1. One .ts file importing handsontable, providing selector for handsontable grid in it and same file containing minimum json data (2/3 columns).
2. Second .ts file importing first.ts file and bootstraping.
3. .html file using handsontable grid selector.
   It would be really helpful, since current example is more complex and involves advance features. Basic demo is there but it is mixing with others on top (Index.html level).

is the latest build working?

angular 0.46.0 integration

Consider including handsontable.css

Final NPM release

Hey guys, I am seeing a lot of activity from the past few days. Thank you so much for updating this to angular 2.4. Is it on npm yet? Can I start using this in my project?

angular 2.0.0-beta.12

I'm using angular2 version 2.0.0-beta.12
In this version the module 'angular2/angular2' is not exists, and handsontabe.ts is trying to get stuff from that module and fail

import {OnInit, OnDestroy, Directive, EventEmitter, ElementRef} from 'angular2/angular2';
should change to
import {OnInit, OnDestroy, Directive, EventEmitter, ElementRef} from 'angular2/core;

ng2-handsontable does not work with [email protected] and later

Hi,

This components needs some refactoring to work with the current versions of angular. Some of open tasks would be:

• import from angular2/common instead of angular2/angular2
• move from @directive to @component
• 'tempalte' property for @component
• Make sure it works with the latest HandsOnTable

Get instance inside afterChange()

I wan't to be able to do something similar to this:
http://jsfiddle.net/qcr2r6fp/

But how do I get hold of the instance inside of the afterChange method so I can use updateSettings?

No styles after following Quick start

Following the Quick start instructions:

I installed with "npm i ng2-handsontable --save" and didn't do step 2, because I'm using the CLI. Updated the module file per step 3, then added:

To the .html:
<hot-table
[data]="data"
[options]="options">

and to the component.ts:
data: Array = [
[1,2,3],
[4,5,6]
]
options ={
colHeaders: true,
rowHeaders: true
}

From the result it seems clear that no styles are being applied:

I've tried copying handsontable.css from the original non-angular handsontable project and including it in the component's styleUrls but that didn't work.

In the process of writing this I tried including it in a tag in my index.html and that seems to have worked, but I'm still submitting to say that some mention of the required .css should be in the Quick Start section.

Auto-complete not working for basic-demo

for basic-demo autocomplete part is not working. I am using the same code but the autocomplete dropdown is not coming.

Is this working with beta versions of angular?

I'm using angular2 2.0.0-beta.0 either I'm missing something or I'm really not seeing how to include the new libraries into the components.ts

Custom Button Example

Can you show how to add a custom button to maybe update settings from readOnly = true to readyOnly = false on a button click? Kind of like this example: http://docs.handsontable.com/0.31.2/demo-custom-buttons.html

angular4 with custom validator

Thanks for the great library! I've used it quite a bit for my angularJS projects. This is my first angular4 project where I need the handsontable library. I am trying to write a few custom validators for my columns. I have a 2 questions:

• Is there a built-in requiredValidator for cells?

• Could you provide an example of what a custom validator would look like in Typescript (where I have access to the row/col/prop info AND my component properties too? I have tried it two ways.

  1. inline:
     this.columns = [ {data: 'name', validator: (value, callback) => { ....}}, ...
     This allows me access to this being my component properties, but I don't have access to the row/column/prop/instance that I am validating.
  2. as a separate function:
     private matchingDDValidator(value, callback) { ..... }
     This allows me access to this being the columnSettings (row/column/prop/instance) but not any of my component properties.

Am I missing something? I have searched and searched for an example of doing a validator with the new angular2+ syntax. The examples I have found have all been for renderers.

Thanks.

angular 2 rc-4

does this work with angular 2 rc-4?

Is this opensource?

Will I need to purchase 'Handsontable Pro' license for using features like server side sorting/pagination etc?

Thanks.

Update npm release?

Hi,

can you publish the current version to npm, please?

I tried installing ng2-handsontable directly from GitHub but can't make it work in our angular-cli based application (mostly because the transpiled javascript files are missing when installing directly from GitHub). So I think an updated release would help a lot.

Context menus not available when using Angular v4 CLI

It seems that the context menus (among other things) are not available when using Angular v4 CLI.

Does anyone have context menu support working in Angular v4 CLI?

I believe this is the problem:

The context menu relies on the CSS htContextMenu, which does not exist in any of the CSS files found here:
https://github.com/handsontable/handsontable/tree/master/src/css

This is included in handsontable.full.css, but my environment shows a few errors with this file.

I have instead imported contextMenu.css.

...and this solves the problem. At the moment I've copied these locally to my project and am including them in the styles portion of the .angular-cli.json file.

I realize there are more stylesheets than these and I'll likely have to manually include them as well.

It would be great to get this updated to Angular v4 CLI so we didn't have to take these manual steps.

Thanks.