handsontable

JavaScript Data Grid / Data Table with a Spreadsheet Look & Feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡

20,732

3,124

20,732

415

View on GitHub View on NPM

Top Related Projects

ag-grid

13,639

The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.

SlickGrid

6,814

A lightning fast JavaScript grid/spreadsheet

table

25,610

🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table

react-virtualized

26,682

React components for efficiently rendering large lists and tabular data

Quick Overview

Handsontable is a JavaScript data grid component with spreadsheet-like features. It provides an Excel-like interface for web applications, allowing users to view, edit, and manipulate large datasets directly in the browser. Handsontable is highly customizable and supports various data types, cell types, and advanced features like sorting, filtering, and validation.

Pros

Extensive features: Offers a wide range of spreadsheet-like functionalities
High performance: Efficiently handles large datasets with smooth scrolling
Customizable: Provides numerous options for styling and behavior customization
Active development: Regularly updated with new features and bug fixes

Cons

Learning curve: Can be complex to set up and configure for advanced use cases
Limited free version: Some features are only available in the paid Pro version
Performance impact: Heavy customization can affect performance with large datasets
Browser compatibility: Some advanced features may not work in older browsers

Code Examples

Basic initialization:

const container = document.getElementById('example');
const hot = new Handsontable(container, {
  data: [
    ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
    ['2019', 10, 11, 12, 13],
    ['2020', 20, 11, 14, 13],
    ['2021', 30, 15, 12, 13]
  ],
  rowHeaders: true,
  colHeaders: true,
  height: 'auto',
  licenseKey: 'non-commercial-and-evaluation'
});

Adding custom cell types:

const container = document.getElementById('example');
const hot = new Handsontable(container, {
  data: [
    ['', 'Price', 'Stock'],
    ['Product A', 10.99, 15],
    ['Product B', 15.99, 8],
    ['Product C', 5.99, 22]
  ],
  columns: [
    {},
    { type: 'numeric', format: '$0,0.00' },
    { type: 'numeric' }
  ],
  licenseKey: 'non-commercial-and-evaluation'
});

Implementing data validation:

const container = document.getElementById('example');
const hot = new Handsontable(container, {
  data: [
    ['', 'Email', 'Password'],
    ['User 1', '', ''],
    ['User 2', '', ''],
    ['User 3', '', '']
  ],
  columns: [
    {},
    {
      validator: (value, callback) => {
        callback(/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value));
      }
    },
    {
      validator: (value, callback) => {
        callback(value.length >= 8);
      }
    }
  ],
  licenseKey: 'non-commercial-and-evaluation'
});

Getting Started

Install Handsontable via npm:
```
npm install handsontable
```

Import Handsontable in your JavaScript file:

import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';

Create a container element in your HTML:
```
<div id="example"></div>
```

Initialize Handsontable:

const container = document.getElementById('example');
const hot = new Handsontable(container, {
  data: [['', 'A', 'B'], [1, 'X', 'Y'], [2, 'P', 'Q']],
  rowHeaders: true,
  colHeaders: true,
  licenseKey: 'non-commercial-and-evaluation'
});

Competitor Comparisons

ag-grid

13,639

The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.

Pros of ag-grid

More extensive feature set, including advanced filtering, sorting, and grouping
Better performance with large datasets (100,000+ rows)
More customizable with a wider range of themes and styling options

Cons of ag-grid

Steeper learning curve due to its complexity
More expensive enterprise version for advanced features
Larger bundle size, which may impact initial load times

Code Comparison

ag-grid:

import { Grid } from 'ag-grid-community';

const gridOptions = {
  columnDefs: [{ field: 'name' }, { field: 'age' }],
  rowData: [{ name: 'John', age: 30 }, { name: 'Jane', age: 25 }]
};

new Grid(document.querySelector('#myGrid'), gridOptions);

Handsontable:

import Handsontable from 'handsontable';

const hot = new Handsontable(document.getElementById('example'), {
  data: [['John', 30], ['Jane', 25]],
  colHeaders: ['Name', 'Age']
});

Both libraries offer powerful data grid solutions, but ag-grid provides more advanced features and better performance for large datasets. However, this comes at the cost of increased complexity and potentially higher licensing fees. Handsontable, while simpler, may be more suitable for smaller projects or those requiring a gentler learning curve.

SlickGrid

6,814

A lightning fast JavaScript grid/spreadsheet

Pros of SlickGrid

Lightweight and fast, especially for large datasets
Highly customizable with extensive plugin system
Better support for frozen columns and rows

Cons of SlickGrid

Less active development and community support
Steeper learning curve due to more complex API
Limited built-in features compared to Handsontable

Code Comparison

SlickGrid:

var grid = new Slick.Grid("#myGrid", data, columns, options);
grid.onCellChange.subscribe(function (e, args) {
  // Handle cell change
});

Handsontable:

var hot = new Handsontable(container, {
  data: data,
  columns: columns,
  afterChange: function (changes, source) {
    // Handle cell change
  }
});

Both libraries offer powerful grid functionality, but SlickGrid focuses on performance and customization for large datasets, while Handsontable provides a more user-friendly API with a wider range of built-in features. SlickGrid's event-based approach contrasts with Handsontable's configuration-driven setup, reflecting their different design philosophies.

table

25,610

🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table

Pros of TanStack Table

Lightweight and flexible, with a smaller bundle size
Framework-agnostic, supporting React, Vue, Solid, and vanilla JS
Highly customizable with a powerful plugin system

Cons of TanStack Table

Steeper learning curve due to its headless nature
Less out-of-the-box functionality compared to Handsontable
Requires more setup and configuration for advanced features

Code Comparison

Handsontable:

const hot = new Handsontable(container, {
  data: data,
  columns: columns,
  rowHeaders: true,
  colHeaders: true
});

TanStack Table:

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel()
});

Both libraries offer powerful table functionality, but they cater to different use cases. Handsontable provides a more complete solution with built-in features, while TanStack Table offers greater flexibility and customization options. The choice between them depends on project requirements, development preferences, and the desired level of control over the table implementation.

react-virtualized

26,682

React components for efficiently rendering large lists and tabular data

Pros of react-virtualized

Specialized for rendering large lists and tabular data efficiently
Lightweight and focused on virtualization, with a smaller bundle size
More flexible for custom UI components and layouts

Cons of react-virtualized

Less out-of-the-box features compared to Handsontable
Requires more custom implementation for complex spreadsheet-like functionality
Steeper learning curve for advanced use cases

Code Comparison

react-virtualized:

import { List } from 'react-virtualized';

<List
  width={300}
  height={300}
  rowCount={1000}
  rowHeight={20}
  rowRenderer={({ key, index, style }) => (
    <div key={key} style={style}>Row {index}</div>
  )}
/>

Handsontable:

import Handsontable from 'handsontable';

const hot = new Handsontable(container, {
  data: [['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
         ['2019', 10, 11, 12, 13],
         ['2020', 20, 11, 14, 13],
         ['2021', 30, 15, 12, 13]],
  rowHeaders: true,
  colHeaders: true
});

react-virtualized is better suited for efficient rendering of large datasets in custom UIs, while Handsontable provides a more complete spreadsheet-like experience out of the box. The choice depends on specific project requirements and desired level of customization.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Handsontable is a JavaScript Data Grid 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
  â 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

ðª 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 and apply the desired theme -->
<div id="handsontable-example" class="ht-theme-main-dark-auto"></div>

Setup

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, {
  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

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 - 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" class="ht-theme-main-dark-auto"></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>

ð Resources

ð¤ Is Handsontable a Data Grid or a Spreadsheet?

Handsontable 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.

ð Support

We're here to help!

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

Join the conversation on GitHub Discussions to share ideas, suggest features, or discuss changes.
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 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

For projects covered by the free non-commercial license, simply use the phrase 'non-commercial-and-evaluation' as your license key.

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 ð

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of ag-grid

Cons of ag-grid

Code Comparison

Pros of SlickGrid

Cons of SlickGrid

Code Comparison

Pros of TanStack Table

Cons of TanStack Table

Code Comparison

Pros of react-virtualized

Cons of react-virtualized

Code Comparison

Convert designs to code with AI

README

Handsontable is a JavaScript Data Grid with a spreadsheet-like look and feel.

â¨ Key Features

ðª Installation

Install with npm

Provide an HTML container

Setup

CDN-based setup

ð Resources

ð¤ Is Handsontable a Data Grid or a Spreadsheet?

Spreadsheet-like features in Handsontable:

ð Support

ð Licenses

â Free license for non-commercial use, and evaluation purposes

â¡ Commercial license

ð License Key

ð Contributing

Top Related Projects

Convert designs to code with AI

NPM DownloadsLast 30 Days

â¨ Key Features

ðª Installation

ð Resources

ð¤ Is Handsontable a Data Grid or a Spreadsheet?

ð Support

ð Licenses

â Free license for non-commercial use, and evaluation purposes

â¡ Commercial license

ð License Key

ð Contributing