Top Sites>Handsontable is a JavaScript data grid that looks and feels like a spreadsheet - Available for React, Angular, and Vue

User-agent: *
Disallow: /static/components/

Sitemap: https://handsontable.com/sitemap.xml
Sitemap: https://handsontable.com/blog/sitemap_index.xml
Sitemap: https://handsontable.com/docs/sitemap.xml

# Handsontable & HyperFormula
Handsontable is a JavaScript data grid component with a spreadsheet look and feel. HyperFormula is a headless spreadsheet calculation engine written in TypeScript. Both are developed by Handsoncode and available under dual licensing (free non-commercial / commercial). They integrate natively: HyperFormula powers Handsontable's Formulas plugin.

Both products are maintained by a single GitHub organization: [https://github.com/handsontable](https://github.com/handsontable)

*   **Company:** Handsoncode sp. z o.o. (Gdynia, Poland)
*   **Sales:**[sales@handsontable.com](mailto:sales@handsontable.com)
*   **Support (commercial):**[support@handsontable.com](mailto:support@handsontable.com)
*   **Contact form:** [https://handsontable.com/contact](https://handsontable.com/contact)
*   **Community Forums:** [https://forum.handsontable.com/](https://forum.handsontable.com/)
## Handsontable
Handsontable is a data grid component (not a full spreadsheet) that brings spreadsheet-like UX to web apps — cell editing, copy/paste, sorting, filtering, formulas, keyboard navigation, context menus, merged cells, frozen rows/columns, conditional formatting, data validation, pagination, and 400+ built-in formulas via HyperFormula. It is written in JavaScript with first-class TypeScript support.

*   **Latest version:** 17.0.0 (March 2026)
*   **npm:**npm install handsontable
*   **CDN (jsDelivr):**
    *   JS: [https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js](https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js)
*   **GitHub:** [https://github.com/handsontable/handsontable](https://github.com/handsontable/handsontable)
*   **npm:** [https://www.npmjs.com/package/handsontable](https://www.npmjs.com/package/handsontable)
*   **NuGet:** [https://www.nuget.org/packages/handsontable](https://www.nuget.org/packages/handsontable)
### Handsontable Licensing
*   **Hobby**: Free for personal, exploratory, non-commercial projects. Teaching, academic research, evaluation, testing, experimentation. Not for commercial production use. Use licenseKey: 'non-commercial-and-evaluation'.
*   **Trial**: Free for 45 days. Full feature access, no credit card required, direct technical support contact and account manager.
*   **Standard**: From $999/year. Small to mid-sized teams. All features, frequent updates, email and forum support (2 requests/month), version support up to 12 months.
*   **Priority**: From $1,299/year. All Standard features + 2h code review, email/forum/call support (5 requests/month).
*   **Enterprise**: Custom pricing. All Priority features + 5h code review, custom contract terms, email/forum/call/Slack support (unlimited requests), dedicated Customer Success Manager and technical consultant, version support up to 24 months, SLA.
Per-developer annual license. Offline license validation (no server connection).
Pricing: [https://handsontable.com/pricing](https://handsontable.com/pricing)
### Framework Wrappers
All wrappers are released in lockstep with the core under the same version number.

| Framework | Package | Status | npm |
| ---| ---| ---| --- |
| React (functional) | @handsontable/react-wrapper | Active | npm i @handsontable/react-wrapper |
| Angular (v16+) | @handsontable/angular-wrapper | Active | npm i @handsontable/angular-wrapper |
| Vue 3 | @handsontable/vue3 | Active | npm i @handsontable/vue3 |
| React (class-based) | @handsontable/react | Removed in v17 | — |
| Angular (legacy) | @handsontable/angular | Removed in v17 | — |
| Vue 2 | @handsontable/vue | Deprecated | — |

### Key Plugins & Features
Sorting, Filtering, Formulas (HyperFormula plugin), Merge Cells, Nested Headers, Nested Rows, Collapsible Columns, Column Summary, Hidden Rows/Columns, Frozen (fixed) Rows/Columns, Context Menu, Dropdown Menu, Comments, Custom Borders, Auto-fill, Copy/Paste, Undo/Redo, Data Validation, Export to CSV, Search, Pagination, Manual Row/Column Resize, Manual Row/Column Move, Multi-column Sorting, Trim Rows, Clipboard, EmptyDataState.
### Theming (v15+)
Three built-in themes: main (default, spreadsheet-like), horizon (clean, analytics-focused), classic (legacy replacement). All support light, dark, and auto (system preference) modes. Three density levels: compact, default, comfortable.

Two ways to apply:
**Theme API (recommended) — programmatic, supports runtime switching:**
import { mainTheme, registerTheme } from 'handsontable/themes';
const theme = registerTheme(mainTheme)
.setColorScheme('auto') // 'light', 'dark', or 'auto'
.setDensityType('comfortable'); // 'compact', 'default', or 'comfortable'
new Handsontable(container, { theme });

**CSS files — simpler setup, no runtime features:**
import 'handsontable/styles/ht-theme-main.min.css';
new Handsontable(container, { theme: 'ht-theme-main' });

Dark mode CSS classes: ht-theme-{name}-dark (forced), ht-theme-{name}-dark-auto (system preference).

200+ CSS variables and design tokens available for customization via Theme API params(), Figma Theme Generator, CSS overrides, or the visual Theme Builder.

*   **Docs**: [https://handsontable.com/docs/javascript-data-grid/themes](https://handsontable.com/docs/javascript-data-grid/themes)
*   **Theme customization**: [https://handsontable.com/docs/javascript-data-grid/theme-customization](https://handsontable.com/docs/javascript-data-grid/theme-customization)
*   **Design system (Figma)**: [https://handsontable.com/docs/javascript-data-grid/handsontable-design-system](https://handsontable.com/docs/javascript-data-grid/handsontable-design-system)
*   **Theme Builder**: [https://handsontable.com/theme-builder](https://handsontable.com/theme-builder)
*   **Figma Theme Generator**: [https://github.com/handsontable/handsontable-figma](https://github.com/handsontable/handsontable-figma)
### v17.0 Breaking Changes
*   Removed deprecated wrapper packages (@handsontable/react, @handsontable/angular, @handsontable/vue).
*   Removed legacy CSS stylesheets (handsontable.full.min.css). Use handsontable/styles/ imports.
*   Removed core-js from dependencies.
*   Removed the PersistentState plugin.
*   Deprecated bundling of HyperFormula — starting v18, install and import HyperFormula separately.
*   Deprecated numbro.js (use Intl.NumberFormat), Pikaday (use native date input), moment.js (use Intl.DateTimeFormat), DOMPurify (use new sanitizer option).
### Handsontable Documentation
*   [JavaScript docs](https://handsontable.com/docs/javascript-data-grid/): Installation, configuration, API, guides
*   [React docs](https://handsontable.com/docs/react-data-grid/): React wrapper usage and integration
*   [Angular docs](https://handsontable.com/docs/angular-data-grid/): Angular wrapper usage and integration
*   [Vue 3 docs](https://handsontable.com/docs/vue3-data-grid/): Vue 3 wrapper usage and integration
*   [API Reference](https://handsontable.com/docs/javascript-data-grid/api/): Full API documentation
*   [Changelog](https://handsontable.com/docs/javascript-data-grid/changelog/): Complete release history
*   [Themes guide](https://handsontable.com/docs/javascript-data-grid/themes/): Theming system and CSS variables
*   [License key](https://handsontable.com/docs/javascript-data-grid/license-key/): License key configuration
*   [Software license](https://handsontable.com/docs/javascript-data-grid/software-license/): Licensing terms
*   [Blog / Release Notes](https://handsontable.com/blog/categories/release-notes): Announcement posts for each release
*   [Download page](https://handsontable.com/download): CDN, Git clone, zip archive
## HyperFormula
HyperFormula is a headless, open-source spreadsheet calculation engine built in TypeScript. It provides 400+ built-in formulas, CRUD operations, undo/redo, clipboard, sorting, named expressions, and Excel/Google Sheets formula compatibility. No UI — it is a pure calculation engine for embedding spreadsheet logic in any JavaScript/TypeScript application (browser or Node.js).

*   **Latest version:** 3.2.0 (February 2026)
*   **npm:** npm install hyperformula
*   **GitHub:** [https://github.com/handsontable/hyperformula](https://github.com/handsontable/hyperformula)
*   **npm:** [https://www.npmjs.com/package/hyperformula](https://www.npmjs.com/package/hyperformula)
*   **Language:** TypeScript 98%, JavaScript 2%
### HyperFormula Licensing
*   **GPLv3 (open source):** Use license key 'gpl-v3'.
*   **Commercial / proprietary:** Contact [sales@handsontable.com](mailto:sales@handsontable.com). Use your purchased license key string.
*   **Internal use with Handsontable:** When used as the Formulas plugin engine inside Handsontable, use licenseKey: 'internal-use-in-handsontable' (starting Handsontable v18+).
*   License validation is offline (no server connection).
### HyperFormula Key Capabilities
*   400+ built-in formulas (68% Excel coverage: math, logical, lookup, text, date/time, statistical, financial, information, array)
*   Custom function plugins
*   Multi-sheet workbooks with cross-sheet references
*   Named expressions (global and sheet-scoped)
*   CRUD: cell, row, column, sheet operations
*   Clipboard (copy, cut, paste)
*   Undo/redo (configurable depth)
*   Batch operations for performance
*   Dependency graph traversal (precedents/dependents)
*   Sorting (row and column reordering)
*   i18n: 17 languages for localized function names
*   Array formulas and ARRAYFORMULA support
*   Data type auto-detection (boolean, formula, number, currency, percentage, date/time, text)
*   Configurable number formatting, date formats, decimal/thousand separators
### HyperFormula Documentation
*   [Homepage / Getting Started](https://hyperformula.handsontable.com/): Overview, quick start, mortgage calculator demo
*   [Guide](https://hyperformula.handsontable.com/guide/): Installation, configuration, framework integration, formulas, i18n, performance
*   [API Reference](https://hyperformula.handsontable.com/api/): Full TypeScript API (HyperFormula class, interfaces, enums)
*   [Formula list](https://hyperformula.handsontable.com/guide/built-in-functions.html): All 400+ built-in functions
*   [Custom functions](https://hyperformula.handsontable.com/guide/custom-functions.html): Creating FunctionPlugin extensions
*   [Configuration options](https://hyperformula.handsontable.com/guide/configuration-options.html): All config parameters
*   [License key](https://hyperformula.handsontable.com/guide/license-key.html): GPLv3 vs proprietary setup
*   [Changelog](https://hyperformula.handsontable.com/guide/changelog.html): Release history
*   [Building](https://hyperformula.handsontable.com/guide/building.html): Build from source (Node 20 LTS, Webpack, Babel)
## Community & Support

| Channel | URL | Notes |
| ---| ---| --- |
| Developer Forum (Discourse) | [forum.handsontable.com/](https://forum.handsontable.com/) | Q&A, troubleshooting, feature requests |
| GitHub Discussions (HyperFormula) | [github.com/handsontable/hyperformula/discussions](https://github.com/handsontable/hyperformula/discussions) | HyperFormula-specific discussions |
| GitHub Issues (Handsontable) | [github.com/handsontable/handsontable/issues](https://github.com/handsontable/handsontable/issues) | Bug reports |
| GitHub Issues (HyperFormula) | [github.com/handsontable/hyperformula/issues](https://github.com/handsontable/hyperformula/issues) | Bug reports |
| Commercial support | [support@handsontable.com](mailto:support@handsontable.com) | For paid license holders |
| Sales | [sales@handsontable.com](mailto:sales@handsontable.com) | Licensing, enterprise, pricing |
| Contact form | [handsontable.com/contact](https://handsontable.com/contact) | General inquiries |

## Quick Start (Handsontable, vanilla JS)
import Handsontable from 'handsontable';

new Handsontable(document.getElementById('grid'), {
data: \[\['Alice', 100\], \['Bob', 200\], \['Total', '=SUM(B1:B2)'\]\],
colHeaders: \['Name', 'Amount'\],
rowHeaders: true,
licenseKey: 'non-commercial-and-evaluation',
});
## Quick Start (HyperFormula, headless)
import { HyperFormula } from 'hyperformula';

const hf = HyperFormula.buildFromArray(
  \[\['10', '20', '=SUM(A1:B1)'\]\],
  { licenseKey: 'gpl-v3' }
);
console.log(hf.getCellValue({ sheet: 0, col: 2, row: 0 })); // 30
## Version History (Recent Majors)

| Product | Version | Date | Highlights |
| ---| ---| ---| --- |
| Handsontable | 17.0.0 | Mar 2026 | Removed legacy CSS/wrappers, deprecated bundled HyperFormula/numbro/pikaday/moment |
| Handsontable | 16.2.0 | Nov 2025 | Focus scopes, EmptyDataState, dotted borders, new theme variables |
| Handsontable | 16.1.0 | Sep 2025 | Row pagination, LTS policy, loading plugin, key/value dropdowns |
| Handsontable | 16.0.0 | Aug 2025 | New Angular wrapper, textEllipsis, second-click deselect |
| Handsontable | 15.0.0 | Feb 2025 | CSS themes system, functional React wrapper, merged cell virtualization |
| HyperFormula | 3.2.0 | Feb 2026 | Latest stable release |
| HyperFormula | 3.1.1 | Dec 2025 | Bug fixes, JSDoc improvements |
| HyperFormula | 3.0.0 | 2024 | Breaking: i18n import paths, precisionRounding default 14→10, moduleResolution changes |

## Optional
*   [Handsontable pricing](https://handsontable.com/pricing): Commercial license plans and comparison
*   [Handsontable blog](https://handsontable.com/blog/): Articles, tutorials, release notes
*   [Successful customers](https://handsontable.com/customers): Case studies and use cases
*   [Contributing guide (Handsontable)](https://github.com/handsontable/handsontable/blob/develop/CONTRIBUTING.md): How to contribute
*   [Contributing guide (HyperFormula)](https://github.com/handsontable/hyperformula/blob/master/CONTRIBUTING.md): How to contribute