14.3.0 • Published 2 days ago

@handsontable/angular v14.3.0

Weekly downloads
5,169
License
SEE LICENSE IN LI...
Repository
github
Last release
2 days ago

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 CI status FOSSA Status Quality Gate Status


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.

14.3.0

4 days ago

14.2.0

1 month ago

14.1.0

3 months ago

13.1.0

8 months ago

14.0.0

5 months ago

12.4.0

11 months ago

13.0.0

10 months ago

12.3.2

1 year ago

12.3.3

1 year ago

12.3.1

1 year ago

12.3.0

1 year ago

12.2.0

1 year ago

12.1.3

2 years ago

12.1.2

2 years ago

12.1.0

2 years ago

12.1.1

2 years ago

12.0.1

2 years ago

12.0.0

2 years ago

11.1.0

2 years ago

11.0.0

2 years ago

11.0.1

2 years ago

10.0.0

3 years ago

9.0.2

3 years ago

9.0.1

3 years ago

9.0.0

3 years ago

8.4.0

3 years ago

7.0.0

3 years ago

6.0.1

4 years ago

6.0.0

4 years ago

5.1.1

4 years ago

5.1.0

5 years ago

5.0.0

5 years ago

4.0.0

5 years ago

3.0.0

5 years ago

2.0.0

6 years ago

1.0.0-beta5

6 years ago

1.0.0-beta4

6 years ago