@wszymanski-test/handsontable

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.

Changelog

[12.4.0] - 2023-05-23

Added

• Added two new Handsontable hooks, afterColumnSequenceChange and afterRowSequenceChange, which are fired after changing the order of columns or rows, respectively. #10215

Fixed

• Fixed numerous issues related to syncing Handsontable with HyperFormula. Now, formulas work properly with all the Handsontable features. #10215
• Fixed na issue where formulas didn't recalculate after rows or columns were moved. #4668
• Fixed an issue where Handsontable's dates didn't sync correctly with HyperFormula's dates. #10085
• Fixed an issue where calling updateSettings() would reset HyperFormula's undo/redo actions stack. #10326
• Fixed an issue where the Autofill, TrimRows and Formulas plugins didn't work properly together. #10200
• Fixed an issue where the modifySourceData hook used the wrong type of indexes. #10215
• Fixed an issue where text copied from Handsontable to Excel included wrong types of spaces. #10017
• Fixed an issue where mousing over the same cell twice didn't trigger the beforeOnCellMouseOver and afterOnCellMouseOver hooks. #10321
• Updated TypeScript definition files related to the CustomBorders plugin. #10360
• Fixed an issue where moving rows manually to the bottom was difficult due the misalignment between the backlight and guideline elements. #9556

For more information on Handsontable 12.4.0, see:

• Blog post (12.4.0)
• Documentation (12.4)
• Release notes (12.4.0)