Native Angular2 directive for the Handsontable component.
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.
-
Add ng2-handsontable to your package.json or install with
npm i ng2-handsontable --save
. -
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. -
Import the
HotTableModule
into your module. Here's a TypeScript example:
import {HotTableModule} from 'ng2-handsontable';
...
@NgModule({
...
imports: [
HotTableModule
],
...
})
export class MyModule {
}
- Use the
hot-table
directive in your template. The following example displays the supported attributes:
<hot-table [data]="data"
[columns]="columns"
[col-headers]="colHeaders"
[col-widths]="colHeaders"
[options]="options"
(HANDSONTABLE_EVENT)="eventHandler">
</hot-table>
data: any[]
- data source for thisHotTable
pageData: Observable<any[]>
- observable data source for thisHotTable
for paged datacolumns?: any[]
- descriptors of columns that contains information regarding type, format, source, ... of particular columncol-headers?: string[]
- array of column headers, default column headers will be shown (or not be shown, it depends on other settings) if this parameter is undefinedcol-widths?: number[]
- array of column sizes, default column size will be applied if this parameter is undefinedoptions?: any
- any of the Handsontable options- '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.
- See the demo and the demo sources for further details.
Please follow this guidelines when reporting bugs and feature requests:
- Use GitHub Issues board to report bugs and feature requests (not our email address)
- 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!
The MIT License (see the LICENSE file for the full text)