# Handsontable

> Handsontable is a JavaScript data grid component with spreadsheet-like UX, available for React, Angular, Vue, and vanilla JavaScript. It ships editing, sorting, filtering, validation, and Excel-compatible formulas (via HyperFormula) as one embeddable component.

Handsontable is developed by Handsoncode. The documentation below covers the JavaScript data grid and its framework wrappers. Guides exist in a JavaScript, React, Angular, and Vue variant at the same slug; to switch, swap the framework segment of a URL. Framework-specific guides are listed under their own framework prefix.

## Site

- [Landing page](https://handsontable.com/): Product overview and pricing
- [Documentation home](https://handsontable.com/docs/): Guides, API reference, and examples
- [Sitemap](https://handsontable.com/docs/sitemap-index.xml): XML sitemap of all docs URLs
- [robots.txt](https://handsontable.com/robots.txt): Crawl policy

## Documentation for agents

- [Full guides corpus (Markdown)](https://handsontable.com/docs/llms-full.txt): Every guide page concatenated into one plain-text file
- [Docs pages as Markdown](https://handsontable.com/docs/_md/javascript-data-grid/installation.md): Every docs page, guides and API alike, has a Markdown twin at /docs/_md/{framework}/{slug}.md
- [Skills for Claude Code](https://handsontable.com/docs/javascript-data-grid/skills-for-claude-code/): Versioned skills for Handsontable and HyperFormula (repo: https://github.com/handsontable/handsontable-skills)
- [Docs MCP server](https://handsontable.com/docs/javascript-data-grid/docs-mcp-server/): First-party MCP server (streamable HTTP) with semantic search over Handsontable and HyperFormula docs guides, API reference, code recipes, release notes, blog posts, and GitHub issues, always current with the latest release (endpoint: https://docs-assistant.handsontable.com/mcp)
- [Context7](https://context7.com/handsontable/handsontable): Third-party MCP route serving these docs to any agent

## API reference

- [API introduction](https://handsontable.com/docs/javascript-data-grid/api/): Entry point to the API reference
- [Configuration options](https://handsontable.com/docs/javascript-data-grid/api/options/): Every grid option
- [Core methods](https://handsontable.com/docs/javascript-data-grid/api/core/): Instance methods
- [Hooks](https://handsontable.com/docs/javascript-data-grid/api/hooks/): Lifecycle and event hooks

## Getting started

- [Introduction](https://handsontable.com/docs/javascript-data-grid/): An overview of Handsontable's developer documentation. Handsontable is a client-side, spreadsheet-like data grid for editing data in web applications.
- [Demo](https://handsontable.com/docs/javascript-data-grid/demo/): Play around with a demo of Handsontable, in your favorite framework.
- [Installation](https://handsontable.com/docs/javascript-data-grid/installation/): Install Handsontable through your preferred package manager, or import Handsontable's assets directly from a CDN.
- [Configuration options](https://handsontable.com/docs/javascript-data-grid/configuration-options/): Configure the data grid down to each column, row, and cell, using various built-in options that control Handsontable's behavior and user interface.
- [Grid size](https://handsontable.com/docs/javascript-data-grid/grid-size/): Set the width and height of the grid, using either absolute values or values relative to the parent container.
- [Custom ID, class, and style](https://handsontable.com/docs/javascript-data-grid/custom-id-class-style/): Apply a custom ID, class, and inline style to the Handsontable container, to target the grid with your own CSS or JavaScript selectors.
- [License key](https://handsontable.com/docs/javascript-data-grid/license-key/): Activate Handsontable, passing your license key in the configuration object. Use a special key for non-commercial and evaluation purposes.
- [Instance methods](https://handsontable.com/docs/react-data-grid/instance-methods/): Reference a Handsontable instance from within a React component, to programmatically perform actions such as selecting cells.
- [Integration with Redux](https://handsontable.com/docs/react-data-grid/redux/): Maintain the data and configuration options of your grid by using the Redux state container.
- [Instance access](https://handsontable.com/docs/angular-data-grid/instance-access/): Reference a Handsontable instance from within a Angular component, to programmatically perform actions.
- [Instance reference](https://handsontable.com/docs/vue-data-grid/vue-instance-reference/): Reference a Handsontable instance from within a Vue 3 component, to programmatically perform actions such as selecting cells.
- [HotColumn component](https://handsontable.com/docs/vue-data-grid/vue-hot-column/): Configure the Vue 3 data grid's columns, using the props of the "HotColumn" component. Define a custom cell editor or a custom cell renderer.
- [Vuex state management](https://handsontable.com/docs/vue-data-grid/vue-vuex/): Use the Vuex state management pattern to maintain the data and configuration options of your Vue 3 data grid.
- [Pinia state management](https://handsontable.com/docs/vue-data-grid/vue-pinia/): Use the Pinia store to maintain the data and configuration options of your Vue 3 data grid.
- [Use Handsontable in Nuxt](https://handsontable.com/docs/vue-data-grid/vue-nuxt/): Set up Handsontable in a Nuxt 3 application using the ClientOnly component or the .client.vue suffix to avoid SSR errors.

## AI Tools

- [Skills for Claude Code](https://handsontable.com/docs/javascript-data-grid/skills-for-claude-code/): Reusable instructions that teach the Claude coding agent how to work with Handsontable, covering plugin development, cell editors, tests, and documentation examples.
- [AI Theme Builder](https://handsontable.com/docs/javascript-data-grid/ai-theme-builder/): An AI-assisted tool that turns a written description into a complete Handsontable theme, generating the CSS variables that drive the grid's appearance.
- [AI Docs Assistant](https://handsontable.com/docs/javascript-data-grid/ai-docs-assistant/): The Ask AI assistant in the docs header that answers questions about Handsontable APIs, configuration options, hooks, and integration patterns.
- [Docs MCP Server](https://handsontable.com/docs/javascript-data-grid/docs-mcp-server/): A public MCP server that gives any AI agent semantic search over the Handsontable and HyperFormula docs, API reference, release notes, GitHub issues, and more.

## Styling

- [Themes](https://handsontable.com/docs/javascript-data-grid/themes/): Apply themes using the Theme API or CSS files. Built-in themes include main, horizon, and classic with automatic light and dark modes.
- [Design system](https://handsontable.com/docs/javascript-data-grid/handsontable-design-system/): Design, prototype, and customize spreadsheet-like components with the Design System for Figma.
- [Theme customization](https://handsontable.com/docs/javascript-data-grid/theme-customization/): Customize Handsontable's appearance using the Theme API, Figma Theme Generator, CSS variables, or the visual Theme Builder.
- [Legacy style](https://handsontable.com/docs/javascript-data-grid/legacy-style/): The legacy stylesheet was removed in Handsontable 17.0.0. Learn how to migrate to the Classic theme using the Theme API or CSS imports.

## Columns

- [Column headers](https://handsontable.com/docs/javascript-data-grid/column-header/): Use default column headers (A, B, C), or set them to custom values provided by an array or a function.
- [Column groups](https://handsontable.com/docs/javascript-data-grid/column-groups/): Group your columns, using multiple levels of nested column headers, to better reflect the structure of your data.
- [Column hiding](https://handsontable.com/docs/javascript-data-grid/column-hiding/): Hide individual columns to avoid rendering them as DOM elements. It helps you reduce screen clutter and improve the grid's performance.
- [Adding and removing columns](https://handsontable.com/docs/javascript-data-grid/column-adding/): Insert and remove columns programmatically with the alter() method, through the context menu, or automatically with spare columns.
- [Column moving](https://handsontable.com/docs/javascript-data-grid/column-moving/): Change the order of columns, either manually (dragging them to another location), or programmatically (using Handsontable's API methods).
- [Column freezing](https://handsontable.com/docs/javascript-data-grid/column-freezing/): Lock (freeze) the position of specified columns, keeping them visible while scrolling to another area of the grid.
- [Column widths](https://handsontable.com/docs/javascript-data-grid/column-width/): Configure column widths, using an array or a function. Let your users manually change column widths using Handsontable's interface.
- [Column summary](https://handsontable.com/docs/javascript-data-grid/column-summary/): Calculate sum, min, max, count, average or custom aggregates of individual columns' data, using Handsontable's aggregate functions.
- [Column virtualization](https://handsontable.com/docs/javascript-data-grid/column-virtualization/): Render hundreds of columns without freezing the browser, using column virtualization.
- [Column filter](https://handsontable.com/docs/javascript-data-grid/column-filter/): Filter your data by values or by a set of conditions.
- [Column component](https://handsontable.com/docs/react-data-grid/hot-column/): Configure the React data grid's columns, using the props of the "HotColumn" component. Pass your component as a custom cell editor or a custom cell renderer.

## Rows

- [Row headers](https://handsontable.com/docs/javascript-data-grid/row-header/): Use default row headers (1, 2, 3), or set them to custom values provided by an array or a function.
- [Row parent-child](https://handsontable.com/docs/javascript-data-grid/row-parent-child/): Reflect the parent-child relationship of your data, using Handsontable's interactive UI elements such as expand and collapse buttons or an extended context menu.
- [Row hiding](https://handsontable.com/docs/javascript-data-grid/row-hiding/): Hide individual rows to avoid rendering them as DOM elements. It helps you reduce screen clutter and improve the grid's performance.
- [Row moving](https://handsontable.com/docs/javascript-data-grid/row-moving/): Change the order of rows, either manually (dragging them to another location), or programmatically (using Handsontable's API methods).
- [Row freezing](https://handsontable.com/docs/javascript-data-grid/row-freezing/): Lock (freeze) the position of specified rows, keeping them visible while scrolling to another area of the grid. This feature is sometimes called "pinned rows".
- [Row heights](https://handsontable.com/docs/javascript-data-grid/row-height/): Configure row heights, using a number, an array or a function. Let your users manually change row heights using Handsontable's interface.
- [Row virtualization](https://handsontable.com/docs/javascript-data-grid/row-virtualization/): Render thousands of rows without freezing the browser, using row virtualization.
- [Rows sorting](https://handsontable.com/docs/javascript-data-grid/rows-sorting/): Sort rows alphabetically or numerically, in ascending, descending or a custom order, by one or multiple columns.
- [Rows pagination](https://handsontable.com/docs/javascript-data-grid/rows-pagination/): The pagination component splits the data into a range of pages, allowing users to easily navigate through large data sets.
- [Row trimming](https://handsontable.com/docs/javascript-data-grid/row-trimming/): Hide individual rows from your interface and exclude them from the rendering process and DataMap. This feature is similar, but not the same, as "hiding rows".
- [Row pre-populating](https://handsontable.com/docs/javascript-data-grid/row-prepopulating/): Pre-populate spare rows with default values using minSpareRows, custom placeholder renderers, or auto-filling template values.

## Cell features

- [Selection](https://handsontable.com/docs/javascript-data-grid/selection/): Select a single cell, a range of adjacent cells, or multiple non-adjacent ranges of cells.
- [Move cells](https://handsontable.com/docs/javascript-data-grid/move-cells/): Move or copy a selected range of cells by dragging its border. Formula references adjust automatically when the Formulas plugin is active.
- [Merge cells](https://handsontable.com/docs/javascript-data-grid/merge-cells/): Merge adjacent cells, using the "Ctrl + M" shortcut or the context menu. Control merged cells, using Handsontable's API.
- [Conditional formatting](https://handsontable.com/docs/javascript-data-grid/conditional-formatting/): Style cells dynamically based on their values, using CSS classes, custom renderers, or a color scale.
- [Text alignment](https://handsontable.com/docs/javascript-data-grid/text-alignment/): Align values within cells: horizontally (to the right, left, center, or by justifying them), and vertically (to the top, middle, or bottom of the cell).
- [Read-only cells](https://handsontable.com/docs/javascript-data-grid/read-only-cells/): Make specified cells read-only to protect them from unwanted changes but still allow navigation and copying of data.
- [Comments](https://handsontable.com/docs/javascript-data-grid/comments/): Add a comment (a note) to a cell, using the context menu, just like in Excel. Edit and delete comments. Make comments read-only.
- [Autofill values](https://handsontable.com/docs/javascript-data-grid/autofill-values/): Copy a cell's value into multiple other cells, using the "fill handle" UI element. Configure the direction of copying, and more, through Handsontable's API.
- [Formatting cells](https://handsontable.com/docs/javascript-data-grid/formatting-cells/): Change the appearance of cells, using custom CSS classes, inline styles, or custom cell borders.

## Cell functions

- [Cell functions](https://handsontable.com/docs/javascript-data-grid/cell-function/): Render, edit, and validate the contents of your cells, using Handsontable's cell functions. Quickly set up your cells, using cell types.
- [Cell renderer](https://handsontable.com/docs/javascript-data-grid/cell-renderer/): Create a custom cell renderer function, to have full control over how a cell looks.
- [Cell editor](https://handsontable.com/docs/javascript-data-grid/cell-editor/): Create a custom cell editor function, to have full control over how editing works in the cells of your data grid.
- [Cell validator](https://handsontable.com/docs/javascript-data-grid/cell-validator/): Validate data added or changed by the user, with predefined or custom rules. Validation helps you make sure that the data matches the expected format.
- [Custom cells](https://handsontable.com/docs/javascript-data-grid/custom-cells/): Validate data added or changed by the user, with predefined or custom rules. Validation helps you make sure that the data matches the expected format.

## Cell types

- [Cell type](https://handsontable.com/docs/javascript-data-grid/cell-type/): Use Handsontable's built-in cell types such as autocomplete, date, time, and more, for consistent UI across cell renderer, editor, and validator.
- [Text cell type](https://handsontable.com/docs/javascript-data-grid/text-cell-type/): Use the text cell type, the default cell type in Handsontable, to display and edit plain text values.
- [Numeric cell type](https://handsontable.com/docs/javascript-data-grid/numeric-cell-type/): Display, format, sort, and filter numbers correctly by using the numeric cell type.
- [Date cell type](https://handsontable.com/docs/javascript-data-grid/date-cell-type/): Display, format, sort, and filter dates correctly by using the date cell type.
- [Time cell type](https://handsontable.com/docs/javascript-data-grid/time-cell-type/): Display, format, sort, and filter time values correctly by using the time cell type.
- [Date-time cell type](https://handsontable.com/docs/javascript-data-grid/datetime-cell-type/): Display, format, sort, and filter combined date and time values by using the datetime cell type.
- [Checkbox cell type](https://handsontable.com/docs/javascript-data-grid/checkbox-cell-type/): Create interactive elements that can be checked or unchecked, by using the checkbox cell type.
- [Select cell type](https://handsontable.com/docs/javascript-data-grid/select-cell-type/): Use the select cell type to collect user input with an HTML <select> element that creates a multi-item dropdown list.
- [Dropdown cell type](https://handsontable.com/docs/javascript-data-grid/dropdown-cell-type/): Collect user input with a searchable list of choices, by using the dropdown cell type.
- [Autocomplete cell type](https://handsontable.com/docs/javascript-data-grid/autocomplete-cell-type/): Collect user input with a list of choices, by using the autocomplete cell type.
- [MultiSelect cell type](https://handsontable.com/docs/javascript-data-grid/multiselect-cell-type/): Collect user input with a list of multiple-selection entries, by using the MultiSelect cell type.
- [Password cell type](https://handsontable.com/docs/javascript-data-grid/password-cell-type/): Use the password cell type to mask confidential values by rendering entered characters as symbols.
- [Handsontable cell type](https://handsontable.com/docs/javascript-data-grid/handsontable-cell-type/): Add a spreadsheet editor in a popup, by using the Handsontable cell type.

## Formulas

- [Installation](https://handsontable.com/docs/javascript-data-grid/formulas-installation/): Install HyperFormula as a separate dependency, license it, and import it to power the Formulas plugin in Handsontable 18.0 and later.
- [Formula calculation](https://handsontable.com/docs/javascript-data-grid/formula-calculation/): Perform calculations on cells' values, using a powerful calculation engine that handles nearly 400 functions, custom functions, named expressions, and more.

## Server-side data

- [Server-side data](https://handsontable.com/docs/javascript-data-grid/server-side-data/): Load paged data with Handsontable DataProvider -- fetchRows, CRUD callbacks, migration from client-side arrays, pagination, sorting, filters, REST and GraphQL examples, and a JavaScript monorepo project with two Node servers.
- [Migrate to server-side data](https://handsontable.com/docs/javascript-data-grid/server-side-data-migration/): Move from a full in-memory data array and afterChange saves to Handsontable dataProvider -- stable row ids, fetchRows, CRUD callbacks, pagination, and filters.
- [Server-side configuration](https://handsontable.com/docs/javascript-data-grid/server-side-data-configuration/): Handsontable dataProvider configuration -- required keys, pagination and pageSize, query parameters for fetchRows, column sorting, and server-side filters.
- [Server-side CRUD](https://handsontable.com/docs/javascript-data-grid/server-side-data-crud/): Handsontable dataProvider create, update, and remove -- onRowsCreate, onRowsUpdate, onRowsRemove, mutation hooks, optimistic UI, validators, and programmatic CRUD.
- [Server-side fetching and examples](https://handsontable.com/docs/javascript-data-grid/server-side-data-fetching/): Handsontable DataProvider fetch hooks, loading UI with emptyDataState, plugin methods fetchData and getQueryParameters, REST and GraphQL sample servers, and CodeSandbox projects.

## Data management

- [Binding to data](https://handsontable.com/docs/javascript-data-grid/binding-to-data/): Use Handsontable's configuration options or API methods to fill your data grid with various data structures, including an array of arrays or an array of objects.
- [Saving data](https://handsontable.com/docs/javascript-data-grid/saving-data/): Saving data after each change to the data set, using Handsontable's API hooks. Preserve the table's state by saving data to the local storage.
- [Events and hooks](https://handsontable.com/docs/javascript-data-grid/events-and-hooks/): Run your code before or after specific data grid actions, using Handsontable's API hooks (callbacks). For example, control what happens with the user's input.
- [Understanding data and indexes](https://handsontable.com/docs/javascript-data-grid/understanding-data-and-indexes/): Learn how Handsontable separates your source data from the visual dataset, and how physical and visual indexes address each one.
- [Export to Excel](https://handsontable.com/docs/javascript-data-grid/export-to-excel/): Export your grid data to an Excel (.xlsx) file, preserving cell types, styling, formulas, merged cells, and more. Requires ExcelJS as a peer dependency.
- [Export to CSV](https://handsontable.com/docs/javascript-data-grid/export-to-csv/): Export your grid's raw data to the CSV format, as a downloadable file, a blob, or a string. Customize your export using Handsontable's configuration options.
- [Clipboard](https://handsontable.com/docs/javascript-data-grid/basic-clipboard/): Copy data from selected cells to the clipboard, using the "Ctrl/Cmd + C" shortcut or the context menu. Control the clipboard with Handsontable's API.
- [Handling collaboration and simultaneous editing](https://handsontable.com/docs/javascript-data-grid/collaboration/): Coordinate edits between multiple users by detecting active edit state, intercepting local changes, and syncing structural and non-data changes across clients.

## Accessories and menus

- [Context menu](https://handsontable.com/docs/javascript-data-grid/context-menu/): Quickly access contextual actions such as removing rows, inserting columns or copying data, by opening the context menu.
- [Column menu](https://handsontable.com/docs/javascript-data-grid/column-menu/): Display a configurable dropdown menu, triggered by clicking on a button in a column header.
- [Drag to scroll](https://handsontable.com/docs/javascript-data-grid/drag-to-scroll/): Scroll the grid automatically by dragging selections or their interaction handles outside the visible viewport.
- [Undo and redo](https://handsontable.com/docs/javascript-data-grid/undo-redo/): Revert and restore your changes, using the undo and redo features.
- [Icon pack](https://handsontable.com/docs/javascript-data-grid/icon-pack/): Create toolbars, menu bars, and context menus with a set of icons designed specifically for tables, spreadsheets, and data-rich components.
- [How to use icons in cells](https://handsontable.com/docs/javascript-data-grid/use-icons-in-cells/): Render an icon from the Handsontable icon pack inside a custom cell renderer, and make an icon-only control accessible.
- [Empty data state](https://handsontable.com/docs/javascript-data-grid/empty-data-state/): Display empty data state overlays and provide user feedback when your data grid has no data to display using the Empty Data State plugin.
- [Dialog](https://handsontable.com/docs/javascript-data-grid/dialog/): Display modal dialogs, alerts, loading indicators, and notifications to enhance user interaction and provide feedback in your data grid application.
- [Loading](https://handsontable.com/docs/javascript-data-grid/loading/): Display loading indicators and progress feedback in your data grid application using the Loading plugin.
- [Notification](https://handsontable.com/docs/javascript-data-grid/notification/): Show non-blocking toast notifications anchored to the grid with the Notification plugin.
- [Layout slots](https://handsontable.com/docs/javascript-data-grid/layout-slots/): Place custom UI in the wrapper slots around the grid and control the order of elements within each slot.

## Internationalization

- [Language](https://handsontable.com/docs/javascript-data-grid/language/): Set Handsontable's UI language to one of the built-in translations, or create your own language set using our templates.
- [Locale](https://handsontable.com/docs/javascript-data-grid/locale/): Configure Handsontable's locale settings, to properly handle locale-related data and actions such as filtering, searching, or sorting.
- [Layout direction](https://handsontable.com/docs/javascript-data-grid/layout-direction/): Set the layout direction for right-to-left languages. Automatically inherit your HTML file's "dir" property, or set the layout direction manually.
- [IME support](https://handsontable.com/docs/javascript-data-grid/ime-support/): Convert keystrokes to characters not available on the keyboard, using the Input Method Editor. This feature is always enabled and available for cell editors.

## Accessibility and navigation

- [Keyboard shortcuts](https://handsontable.com/docs/javascript-data-grid/keyboard-shortcuts/): Access all Handsontable features using just your keyboard. Use shortcuts you know from Google Sheets or Microsoft Excel.
- [Custom shortcuts](https://handsontable.com/docs/javascript-data-grid/custom-shortcuts/): Customize Handsontable's keyboard shortcuts.
- [Focus scopes](https://handsontable.com/docs/javascript-data-grid/focus-scopes/): Manage focus boundaries and keyboard shortcuts contexts with focus scopes.
- [Searching values](https://handsontable.com/docs/javascript-data-grid/searching-values/): Search data across Handsontable, using built-in API methods and implementing your own search UI.
- [Accessibility](https://handsontable.com/docs/javascript-data-grid/accessibility/): Learn about Handsontable's accessibility features.
- [Accessibility conformance report (VPAT)](https://handsontable.com/docs/javascript-data-grid/accessibility-conformance-report/): Review Handsontable's Voluntary Product Accessibility Template (VPAT) report, covering WCAG 2.2 Level A and AA conformance.

## Tools and building

- [Packages](https://handsontable.com/docs/javascript-data-grid/packages/): Instantly add Handsontable to your web app, using pre-built UMD packages of JavaScript and CSS.
- [Modules](https://handsontable.com/docs/javascript-data-grid/modules/): Reduce the size of your JavaScript bundle, by importing only the modules that you need. The base module is mandatory, all other modules are optional.
- [TypeScript types](https://handsontable.com/docs/javascript-data-grid/typescript-types/): A complete reference of the TypeScript types and interfaces that Handsontable exports, with usage examples for settings, hook callbacks, custom renderers, and editors.
- [Custom plugins](https://handsontable.com/docs/javascript-data-grid/custom-plugins/): Extend Handsontable's functionality by writing your custom plugin. Use the BasePlugin for a quick start.
- [Custom builds](https://handsontable.com/docs/javascript-data-grid/custom-builds/): Handsontable's building process transforms the source files located in the code repository into dedicated packages.
- [Shadow DOM](https://handsontable.com/docs/javascript-data-grid/shadow-dom/): Run Handsontable inside a Shadow DOM tree, in web components, and on sandboxed platforms such as Salesforce Lightning Web Components.
- [Testing](https://handsontable.com/docs/javascript-data-grid/testing/): Run one or multiple tests, using Handsontable's ready-made commands for Jasmine and Puppeteer.

## Optimization

- [Batch operations](https://handsontable.com/docs/javascript-data-grid/batch-operations/): Batch CRUD operations, to avoid unnecessary rendering cycles and boost your grid's performance.
- [Performance](https://handsontable.com/docs/javascript-data-grid/performance/): Boost your grid's performance by setting a constant column size, suspending rendering, deciding how many rows and columns are pre-rendered, and more.
- [Bundle size](https://handsontable.com/docs/javascript-data-grid/bundle-size/): Reduce the size of your JavaScript bundle by getting rid of redundant Handsontable modules.

## Security

- [Security](https://handsontable.com/docs/javascript-data-grid/security/): Learn about the security measures we take to make sure you can safely implement Handsontable in your client-side application.

## Technical specification

- [Supported browsers](https://handsontable.com/docs/javascript-data-grid/supported-browsers/): Handsontable supports the most popular desktop and mobile browsers, such as Chrome, Safari, Firefox, Edge, Opera, Samsung Internet, and others.
- [Software license](https://handsontable.com/docs/javascript-data-grid/software-license/): Learn about the licensing terms of the Handsontable data grid.
- [Third-party licenses](https://handsontable.com/docs/javascript-data-grid/third-party-licenses/): Learn about the licensing terms of Handsontable's software dependencies.
- [Documentation license](https://handsontable.com/docs/javascript-data-grid/documentation-license/): Learn about the licensing terms of Handsontable's documentation.

## Recipes

- [Recipes](https://handsontable.com/docs/javascript-data-grid/recipes/): Developer recipes and step-by-step tutorials for building with Handsontable
- [Accessibility and UX Recipes](https://handsontable.com/docs/javascript-data-grid/recipes/accessibility/): Practical recipes for improving accessibility and keyboard usability in Handsontable grids.
- [Custom keyboard shortcuts](https://handsontable.com/docs/javascript-data-grid/recipes/accessibility/keyboard-shortcuts/): Register custom keyboard shortcuts in Handsontable using the ShortcutManager API. Add Ctrl+D to duplicate rows and Ctrl+Enter to submit grid data.
- [ARIA-friendly grid](https://handsontable.com/docs/javascript-data-grid/recipes/accessibility/aria-grid/): Configure Handsontable for screen reader compatibility using ariaTags, tabMoves, aria-label on cells, and aria-sort on headers -- targeting WCAG 2.1 AA compliance.
- [Real-time and Integration Recipes](https://handsontable.com/docs/javascript-data-grid/recipes/real-time/): Practical recipes for real-time data updates and third-party integrations with Handsontable grids.
- [Real-time cell updates via WebSocket](https://handsontable.com/docs/javascript-data-grid/recipes/real-time/websocket-updates/): Learn how to connect Handsontable to a WebSocket and update individual cells in real time using setDataAtCell, without re-rendering the entire grid.
- [Sync rows to a Chart.js chart](https://handsontable.com/docs/javascript-data-grid/recipes/real-time/chartjs-sync/): Learn how to sync selected rows from a Handsontable grid to a Chart.js bar chart in real time using the afterSelectionEnd hook.
- [Multiplayer editing with Liveblocks](https://handsontable.com/docs/javascript-data-grid/recipes/real-time/liveblocks-multiplayer/): Turn Handsontable into a multiplayer grid with Liveblocks. Sync cell values through Storage, share each user's selection through Presence, and draw live selection borders with a custom renderer.
- [Cell comments with Liveblocks](https://handsontable.com/docs/javascript-data-grid/recipes/real-time/liveblocks-comments/): Add threaded comments anchored to individual Handsontable cells with Liveblocks Comments. Attach threads to a cell through thread metadata and render comment pins with a custom cell renderer.
- [Column Management Recipes](https://handsontable.com/docs/javascript-data-grid/recipes/column-management/): Practical recipes for controlling column visibility and freezing columns at runtime in Handsontable grids.
- [Build a dynamic column visibility toggle](https://handsontable.com/docs/javascript-data-grid/recipes/column-management/column-visibility/): Build a checkbox list outside the grid that shows or hides columns on demand, while preserving each column's type, renderer, and validator.
- [Freeze and unfreeze columns at runtime](https://handsontable.com/docs/javascript-data-grid/recipes/column-management/freeze-columns/): Freeze and unfreeze columns dynamically using external buttons that call hot.updateSettings with fixedColumnsStart, and understand how frozen columns interact with manual column reordering.
- [Data Management Recipes](https://handsontable.com/docs/javascript-data-grid/recipes/data-management/): Practical recipes for loading, syncing, and managing data in Handsontable.
- [Load data from a REST API](https://handsontable.com/docs/javascript-data-grid/recipes/data-management/load-data-rest-api/): Fetch JSON data from a REST API and load it into Handsontable with loading and error states.
- [Load data from a GraphQL API](https://handsontable.com/docs/javascript-data-grid/recipes/data-management/load-data-graphql/): Learn how to fetch data from a GraphQL API and load it into Handsontable with loading and error states.
- [Sync two grids](https://handsontable.com/docs/javascript-data-grid/recipes/data-management/sync-two-grids/): Learn how to sync edits from a master grid to a detail grid in real time with afterChange, setDataAtCell(), and source guards.
- [Undo / redo with a custom UI](https://handsontable.com/docs/javascript-data-grid/recipes/data-management/undo-redo-custom-ui/): Build external Undo and Redo buttons that stay in sync with Handsontable undo/redo stack availability.
- [Auto-save changes to a backend](https://handsontable.com/docs/javascript-data-grid/recipes/data-management/auto-save-backend/): Learn how to auto-save Handsontable edits with a debounced afterChange hook, dirty row tracking, and save status feedback.
- [Server-side data with ASP.NET Core](https://handsontable.com/docs/javascript-data-grid/recipes/data-management/server-side-aspnet/): Connect Handsontable's dataProvider plugin to an ASP.NET Core Web API backend with paginated fetching, server-side sorting and filtering, and full CRUD using EF Core and SQLite.
- [Server-side data with Django](https://handsontable.com/docs/javascript-data-grid/recipes/data-management/server-side-django/): Connect Handsontable to a Django REST Framework backend with paginated fetching, server-side sorting and filtering, and full CRUD support.
- [Server-side Data with Express.js](https://handsontable.com/docs/javascript-data-grid/recipes/data-management/server-side-expressjs/): Wire Handsontable's dataProvider plugin to an Express.js 4 backend with paginated, sorted, and filtered server-side data and full CRUD operations backed by PostgreSQL via TypeORM and Zod.
- [Server-side data with Laravel](https://handsontable.com/docs/javascript-data-grid/recipes/data-management/server-side-laravel/): Connect Handsontable's dataProvider plugin to a Laravel backend -- paginated fetchRows, server-side sorting and filtering, and full CRUD with onRowsCreate, onRowsUpdate, and onRowsRemove.
- [Server-side Data with NestJS](https://handsontable.com/docs/javascript-data-grid/recipes/data-management/server-side-nestjs/): Wire Handsontable's dataProvider plugin to a NestJS 10 backend with paginated, sorted, and filtered server-side data and full CRUD operations backed by PostgreSQL via TypeORM.
- [Server-side data with Ruby on Rails](https://handsontable.com/docs/javascript-data-grid/recipes/data-management/server-side-rails/): Connect Handsontable's dataProvider plugin to a Ruby on Rails API-only backend with paginated fetching, server-side sorting and filtering, and full CRUD using the kaminari gem.
- [Server-side Data with Spring Boot](https://handsontable.com/docs/javascript-data-grid/recipes/data-management/server-side-spring/): Wire Handsontable's dataProvider plugin to a Spring Boot 3 backend with JPA-backed pagination, server-side sorting and filtering, and full CRUD operations using H2.
- [Server-side data with Symfony](https://handsontable.com/docs/javascript-data-grid/recipes/data-management/server-side-symfony/): Connect Handsontable's dataProvider plugin to a Symfony backend -- paginated fetchRows, server-side sorting and filtering, and full CRUD via REST API or GraphQL.
- [Cell Type Recipes](https://handsontable.com/docs/javascript-data-grid/recipes/cell-types/): Practical recipes for creating custom cell types in Handsontable.
- [Color picker](https://handsontable.com/docs/javascript-data-grid/recipes/cell-types/color-picker/): Learn how to create a Handsontable custom color picker cell using the Pickr library, with a button to open the picker, live preview, hex validation, and nano theme.
- [Feedback](https://handsontable.com/docs/javascript-data-grid/recipes/cell-types/feedback/): Learn how to create a custom Handsontable cell type using emoji buttons for quick feedback selection directly in your data grid.
- [Star Rating](https://handsontable.com/docs/javascript-data-grid/recipes/cell-types/rating/): Learn how to create a custom Handsontable cell type using SVG stars for intuitive 1-5 star ratings directly in your data grid.
- [Radio buttons](https://handsontable.com/docs/javascript-data-grid/recipes/cell-types/radio/): Learn how to create a custom Handsontable cell type that renders radio button options directly in cells, with keyboard navigation and roving tabindex accessibility.
- [Numbro](https://handsontable.com/docs/javascript-data-grid/recipes/cell-types/numbro/): Learn how to create a Handsontable custom numbro cell type using the Numbro library
- [Flatpickr](https://handsontable.com/docs/javascript-data-grid/recipes/cell-types/flatpickr/): Learn how to create a custom Handsontable cell type using Flatpickr for a date picker with cross-browser consistency and per-column configuration directly inside your data grid.
- [Moment.js-based date](https://handsontable.com/docs/javascript-data-grid/recipes/cell-types/moment-date/): Learn how to create a Handsontable custom date cell type using the Moment.js library
- [Moment.js-based time](https://handsontable.com/docs/javascript-data-grid/recipes/cell-types/moment-time/): Learn how to create a Handsontable custom time cell type using the Moment.js library
- [Pikaday](https://handsontable.com/docs/javascript-data-grid/recipes/cell-types/pikaday/): Learn how to create a custom Handsontable cell type using Pikaday for a date picker with per-column configuration directly inside your data grid. This guide serves as a migration path for users moving away from the built-in date cell type.
- [Context Menu Recipes](https://handsontable.com/docs/javascript-data-grid/recipes/context-menu/): Practical recipes for customizing the Handsontable context menu and adding programmatic row operations.
- [Custom context menu actions](https://handsontable.com/docs/javascript-data-grid/recipes/context-menu/custom-context-menu/): Learn how to add custom items to Handsontable's right-click context menu, including duplicate row, flag row, and copy row as JSON actions.
- [Add a column to an object-based dataset](https://handsontable.com/docs/javascript-data-grid/recipes/context-menu/add-column-object-data/): Learn how to add a column at runtime through the context menu when your grid uses an object-based dataset, where the built-in column-insert items do not apply.
- [Programmatic row operations](https://handsontable.com/docs/javascript-data-grid/recipes/context-menu/row-operations/): Learn how to add, delete, and reorder rows in Handsontable using external toolbar buttons wired to the alter() API and the ManualRowMove plugin.
- [Editing and validation recipes](https://handsontable.com/docs/javascript-data-grid/recipes/editing-validation/): Recipes for dependent editors, validation patterns, submit-time checks, and dynamic cell configuration in Handsontable.
- [Dependent dropdowns](https://handsontable.com/docs/javascript-data-grid/recipes/editing-validation/dependent-dropdowns/): Drive a child column dropdown from a parent column using a dependency map, afterChange, setCellMeta, and render.
- [Row validation with error summary](https://handsontable.com/docs/javascript-data-grid/recipes/editing-validation/row-validation-error-summary/): Validate every row on a Submit action, list failures outside the grid, highlight cells with htInvalid, and clear state when the user fixes a cell.
- [Import and Export Recipes](https://handsontable.com/docs/javascript-data-grid/recipes/import-export/): Practical recipes for moving data in and out of Handsontable.
- [Export to PDF](https://handsontable.com/docs/javascript-data-grid/recipes/import-export/export-to-pdf/): Export grid data to a downloadable PDF with jsPDF and jspdf-autotable, including headers and multi-page tables.
- [Import from CSV or Excel](https://handsontable.com/docs/javascript-data-grid/recipes/import-export/import-csv-excel/): Load CSV or XLSX files into Handsontable with PapaParse and SheetJS, preview headers, and handle errors in the browser.
- [Filtering and Search Recipes](https://handsontable.com/docs/javascript-data-grid/recipes/filtering-and-search/): Practical recipes for building external and in-grid search workflows with Handsontable.
- [External search box](https://handsontable.com/docs/javascript-data-grid/recipes/filtering-and-search/external-search-box/): Learn how to add an external search input that highlights matching cells in Handsontable as you type.
- [Highlight search matches](https://handsontable.com/docs/javascript-data-grid/recipes/filtering-and-search/highlight-search-matches/): Learn how to highlight matched text fragments with a custom renderer that safely uses mark tags and updates in real time from a search input.
- [Multi-column filter panel](https://handsontable.com/docs/javascript-data-grid/recipes/filtering-search/multi-column-filter-panel/): Build an external filter panel with a category dropdown and a price range that controls Handsontable filtering through the Filters plugin API.
- [Rendering and styling recipes](https://handsontable.com/docs/javascript-data-grid/recipes/rendering-styling/): Practical recipes for row layout, summaries, custom renderers, and visual styling in Handsontable.
- [Frozen summary row](https://handsontable.com/docs/javascript-data-grid/recipes/rendering-styling/frozen-summary-row/): Pin a read-only totals row at the bottom with fixedRowsBottom, recalculate on afterChange, and style it with the cells callback.
- [Sparkline cell renderer](https://handsontable.com/docs/javascript-data-grid/recipes/rendering-styling/sparkline-cell-renderer/): Build a custom Handsontable cell renderer that draws an inline SVG bar chart from an array of numbers in each cell.
- [Conditional row coloring](https://handsontable.com/docs/javascript-data-grid/recipes/rendering-styling/conditional-row-coloring/): Color entire rows from a status column using the cells callback, className, and scoped CSS that updates after edits.
- [Performance Recipes](https://handsontable.com/docs/javascript-data-grid/recipes/performance/): Practical recipes for optimizing Handsontable performance -- lazy loading large datasets, persisting user layout preferences, and more.
- [Lazy loading with pagination](https://handsontable.com/docs/javascript-data-grid/recipes/performance/lazy-loading/): Load data page-by-page as the user scrolls to the bottom of the grid, using the afterScrollVertically hook and hot.updateData() to append rows without resetting scroll position.
- [Persist and restore column widths and order](https://handsontable.com/docs/javascript-data-grid/recipes/performance/persist-column-layout/): Save column widths and column order to localStorage as the user resizes or reorders columns, then restore that layout on grid initialization -- so preferences survive a page refresh.
- [Platforms and Embedding Recipes](https://handsontable.com/docs/javascript-data-grid/recipes/platforms/): Practical recipes for running Handsontable inside host platforms and encapsulated components, from Salesforce Lightning Web Components to custom elements.
- [Run Handsontable in a Salesforce Lightning Web Component](https://handsontable.com/docs/javascript-data-grid/recipes/platforms/salesforce-lwc/): Run Handsontable inside a Salesforce Lightning Web Component. Load the grid from a static resource, map Salesforce field metadata to columns, and write cell edits back through Lightning Data Service.
- [Wrap Handsontable in a web component](https://handsontable.com/docs/javascript-data-grid/recipes/platforms/web-components/): Wrap Handsontable in a custom element with its own shadow root. Load the stylesheets on both sides of the boundary, expose data and settings as properties, and emit cell edits as DOM events.
- [Theme Recipes](https://handsontable.com/docs/javascript-data-grid/recipes/themes/): Practical recipes for integrating Handsontable with design systems and UI libraries.
- [Handsontable with Base Web](https://handsontable.com/docs/javascript-data-grid/recipes/themes/base-theme/): Integrate Handsontable into a React app using Base Web and style a custom theme with your design tokens so the grid matches your design system.
- [Handsontable with shadcn/ui](https://handsontable.com/docs/javascript-data-grid/recipes/themes/custom-theme/): Integrate Handsontable into a React app using shadcn/ui so the grid matches your design system colors, typography, and dark mode via the Theme API.
- [Handsontable with Ant Design](https://handsontable.com/docs/javascript-data-grid/recipes/themes/ant-design/): Integrate Handsontable into a React app that uses Ant Design, and align the grid with your design system tokens through the Theme API.
- [Handsontable with MUI](https://handsontable.com/docs/javascript-data-grid/recipes/themes/mui-theme/): Integrate Handsontable into a React app with MUI so your grid follows Material UI colors, typography, and spacing.
- [Server-side data with Supabase](https://handsontable.com/docs/react-data-grid/recipes/data-management/server-side-supabase/): Wire Handsontable's dataProvider plugin to a Supabase Postgres table with server-side pagination, sorting, filtering, and full CRUD, secured with Row Level Security.
- [Feedback](https://handsontable.com/docs/react-data-grid/recipes/cell-types/feedback-react/): Learn how to create a custom feedback cell type in React using EditorComponent -- emoji buttons (e.g. thumbs up/down/neutral) for quick selection, keyboard navigation, and per-column config.
- [Colorful Picker](https://handsontable.com/docs/react-data-grid/recipes/cell-types/colorful-picker/): Learn how to create a custom Handsontable cell type using a color picker for selecting hex colors directly in your data grid.
- [Star Rating](https://handsontable.com/docs/react-data-grid/recipes/cell-types/react-rating/): Learn how to create a custom Handsontable cell type using a star rating component for selecting numeric ratings directly in your data grid.
- [Handsontable with Fluent UI](https://handsontable.com/docs/react-data-grid/recipes/themes/fluent-ui/): Integrate Handsontable into a React app with Fluent UI so your grid follows Fluent colors, typography, and spacing.
- [Date picker](https://handsontable.com/docs/angular-data-grid/recipes/cell-types/datepicker/): Learn how to create a custom Handsontable cell type using Flatpickr for a powerful, customizable date picker experience directly inside your data grid.

## Policy

- [Versioning policy](https://handsontable.com/docs/javascript-data-grid/versioning-policy/): Handsontable follows the principles of Semantic Versioning (SemVer). Each version is numbered in the X.Y.Z (Major.Minor.Patch) format.
- [Deprecation policy](https://handsontable.com/docs/javascript-data-grid/deprecation-policy/): Handsontable ensures that if API is marked deprecated, we commit to a grace period (at least 3 months) during which the deprecated feature still works.
- [Long-term support (LTS)](https://handsontable.com/docs/javascript-data-grid/long-term-support/): LTS (Long-Term Support) versions are Handsontable releases that are maintained for an extended period.

## Migration guides

- [Migrating from 18.0 to 18.1](https://handsontable.com/docs/javascript-data-grid/migration-from-18.0-to-18.1/): Migrate from Handsontable 18.0 to Handsontable 18.1 -- set a license key in every environment, update code that reacts to a column-header click, and adjust a custom sanitizer.
- [Migrating from 17.1 to 18.0](https://handsontable.com/docs/javascript-data-grid/migration-from-17.1-to-18.0/): Migrate from Handsontable 17.1 to Handsontable 18.0 -- remove Moment.js, Pikaday, Numbro.js, and DOMPurify dependencies, and update TypeScript imports.
- [Migrating from 16.2 to 17.0](https://handsontable.com/docs/javascript-data-grid/migration-from-16.2-to-17.0/): Migrate from Handsontable 16.2 to Handsontable 17.0, released on released on March 09, 2025.
- [Migrating from 16.0 to 16.1](https://handsontable.com/docs/javascript-data-grid/migration-from-16.0-to-16.1/): Migrate from Handsontable 16.0 to Handsontable 16.1, released on September 15, 2025.
- [Migrating from 15.3 to 16.0](https://handsontable.com/docs/javascript-data-grid/migration-from-15.3-to-16.0/): Migrate from Handsontable 15.3 to Handsontable 16.0, released on July 9, 2025.
- [Migrating from 14.6 to 15.0](https://handsontable.com/docs/javascript-data-grid/migration-from-14.6-to-15.0/): Migrate from Handsontable 14.6 to Handsontable 15.0, released on December 16th, 2024.
- [Migrating from 13.1 to 14.0](https://handsontable.com/docs/javascript-data-grid/migration-from-13.1-to-14.0/): Migrate from Handsontable 13.1 to Handsontable 14.0, released on November 30th, 2023.
- [Migrating from 12.4 to 13.0](https://handsontable.com/docs/javascript-data-grid/migration-from-12.4-to-13.0/): Migrate from Handsontable 12.4 to Handsontable 13.0, released on June 22, 2023.
- [Migrating from 11.1 to 12.0](https://handsontable.com/docs/javascript-data-grid/migration-from-11.1-to-12.0/): Migrate from Handsontable 11.1 to Handsontable 12.0, released on April 28, 2022.
- [Migrating from 10.0 to 11.0](https://handsontable.com/docs/javascript-data-grid/migration-from-10.0-to-11.0/): Migrate from Handsontable 10.0 to Handsontable 11.0, released on November 17, 2021.
- [Migrating from 9.0 to 10.0](https://handsontable.com/docs/javascript-data-grid/migration-from-9.0-to-10.0/): Migrate from Handsontable 9.0 to Handsontable 10.0, released on September 29, 2021.
- [Migrating from 8.4 to 9.0](https://handsontable.com/docs/javascript-data-grid/migration-from-8.4-to-9.0/): Migrate from Handsontable 8.4 to Handsontable 9.0, released on June 1, 2021.
- [Migrate from 7.4 to 8.0](https://handsontable.com/docs/javascript-data-grid/migration-from-7.4-to-8.0/): Migrate from Handsontable 7.4 to Handsontable 8.0, released on August 5, 2020.

## Source

- [GitHub repository](https://github.com/handsontable/handsontable): Source code, issues, releases
- [npm package](https://www.npmjs.com/package/handsontable): Published package

## Licensing

- [License key guide](https://handsontable.com/docs/javascript-data-grid/license-key/): How to apply a commercial or non-commercial key
- [Pricing](https://handsontable.com/pricing): Commercial plans
- [Contact sales](https://handsontable.com/get-a-quote): Get a quote for commercial use

---

Microsoft and Excel are registered trademarks of Microsoft Corporation. Google Sheets is a trademark of Google LLC.