Handsontable: JavaScript Data Grid with Spreadsheet Features

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

npm install handsontable

Provide an HTML container

<!-- Set the container's ID -->
<div id="handsontable-grid"></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, {
  // 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.

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

<!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
• Demo
• Documentation
• npm Package
• CDN
• Community Forum
• Official Blog