wrappers/angular-wrapper/README.md
<a href="https://handsontable.com/docs/angular-data-grid" target="_blank">JavaScript Data Grid</a> with a spreadsheet-like look and feel.</h3>
<a href="https://handsontable.com">Website</a> — <a href="https://handsontable.com/docs/angular-data-grid">Documentation</a> — <a href="https://handsontable.com/docs/angular-data-grid/themes">Themes</a> — <a href="https://handsontable.com/docs/angular-data-grid/api">API</a> — <a href="https://github.com/handsontable/handsontable/discussions">Community</a>
<picture> <source media="(prefers-color-scheme: dark)" srcset="https://github.com/handsontable/handsontable/blob/develop/resources/handsontable-preview-dark-theme.png?raw=true"/> <source media="(prefers-color-scheme: light)" srcset="https://github.com/handsontable/handsontable/blob/develop/resources/handsontable-preview-light-theme.png?raw=true"/> </picture> </div>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.
npm install handsontable @handsontable/angular-wrapper
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();
HotTableModuleimport { HotTableModule } from '@handsontable/angular-wrapper';
@Component({
standalone: true,
imports: [HotTableModule],
})
HotTable componentimport {
GridSettings,
HotTableComponent,
HotTableModule,
} from "@handsontable/angular-wrapper";
@Component({
standalone: true,
imports: [HotTableModule],
template: `
<hot-table [data]="data" [settings]="gridSettings" />
`,
})
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"
};
}
Handsontable themes control how your data table looks: colors, spacing, typography, borders, and overall visual style.
You get three built-in themes out of the box:
Each theme supports:
You can style Handsontable to match your product's visual identity by creating a custom theme. Use the Theme API to extend a built-in theme and apply your own styling while keeping support for light/dark modes and density settings.
To stay aligned with design, you can rely on the:
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.
div) or windowAt 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.
We're here to help!
If you're using Handsontable with a free, non-commercial license, you can:
If you have a commercial license, feel free to contact us directly at [email protected] or use our contact form.
Handsontable is available under two licensing options, allowing you to choose the one that best fits your needs. Each license comes with its own terms and conditions, as outlined below:
This license is available for non-commercial purposes such as teaching, academic research, or evaluation. It allows you to use Handsontable free of charge under the terms specified in the non-commercial license agreement. Learn more here.
For commercial use, a paid license is required. This license includes support and maintenance to ensure you get the most out of Handsontable. The commercial license can be purchased directly from Handsoncode or through an authorized reseller. See the pricing page for details.
For projects covered by the free 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 at handsontable.com/pricing. You can find more details in our documentation.
Contributions are welcome, but before you make them, please read the Contributing Guide and accept the Contributor License Agreement.
Created and maintained by the Handsontable Team 👋
© 2012 - 2025 Handsoncode