handsontable

What is handsontable?

Handsontable is a JavaScript/HTML5 data grid component with a spreadsheet look & feel. It is designed to handle large volumes of data and provides a wide range of features for data manipulation and visualization.

What are handsontable's main functionalities?

Data Grid

Handsontable provides a powerful data grid component that can be easily integrated into web applications. The code sample demonstrates how to create a basic data grid with row and column headers.

const container = document.getElementById('example');
const hot = new Handsontable(container, {
  data: Handsontable.helper.createSpreadsheetData(6, 10),
  rowHeaders: true,
  colHeaders: true
});

Data Validation

Handsontable supports data validation to ensure that the data entered into the grid meets certain criteria. The code sample shows how to set up a numeric validator for an 'age' column.

const hot = new Handsontable(container, {
  data: Handsontable.helper.createSpreadsheetData(6, 10),
  columns: [
    {data: 'id', type: 'numeric'},
    {data: 'name', type: 'text'},
    {data: 'age', type: 'numeric', validator: (value) => value > 0}
  ],
  rowHeaders: true,
  colHeaders: true
});

Custom Cell Rendering

Handsontable allows for custom cell rendering, enabling developers to change the appearance of cells based on their data. The code sample demonstrates how to change the background color of cells in the 'age' column if the value is greater than 50.

const hot = new Handsontable(container, {
  data: Handsontable.helper.createSpreadsheetData(6, 10),
  columns: [
    {data: 'id', type: 'numeric'},
    {data: 'name', type: 'text'},
    {data: 'age', type: 'numeric'}
  ],
  cells: function (row, col) {
    const cellProperties = {};
    if (col === 2) {
      cellProperties.renderer = function (instance, td, row, col, prop, value, cellProperties) {
        Handsontable.renderers.TextRenderer.apply(this, arguments);
        if (value > 50) {
          td.style.backgroundColor = 'red';
        }
      };
    }
    return cellProperties;
  },
  rowHeaders: true,
  colHeaders: true
});

Other packages similar to handsontable

ag-grid

AG Grid is a fully-featured and highly customizable JavaScript data grid. It offers a wide range of features similar to Handsontable, such as data sorting, filtering, and editing. AG Grid is known for its performance and flexibility, making it suitable for large datasets and complex use cases.

react-table

React Table is a lightweight, fast, and extendable data grid built for React applications. It provides basic features like sorting, filtering, and pagination. Compared to Handsontable, React Table is more focused on being a simple and flexible solution for React developers, without the spreadsheet-like features.

slickgrid

SlickGrid is a JavaScript grid/spreadsheet component that is known for its performance with large datasets. It offers features like virtual scrolling and column resizing. While it provides similar functionalities to Handsontable, it is more focused on performance and less on providing a spreadsheet-like experience.

README

Handsontable is a JavaScript component that combines data grid features with spreadsheet-like UX.
It provides data binding, data validation, filtering, sorting, and CRUD operations.

---

Get Started with Handsontable

React

Angular

Vue

Vue 3

JavaScript

---

Features

The most popular features of Handsontable:

  ✓  Multiple column sorting
  ✓  Non-contiguous selection
  ✓  Filtering data
  ✓  Export to file
  ✓  Validating data
  ✓  Conditional formatting
  ✓  Merging cells
  ✓  Freezing rows/columns
  ✓  Moving rows/columns
  ✓  Resizing rows/columns
  ✓  Hiding rows/columns
  ✓  Context menu
  ✓  Comments

Documentation

• Developer guides
• API Reference
• Changelog
• Demo

Get Started

Install with npm

Run the following command in your terminal

npm install handsontable

You can also use Yarn, NuGet or load the bundle directly from jsDelivr.

Create a placeholder

Create an HTML placeholder

<div id="example"></div>

Import Handsontable and its stylesheet

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

Initialize the grid

Now turn your placeholder into a data grid with sample data.

const data = [
  ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
  ['2019', 10, 11, 12, 13],
  ['2020', 20, 11, 14, 13],
  ['2021', 30, 15, 12, 13]
];

const container = document.getElementById('example');
const hot = new Handsontable(container, {
  data: data,
  rowHeaders: true,
  colHeaders: true
});

Support

We provide support for developers working with commercial version via contact form or at [e-mail].

If you use a non-commercial version then please ask your tagged question on StackOverflow.

License

Handsontable is a commercial software with two licenses available:

• Free for non-commercial purposes such as teaching, academic research, and evaluation. Read it here.
• Commercial license with support and maintenance included. See pricing plans.

License key

If you use Handsontable in a project that supports your commercial activity, then you must purchase the license key at handsontable.com.

If you use the free for non-commercial license of Handsontable, then pass the phrase 'non-commercial-and-evaluation', as described in this documentation.

Proudly created and maintained by the Handsontable Team.