Handsontable

Handsontable DataGrid is a JavaScript component with a spreadsheet-like look and feel.

Use it with JavaScript, TypeScript, or frameworks such as React, Angular, and Vue. 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.

Website — Documentation — Themes — API — Community

#✨ Key Features

  ✅ Built-in themes
  ✅ Flexible API
  ✅ Virtualization
  ✅ IME support
  ✅ Internationalization
  ✅ RTL support
  ✅ Accessibility (targets WCAG 2.2 AA)
  ✅ Keyboard shortcuts
  ✅ Sorting data
  ✅ Filtering data
  ✅ 400 built-in formulas
  ✅ Configurable selection
  ✅ Data validation
  ✅ Conditional formatting
  ✅ Merged cells
  ✅ Frozen rows and columns
  ✅ Hiding rows and columns
  ✅ Right-click context menu
  ✅ Row pagination
  ✅ Server-side data
  ✅ Notifications
  ✅ Export to Excel
  ✅ Date and time editing
  ✅ Shadow DOM / Web Components support

#🪄 Installation

Below, you'll find the installation guide for the JavaScript component. If you're using a specific framework, refer to its dedicated wrapper for installation instructions:

#Install with npm

You can also use Yarn, NuGet or load the package from CDN.

npm install handsontable

#Provide an HTML container

<!-- Set the container's ID -->
<div id="handsontable-grid"></div>

#Setup

import Handsontable from 'handsontable';

const element = document.getElementById('handsontable-grid');

new Handsontable(element, {
  data: [
    { company: 'Tagcat', country: 'United Kingdom', rating: 4.4 },
    { company: 'Zoomzone', country: 'Japan', rating: 4.5 },
    { company: 'Meeveo', country: 'United States', rating: 4.6 },
  ],
  columns: [
    { data: 'company', title: 'Company', width: 100 },
    { data: 'country', title: 'Country', width: 170, type: 'dropdown', source: ['United Kingdom', 'Japan', 'United States'] },
    { data: 'rating', title: 'Rating', width: 100, type: 'numeric' },
  ],
  rowHeaders: true,
  navigableHeaders: true,
  tabNavigation: true,
  multiColumnSorting: true,
  headerClassName: 'htLeft',
  // licenseKey: 'your-license-key', // get a key at https://handsontable.com/pricing/
});

#CDN-based setup

Show/Hide code

If your environment does not support imports, you can use the code below to quickly set up and run a data grid with basic configuration options.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Handsontable DataGrid - JavaScript Example</title>
  </head>
  <body>
    <div id="handsontable-grid"></div>
    <script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
    <script>
      const element = document.getElementById("handsontable-grid");

      new Handsontable(element, {
        data: [
          { company: "Tagcat", country: "United Kingdom", rating: 4.4 },
          { company: "Zoomzone", country: "Japan", rating: 4.5 },
          { company: "Meeveo", country: "United States", rating: 4.6 },
        ],
        columns: [
          { data: "company", title: "Company", width: 100 },
          { data: "country", title: "Country", width: 170, type: "dropdown", source: ["United Kingdom", "Japan", "United States"] },
          { data: "rating", title: "Rating", width: 100, type: "numeric" },
        ],
        rowHeaders: true,
        navigableHeaders: true,
        tabNavigation: true,
        multiColumnSorting: true,
        headerClassName: "htLeft",
        // licenseKey: "your-license-key", // get a key at https://handsontable.com/pricing/
      });
    </script>
  </body>
</html>

#🎨 Themes

Handsontable themes control how your data grid looks: colors, spacing, typography, borders, and overall visual style.

You get three built-in themes out of the box:

main – modern, clean, default choice
horizon – lighter, spacious feel
classic – traditional spreadsheet look

Each theme supports:

️Light mode
Dark mode

#🏗️ Custom Themes

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:

#🚀 Resources

#🤔 Is Handsontable DataGrid a data grid or a spreadsheet?

Handsontable DataGrid 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:

Keyboard shortcuts compliant with either Google Sheets or Excel
400 spreadsheet formulas via native integration with HyperFormula
Keyboard navigation across headers that can be disabled, making only cells navigable
TAB navigation across cells that can be disabled
Built-in undo-redo functionality
Powerful clipboard capabilities for copy-paste operations
Ability to scroll the grid within the container (div) or window
Data binding in the form of an array of objects or arrays of arrays
Built-in cell editors like a date picker or dropdown list

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.

#🤖 AI & agent resources

Handsontable DataGrid and HyperFormula ship first-party resources for AI assistants and coding agents:

Agent Skills - official skills for Claude Code, Codex, and other coding agents, covering both products. Install in Claude Code with /plugin marketplace add handsontable/handsontable-skills. → github.com/handsontable/handsontable-skills · Skills for Claude Code guide
AI Docs Assistant - ask questions in English (or any other language) and get cited answers from the live docs, right in the documentation header.
Docs MCP server - semantic search over the full Handsontable + HyperFormula knowledge base: docs guides, API reference, code recipes, release notes, blog posts, and GitHub issues, always current with the latest release. claude mcp add --transport http handsontable-docs https://docs-assistant.handsontable.com/mcp
Docs written for agents - every docs page has a Markdown twin; start at handsontable.com/docs/llms.txt.
Already using Context7? Handsontable and HyperFormula are indexed there too.

#🛟 Support

We're here to help!

If you're using Handsontable with a free, non-commercial license, you can:

Get quick help from our Ask AI assistant available in the documentation.
Report any bugs you find on our GitHub Issue Board.
Connect with other developers and find answers on our Developer Forum.

If you have a commercial license, feel free to contact us directly at support@handsontable.com or use our contact form.

#📖 Licenses

Handsontable DataGrid 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:

#① Free license for non-commercial use, and evaluation purposes

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.

#② Commercial license

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.

#🔑 License Key

Pass your license key in the licenseKey option. The examples above leave that line commented out: uncomment it and add your key.

To evaluate Handsontable, get a trial key. A standard trial key lasts 45 days. During the trial, the grid shows the Handsontable badge and a "Powered by Handsontable DataGrid" bar below the table, and the console warns how many days remain. After the trial expires, the grid shows an expiration message and the console reports an error. When the grace period stored in the key also passes, a blocking screen replaces the grid. See Trial keys for details.

For non-commercial use, apply for a sponsored license.

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.

#🙌 Contributing

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 👋

Instalar en iPhone/iPad

Handsontable DataGrid is a JavaScript component with a spreadsheet-like look and feel.

#✨ Key Features

#🪄 Installation

#Install with npm

#Provide an HTML container

#Setup

#CDN-based setup

#🎨 Themes

#🏗️ Custom Themes

#To stay aligned with design, you can rely on the:

#🚀 Resources

#🤔 Is Handsontable DataGrid a data grid or a spreadsheet?

#Spreadsheet-like features in Handsontable:

#🤖 AI & agent resources

#🛟 Support

#📖 Licenses

#① Free license for non-commercial use, and evaluation purposes

#② Commercial license

#🔑 License Key

#🙌 Contributing

AFFiNE

Laravel 11 Crud

Public Apis

React

Handsontable DataGrid is a JavaScript component with a spreadsheet-like look and feel.

#✨ Key Features

#🪄 Installation

#Install with npm

#Provide an HTML container

#Setup

#CDN-based setup

#🎨 Themes

#🏗️ Custom Themes

#To stay aligned with design, you can rely on the:

#🚀 Resources

#🤔 Is Handsontable DataGrid a data grid or a spreadsheet?

#Spreadsheet-like features in Handsontable:

#🤖 AI & agent resources

#🛟 Support

#📖 Licenses

#① Free license for non-commercial use, and evaluation purposes

#② Commercial license

#🔑 License Key

#🙌 Contributing

Relacionados

AFFiNE

Laravel 11 Crud

Public Apis

React