Tutorial: Installation

Installation

Handsontable for Angular is the official wrapper for Handsontable, a JavaScript data grid component with a spreadsheet look & feel. It easily integrates with any data source and comes with lots of useful features like data binding, validation, sorting or powerful context menu.

Installation

This component needs the Handsontable library to work. We suggest using npm to install the package.

npm install handsontable-pro @handsontable-pro/angular

for Handsontable Community Edition

npm install handsontable @handsontable/angular

Basic usage

Import the Handsontable styles to your project

          @import '~handsontable-pro/dist/handsontable.full.css';
        
for Handsontable Community Edition
          @import '~handsontable/dist/handsontable.full.css';
        

Import the Handsontable component in your module

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

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

Now, you can use the Handsontable component in your HTML files

        <hot-table
  [colHeaders]="true"
  [rowHeaders]="true"
  [data]="dataset"></hot-table>
        
        

License

Handsontable for Angular is an open source library released free under the MIT license.

The MIT license

Help us improve this page