Have ideas to improve npm?Join in the discussion! »

    @handsontable/angular
    TypeScript icon, indicating that this package has built-in type declarations

    9.0.1 • Public • Published

    Handsontable - data grid for Angular

    Data Grid for Angular

    Handsontable's wrapper for Angular combines data grid features with spreadsheet-like UX.
    It provides data binding, data validation, filtering, sorting, and CRUD operations.

    npm npm Build status FOSSA Status Known Vulnerabilities


    Handsontable data grid for Angular

    Features

    The most popular features of Handsontable for Angular:

      ✓  Multiple column sorting
      ✓  Non-contiguous selection
      ✓  Filtering data
      ✓  Export to file
      ✓  Validating data
      ✓  Conditional formatting
      ✓  Merging cells
      ✓  Freezing rows/columns
      ✓  Moving rows/columns
      ✓  Resizing rows/columns
      ✓  Hiding rows/columns
      ✓  Context menu
      ✓  Comments

    Documentation

    Get Started

    Install with npm

    Run the following command in your terminal

    npm install handsontable @handsontable/angular
    

    You can load it directly from jsDelivr as well.

    <script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@handsontable/angular/bundles/handsontable-angular.umd.min.js"></script>
    
    <link href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" rel="stylesheet">

    The component will be available as Handsontable.angular.HotTable.

    Usage

    Use this data grid as you would any other component in your application. Options can be set as HotTable props.

    Styles

    @import '~handsontable/dist/handsontable.full.css';

    Angular Module

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppComponent } from './app.component';
    import { HotTableModule } from '@handsontable/angular';
     
    @NgModule({
      imports: [
        BrowserModule,
        HotTableModule.forRoot()
      ],
      declarations: [ AppComponent ],
      bootstrap: [ AppComponent ],
    })
    export class AppModule { }

    Angular Component

    import { Component } from '@angular/core';
    
    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ],
    })
    export class AppComponent  {
      data: any[] = [
        ['', 'Tesla', 'Mercedes', 'Toyota', 'Volvo'],
        ['2019', 10, 11, 12, 13],
        ['2020', 20, 11, 14, 13],
        ['2021', 30, 15, 12, 13]
      ],
    }

    Template

    <hot-table [data]="data" [colHeaders]="true" [rowHeaders]="true" [width]="600" [height]="300"></hot-table>

    View live demo

    Support

    We provide support for developers working with commercial version via contact form or at support@handsontable.com.

    If you use a non-commercial version then please ask your tagged question on StackOverflow.

    License

    Handsontable is a commercial software with two licenses available:

    • Free for non-commercial purposes such as teaching, academic research, and evaluation. Read it here.
    • Commercial license with support and maintenance included. See pricing plans.

    License key

    If you use Handsontable for Angular in a project that supports your commercial activity, then you must purchase the license key at handsontable.com.

    If you use the free for non-commercial license of Handsontable, then pass the phrase 'non-commercial-and-evaluation', as described in this documentation.



    Proudly created and maintained by the Handsontable Team.

    Install

    npm i @handsontable/angular

    DownloadsWeekly Downloads

    6,881

    Version

    9.0.1

    License

    SEE LICENSE IN LICENSE.txt

    Unpacked Size

    900 kB

    Total Files

    35

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar