# Handsontable: JavaScript Data Grid with Spreadsheet Features

This repository profile is provided by osrepos.com, an open source repository discovery platform.

Source: osrepos.com
Repository profile: https://osrepos.com/repo/handsontable-handsontable
Generated for open source discovery and AI-assisted research.

Handsontable is a powerful JavaScript Data Grid that offers a familiar spreadsheet-like look and feel, making data entry and management intuitive. It seamlessly integrates with popular frameworks like React, Angular, and Vue, providing a robust solution for building data-rich applications. This versatile component is ideal for various use cases, from ERP to data modeling systems.

GitHub: https://github.com/handsontable/handsontable
OSRepos URL: https://osrepos.com/repo/handsontable-handsontable

## Summary

Handsontable is a powerful JavaScript Data Grid that offers a familiar spreadsheet-like look and feel, making data entry and management intuitive. It seamlessly integrates with popular frameworks like React, Angular, and Vue, providing a robust solution for building data-rich applications. This versatile component is ideal for various use cases, from ERP to data modeling systems.

## Topics

- JavaScript
- Data Grid
- Spreadsheet
- React
- Angular
- Vue
- Data Table
- UI Component

## Repository Information

Last analyzed by OSRepos: Sun Jan 18 2026 20:01:27 GMT+0000 (Western European Standard Time)
Detail views: 2
GitHub clicks: 2

## Safety Notice

OSRepos shares public repositories for knowledge and discovery only. Review source code, dependencies, licenses, and security implications before running or installing anything.

## Content

## Introduction

Handsontable is a highly popular and versatile JavaScript Data Grid component, boasting over 21,700 stars on GitHub. Developed by the Handsontable team, it provides a robust solution for displaying and managing tabular data with a user experience akin to a spreadsheet. Built primarily with JavaScript, it offers seamless integration with modern frameworks such as React, Angular, and Vue. This makes it an excellent choice for developers looking to create interactive, data-rich applications, including resource planning software, inventory management systems, and data modeling tools.

## Installation

Getting started with Handsontable is straightforward. You can install it via npm, Yarn, NuGet, or load it directly from a CDN. For framework-specific installations, refer to the dedicated wrappers for React, Angular, and Vue.

### Install with npm

bash
npm install handsontable


### Provide an HTML container

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


### Setup

js
import Handsontable from 'handsontable';
// Base CSS rules
import 'handsontable/styles/handsontable.min.css';
// Main theme variables
import 'handsontable/styles/ht-theme-main.min.css';

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

new Handsontable(element, {
  // theme name with obligatory ht-theme-* prefix
  themeName: 'ht-theme-main-dark-auto',
  // other options
  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',
});


## Examples

Handsontable provides a live demo on StackBlitz to quickly see it in action. This example showcases a basic setup with data, columns, and several common features like sorting and dropdowns.

[![Live demo on StackBlitz](https://img.shields.io/badge/Live%20demo%20on%20StackBlitz-1a42e8?style=for-the-badge)](https://stackblitz.com/edit/handsontable-readme-example?file=src%2Fmain.js){target="_blank"}

For a quick CDN-based setup without imports, you can use the following HTML structure:

html
<!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>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/handsontable/styles/handsontable.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/handsontable/styles/ht-theme-main.min.css"
    />
  </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, {
        // theme name with obligatory ht-theme-* prefix
        themeName: 'ht-theme-main-dark-auto',
        // other options
        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>


## Why Use It

Handsontable stands out by combining the power of a data grid with the intuitive usability of a spreadsheet. While it's a data grid component, it incorporates many features typically found in spreadsheet software, making data entry and management highly user-friendly.

Key features include:

*   Built-in themes and a flexible API
*   Virtualization for handling large datasets efficiently
*   IME support, internationalization, and RTL support
*   Accessibility and extensive keyboard shortcuts
*   Advanced data manipulation: sorting, filtering, and 400 built-in formulas via HyperFormula
*   Configurable selection, data validation, and conditional formatting
*   Support for merged cells, frozen rows and columns, and hiding rows/columns
*   Right-click context menu for enhanced user interaction
*   Powerful clipboard capabilities for copy-paste operations
*   Built-in undo-redo functionality

These features make Handsontable an ideal choice for building applications that require robust data handling with an familiar and efficient user interface.

## Links

Explore Handsontable further using these official resources:

*   [Website](https://handsontable.com){target="_blank"}
*   [Demo](https://handsontable.com/demo){target="_blank"}
*   [Documentation](https://handsontable.com/docs){target="_blank"}
*   [npm Package](https://www.npmjs.com/package/handsontable){target="_blank"}
*   [CDN](https://www.jsdelivr.com/package/npm/handsontable){target="_blank"}
*   [Community Forum](https://forum.handsontable.com/){target="_blank"}
*   [Official Blog](https://handsontable.com/blog){target="_blank"}