JavaScript Data Grid with a spreadsheet-like look and feel.
With its spreadsheet-like editing features, it's perfect for building data-rich internal apps. It allows users to enter, edit, validate, and process data from various sources. Common use cases include resource planning software (ERP), inventory management systems, digital platforms, and data modeling applications.
Key Features
Installation
Below is the installation guide for the Angular wrapper. If you're using a different framework, please refer to its dedicated wrapper for specific installation instructions.
Install Handsontable from npm or Yarn.
npm install handsontable @handsontable/angular-wrapper
Import CSS files
Import Handsontable's CSS into your application's styles.scss:
@import "handsontable/styles/handsontable.min.css";@import "handsontable/styles/ht-theme-main.min.css";
Register Handsontable's modules
Import and register all of Handsontable's modules with a single function call (for example, in app.component.ts):
import { registerAllModules } from 'handsontable/registry';
registerAllModules();
Import the HotTableModule
import { HotTableModule } from '@handsontable/angular-wrapper';
@Component({
standalone: true,
imports: [HotTableModule],})
Use the HotTable component
import {
GridSettings,
HotTableComponent,
HotTableModule,} from "@handsontable/angular-wrapper";
@Component({
standalone: true,
imports: [HotTableModule],
template: ` `,})export class HotTableWrapperComponent {
readonly data = [
["", "Tesla", "Volvo", "Toyota", "Ford"],
["2019", 10, 11, 12, 13],
["2020", 20, 11, 14, 13],
["2021", 30, 15, 12, 13],
];
readonly gridSettings: GridSettings = {
rowHeaders: true,
colHeaders: true,
height: "auto",
autoWrapRow: true,
autoWrapCol: true,
licenseKey: "non-commercial-and-evaluation"
};}
Resources
Is Handsontable a Data Grid or a Spreadsheet?
Handsontable is a data grid component written in JavaScript, not a spreadsheet. However, it brings in many features typically found in spreadsheet software. We designed it this way because spreadsheet-like patterns are often the most user-friendly when it comes to data entry and management.
Spreadsheet-like features in Handsontable:
At first glance, it might seem that a data table, spreadsheet, and data grid are just different names for the same thing - an interactive table displaying data. In reality, these tools serve different purposes and offer distinct functionalities, designed to meet specific needs. Handsontable sits comfortably in the data grid category while incorporating many of the best aspects of spreadsheet software.
Support
We're here to help!
You can:
If you have a commercial license, feel free to contact us directly via email or use our contact form.
License Key
For projects covered by the non-commercial license, simply use the phrase 'non-commercial-and-evaluation' as your license key.
If you're using Handsontable in a project that supports commercial activities, you'll need to purchase a license key. You can find more details in our documentation.
Contributing
Contributions are welcome, but before you make them, please read the Contributing Guide and accept the Contributor License Agreement.
