@handsontable/angular
Advanced tools
This is the official wrapper of Handsontable data grid for Angular.
It provides data binding, data validation, filtering, sorting and more.
Use npm to install this wrapper together with Handsontable.
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.
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>
A list of some of the most popular features:
We provide support for all users through GitHub issues. If you have a commercial license then you can add a new ticket through the contact form.
If you would like to contribute to this project, make sure you first read the guide for contributors.
Handsontable is compatible with modern browsers such as Chrome, Firefox, Safari, Opera, and Edge. It also supports Internet Explorer 9 to 11 but with limited performance.
This wrapper is released under the MIT license but under the hood it uses Handsontable, which is dual-licensed. You can either use it for free in all your non-commercial projects or purchase a commercial license.
| Free license | Paid license |
|---|---|
| For non-commercial purposes such as teaching, academic research, personal experimentation, and evaluating on development and testing servers. | For all commercial purposes |
| All features are available | All features are available |
| Community support | Dedicated support |
| Read the license | See plans |
The license key is obligatory since Handsontable 7.0.0 (released in March 2019).
If you use Handsontable for purposes not intended toward monetary compensation such as, but not limited to, teaching, academic research, evaluation, testing and experimentation, pass the phrase 'non-commercial-and-evaluation', as presented below.
You can pass it in the settings object:
settings: {
data: data,
rowHeaders: true,
colHeaders: true,
licenseKey: 'non-commercial-and-evaluation'
}
Alternatively, you can pass it to a licenseKey prop:
<hot-table [settings]="settings" [licenseKey]="00000-00000-00000-00000-00000"></hot-table>
If, on the other hand, you use Handsontable in a project that supports your commercial activity, then you must purchase the license key at handsontable.com.
The license key is validated in an offline mode. No connection is made to any server. Learn more about how it works.
Created by Handsoncode with ❤ and ☕ in Tricity.
[14.0.0] - 2023-11-22
Ctrl/Cmd + Shift + Space keyboard shortcut for selecting all cells. #10237TAB key and introduced a new tabNavigation option. #10430 #10585aria-label attribute to the checkbox renderer. #10539role attributes to the filtering menu's links. #10548navigableHeaders option along with other changes. #10301beforeSelectionHighlightSet hook that allows modifying logical selection coordinates before they are applied to the rendering engine. #10513select renderer and cell type. #10529handsontable and date renderers for their respective cell types to allow adding the a11y attributes. #10535beforeColumnWrap and beforeRowWrap hooks. #10550angular@17 examples to ensure Handsontable works with that Angular version. #10584imeFastEdit option to minimize the negative effects affecting the "fast edit" feature for the IME users. #10342scrollViewportTo method to allow disabling of cell auto-snapping. #10508forwardToContext option to the ShortcutManager. #10519package.json files. #10509ManualRowMove and ManualColumnMove plugins. #10475offset helper for elements placed in foreign object contexts. #10480transform: scale attribute applied. #10482updateData value to the ChangeSource type. #10488Ctrl/Cmd does not trigger non-contiguous selection. #10502Autocomplete editor's list in cases when there were no items. #10506Ctrl/Cmd + Shift key combination. #10622For more information on Handsontable 14.0.0, see:
FAQs
Best Data Grid for Angular with Spreadsheet Look and Feel.
The npm package @handsontable/angular receives a total of 6,757 weekly downloads. As such, @handsontable/angular popularity was classified as popular.
We found that @handsontable/angular demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.