<div align="center"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://github.com/handsontable/handsontable/blob/develop/resources/handsontable-logo-white.svg?raw=true"/> <source media="(prefers-color-scheme: light)" srcset="https://github.com/handsontable/handsontable/blob/develop/resources/handsontable-logo-black.svg?raw=true"/> <img width="360" alt="Logo of Handsontable data grid" src="https://github.com/handsontable/handsontable/blob/develop/resources/handsontable-logo-black.svg?raw=true"/> </picture> <h3>Handsontable is a <a href="https://handsontable.com/docs" target="_blank">JavaScript Data Grid</a> with a spreadsheet-like look and feel.</h3> Use it with JavaScript, TypeScript, or frameworks such as <a href="https://github.com/handsontable/handsontable/tree/master/wrappers/react-wrapper" target="_blank">React</a>, <a href="https://github.com/handsontable/handsontable/tree/master/wrappers/angular-wrapper" target="_blank">Angular</a>, and <a href="https://github.com/handsontable/handsontable/tree/master/wrappers/vue3" target="_blank">Vue</a>. 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.

<a href="https://handsontable.com">Website</a> — <a href="https://handsontable.com/docs">Documentation</a> — <a href="https://handsontable.com/docs/themes">Themes</a> — <a href="https://handsontable.com/docs/api">API</a> — <a href="https://github.com/handsontable/handsontable/discussions">Community</a>

✨ Key Features

✅ Built-in themes ✅ Flexible API ✅ Virtualization ✅ IME support ✅ Internationalization ✅ RTL support ✅ Accessibility ✅ 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

🪄 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:

<img src="https://raw.githubusercontent.com/handsontable/handsontable/develop/resources/icons/react-icon.svg" width="12" height="12"><a href="https://github.com/handsontable/handsontable/tree/master/wrappers/react-wrapper"> React</a>
<img src="https://raw.githubusercontent.com/handsontable/handsontable/develop/resources/icons/angular-icon.svg" width="12" height="12" alt="Angular"> <a href="https://github.com/handsontable/handsontable/tree/master/wrappers/angular-wrapper"> Angular</a>
<img src="https://raw.githubusercontent.com/handsontable/handsontable/develop/resources/icons/vue-icon.svg" width="12" height="12" alt="Vue"> <a href="https://github.com/handsontable/handsontable/tree/master/wrappers/vue3"> Vue</a>

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: 'non-commercial-and-evaluation',
});

CDN-based setup

<details close> <summary>  Show/Hide code</summary> 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 - JavaScript Data Grid 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: "non-commercial-and-evaluation",
      });
    </script>
  </body>
</html>

</details> </div>

🎨 Themes

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:

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 vi

Handsontable

Install / Use

README