# Handsontable — JavaScript Data Grid with Spreadsheet UX

> A feature-rich JavaScript data grid component that brings spreadsheet-like editing, sorting, filtering, and formulas to web applications.

## Install

Save in your project root:

# Handsontable — JavaScript Data Grid with Spreadsheet UX

## Quick Use
```bash
npm install handsontable
```
```javascript
import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';
const hot = new Handsontable(document.getElementById('grid'), {
  data: [['Name', 'Score'], ['Alice', 95], ['Bob', 87]],
  colHeaders: true,
  rowHeaders: true,
  licenseKey: 'non-commercial-and-evaluation'
});
```

## Introduction
Handsontable is a JavaScript data grid that gives web apps a spreadsheet-like experience. Users can edit cells inline, sort and filter columns, copy-paste from Excel, and use formulas, all without leaving the browser.

## What Handsontable Does
- Renders large tabular datasets with virtual scrolling for performance
- Provides inline cell editing with support for text, numeric, date, checkbox, and dropdown types
- Supports copy-paste interoperability with Excel and Google Sheets
- Includes column sorting, multi-column filtering, and row grouping
- Offers a formula engine based on HyperFormula for spreadsheet calculations

## Architecture Overview
Handsontable uses a two-layer rendering model. The data layer stores rows and columns in a normalized array structure, while the rendering layer uses a custom table-based DOM renderer that only paints visible cells via virtual scrolling. Plugins extend core behavior for features like undo/redo, column resizing, context menus, and data validation. HyperFormula powers the optional formula engine as a separate dependency.

## Self-Hosting & Configuration
- Install via npm or include from a CDN; works with vanilla JS, React, Vue, or Angular wrappers
- Pass a data array or bind to a remote data source via hooks
- Configure column types, validators, and renderers in the columns option
- Enable plugins like `ColumnSorting`, `Filters`, or `Formulas` in the settings object
- Style the grid with CSS variables or import one of the bundled themes

## Key Features
- HyperFormula integration supports 400+ spreadsheet functions
- Context menu with customizable actions for rows and columns
- Merge cells, freeze rows/columns, and hide columns
- Nested headers and column groups for complex table layouts
- Undo and redo with configurable history depth

## Comparison with Similar Tools
- **AG Grid** — comparable enterprise feature set; Handsontable is more spreadsheet-oriented with native formula support
- **TanStack Table** — headless logic library; Handsontable provides a full rendered UI
- **SlickGrid** — lightweight and fast; Handsontable offers richer built-in editing features
- **Tabulator** — simpler setup for basic tables; Handsontable scales to complex spreadsheet use cases
- **React Data Grid** — React-specific; Handsontable supports multiple frameworks natively

## FAQ
**Q: Is Handsontable free?**
A: It offers a free tier for non-commercial use and evaluation. Commercial projects require a paid license.

**Q: How does it handle large datasets?**
A: Virtual scrolling renders only visible rows and columns, keeping the DOM lightweight even with hundreds of thousands of cells.

**Q: Can I use it with React or Vue?**
A: Yes. Official wrapper packages are available for React, Vue 3, and Angular.

**Q: Does it support Excel import/export?**
A: Copy-paste from Excel works natively. File-level import and export can be added with community plugins or custom code.

## Sources
- https://github.com/handsontable/handsontable
- https://handsontable.com/docs

---
Source: https://tokrepo.com/en/workflows/4cb66029-4361-11f1-9bc6-00163e2b0d79
Author: AI Open Source