Handsontable

https://handsontable.com/docs/javascript-data-grid/
Admin
Handsontable is a JavaScript data grid component that brings spreadsheet-like functionality to web...
Tokens:775,625
Snippets:5,003
Trust Score:10
Update:2 months ago
Show doc for...
Tokens:
Raw
### Full implementation of an external search box

Source: https://handsontable.com/docs/javascript-data-grid/recipes/filtering-and-search/external-search-box

A complete example showing the setup of the Handsontable instance, the creation of the DOM elements for the search input, and the debounced search logic.

```javascript
1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable modules.
5
registerAllModules();
6

7
/* start:skip-in-preview */
8
const data = [
9
  ['Alice Johnson', 'Engineering', 'Berlin', 'alice.johnson@example.com'],
10
  ['Noah Smith', 'Design', 'Warsaw', 'noah.smith@example.com'],
11
  ['Mia Garcia', 'Marketing', 'New York', 'mia.garcia@example.com'],
12
  ['Liam Brown', 'Engineering', 'Toronto', 'liam.brown@example.com'],
13
  ['Emma Davis', 'Sales', 'London', 'emma.davis@example.com'],
14
  ['Oliver Miller', 'Support', 'Madrid', 'oliver.miller@example.com'],
15
];
16
/* end:skip-in-preview */
17

18
const exampleContainer = document.querySelector('#example1');
19

20
if (!exampleContainer) {
21
  throw new Error('Example container not found.');
22
}
23

24
const searchWrapper = document.createElement('div');
25
searchWrapper.className = 'example-controls-container';
26

27
const controlsDiv = document.createElement('div');
28
controlsDiv.className = 'controls';
29

30
const searchLabel = document.createElement('label');
31
searchLabel.setAttribute('for', 'external-search-input');
32
searchLabel.textContent = 'Search rows';
33

34
const searchInput = document.createElement('input');
35
searchInput.id = 'external-search-input';
36
searchInput.type = 'search';
37
searchInput.placeholder = 'Type to highlight matching cells...';
38

39
const hotContainer = document.createElement('div');
40

41
controlsDiv.appendChild(searchLabel);
42
controlsDiv.appendChild(searchInput);
43
searchWrapper.appendChild(controlsDiv);
44
exampleContainer.appendChild(searchWrapper);
45
exampleContainer.appendChild(hotContainer);
46

47
const hot = new Handsontable(hotContainer, {
48
  data,
49
  rowHeaders: true,
50
  colHeaders: ['Name', 'Team', 'Location', 'Email'],
51
  height: 'auto',
52
  width: '100%',
53
  autoWrapRow: true,
54
  autoWrapCol: true,
55
  search: true,
56
  licenseKey: 'non-commercial-and-evaluation',
57
});
58

59
const debounce = <T extends (...args: unknown[]) => void>(callback: T, delay = 120) => {
60
  let timeoutId: ReturnType<typeof setTimeout> | undefined;
61

62
  return (...args: Parameters<T>) => {
63
    clearTimeout(timeoutId);
64
    timeoutId = setTimeout(() => callback(...args), delay);
65
  };
66
};
67

68
const runSearch = debounce((value: string) => {
69
  const searchPlugin = hot.getPlugin('search');
70

71
  searchPlugin.query(value);
72
  hot.render();
73
});
74

75
searchInput.addEventListener('input', (event) => {
76
  runSearch((event.target as HTMLInputElement).value);
77
});
```

--------------------------------

### Install dependencies

Source: https://handsontable.com/docs/javascript-data-grid/recipes/themes/fluent-ui

Install the necessary packages for Handsontable and Fluent UI integration.

```bash
npm install handsontable @handsontable/react-wrapper @fluentui/react-components
```

--------------------------------

### Install dependencies

Source: https://handsontable.com/docs/javascript-data-grid/recipes/data-management/server-side-rails

Run the bundle command to install the newly added gems.

```bash
bundle install
```

--------------------------------

### Install dependencies

Source: https://handsontable.com/docs/javascript-data-grid/recipes/themes/ant-design

Install Handsontable, the React wrapper, and Ant Design in your project.

```bash
npm install handsontable @handsontable/react-wrapper antd
```

--------------------------------

### install

Source: https://handsontable.com/docs/javascript-data-grid/api/notification-ui

Initializes the notification host and stack elements.

```APIDOC
## install()

### Description
Creates the notification host and four corner stack elements inside the overlays layer (ht-overlay).
```

--------------------------------

### install()

Source: https://handsontable.com/docs/javascript-data-grid/api/dialog-ui

Creates the dialog UI elements and sets up the structure.

```APIDOC
## install()

### Description
Creates the dialog UI elements and sets up the structure.
```

--------------------------------

### Implement valueParser examples

Source: https://handsontable.com/docs/javascript-data-grid/api/options

Examples for parsing date strings, formatted numbers, and column-specific parsing logic.

```javascript
valueParser(value, cellProperties) {
  if (value == null || value === '') {
    return null;
  }


  const date = new Date(value);


  return Number.isNaN(date.getTime()) ? value : date.toISOString().slice(0, 10);
}


// parse formatted number string to number
valueParser(value, cellProperties) {
  if (value == null || value === '') {
    return null;
  }


  const num = Number(value.replace(/[^\d.-]/g, ''));


  return Number.isNaN(num) ? value : num;
}


// apply valueParser per column
columns: [
  { data: 'date', valueParser: (value) => value ? new Date(value).toISOString().slice(0, 10) : null },
  { data: 'amount', valueParser: (value) => value != null ? Number(value) : null }
]
```

--------------------------------

### install()

Source: https://handsontable.com/docs/javascript-data-grid/api/empty-data-state-ui

Creates the emptyDataState UI elements and sets up the structure.

```APIDOC
### install()

Creates the emptyDataState UI elements and sets up the structure.
```

--------------------------------

### Install Handsontable

Source: https://handsontable.com/docs/javascript-data-grid/recipes/context-menu/custom-context-menu

Use npm to install the Handsontable package.

```bash
npm install handsontable
```

--------------------------------

### Install Handsontable dependencies

Source: https://handsontable.com/docs/javascript-data-grid/recipes/themes/base-theme

Install the required Handsontable packages and the React wrapper.

```bash
pnpm add handsontable@0.0.0-next-deba76c-20260408 @handsontable/react-wrapper@0.0.0-next-deba76c-20260408
```

--------------------------------

### Install Base Web dependencies

Source: https://handsontable.com/docs/javascript-data-grid/recipes/themes/base-theme

Install Base Web and Styletron engine for the theme integration.

```bash
pnpm add baseui styletron-engine-atomic styletron-react
```

--------------------------------

### Initialize Handsontable with pagination

Source: https://handsontable.com/docs/javascript-data-grid/rows-pagination

Setup the Handsontable instance with required modules and sample data.

```javascript
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';

// register Handsontable's modules
registerAllModules();

const data = [
  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },
  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },
  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },
  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },
  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },
  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },
  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },
  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },
  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },
  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },
  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },
  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },
  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },
  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false }]
```

--------------------------------

### Install Dependencies

Source: https://handsontable.com/docs/javascript-data-grid/recipes/cell-types/pikaday

Install the required Pikaday and Moment libraries, along with TypeScript definitions.

```bash
npm install pikaday moment
```

```bash
npm install --save-dev @types/pikaday
```

--------------------------------

### Imports and Component Setup

Source: https://handsontable.com/docs/javascript-data-grid/redux

Initial imports and setup for the StarRating component and color picker editor.

```typescript
import { useEffect, MouseEvent, KeyboardEvent, useRef, useState } from 'react';
import Handsontable from 'handsontable/base';
import { HexColorPicker } from 'react-colorful';
import { Provider, connect, useDispatch } from 'react-redux';
import { createStore, combineReducers } from 'redux';
import { HotTable, HotColumn, useHotEditor } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';

// register Handsontable's modules
registerAllModules();

interface StarRatingProps {
  name: string;
  value?: number;
  starCount?: number;
  starColor?: string;
  emptyStarColor?: string;
}

function StarRating({ name, value = 0, starCount = 5, starColor = '#ffb400', emptyStarColor = '#d3d3d3' }: StarRatingProps) {
  return (
    <div style={{ display: 'inline-flex', gap: '1px' }}>
      {Array.from({ length: starCount }, (_, i) => (
        <span
          key={`${name}-${i + 1}`}
          style={{ fontSize: '18px', color: i + 1 <= value ? starColor : emptyStarColor, lineHeight: 1 }}
        >
          ★
        </span>
      ))}
    </div>
  );
}

type RendererProps = {
  TD?: HTMLTableCellElement;
  value?: string | number;
  row?: number;
  col?: number;
  cellProperties?: Handsontable.CellProperties;
};

const UnconnectedColorPickerEditor = () => {
  const dispatch = useDispatch();
  const editorRef = useRef<HTMLDivElement>(null);
  const [pickedColor, setPickedColor] = useState('');
```

--------------------------------

### Install Handsontable and MUI dependencies

Source: https://handsontable.com/docs/javascript-data-grid/recipes/themes/mui-theme

Run this command in your project root to install the necessary packages for Handsontable and MUI integration.

```bash
npm install handsontable @handsontable/react-wrapper @mui/material @emotion/react @emotion/styled
```

--------------------------------

### Install Handsontable spreadsheet icons

Source: https://handsontable.com/docs/javascript-data-grid/icon-pack

Use npm to install the icon package into your project.

```bash
npm install @handsontable/spreadsheet-icons
```

--------------------------------

### Complete Language File Example

Source: https://handsontable.com/docs/javascript-data-grid/language

A full example of a language definition file combining header, imports, dictionary, and export.

```javascript
/**
* @preserve
* Authors: Chris Wick, John Kyle
* Last updated: Nov 15, 2017
*
* Description: Definition file for Spanish - Venezuela language-country.
*/
import * as C from '../constants';

const dictionary = {
  languageCode: 'es-VE',
  [C.CONTEXTMENU_ITEMS_ROW_ABOVE]: 'Insertar fila arriba',
};

export default dictionary;
```

--------------------------------

### Define HTML structure for pagination example

Source: https://handsontable.com/docs/javascript-data-grid/rows-pagination

Provides the container and control button required for the Handsontable pagination example.

```html
<div class="example-controls-container">
  <div class="controls">
    <button id="clearData">Clear the second column of the current page</button>
  </div>
</div>
<div id="example5"></div>
```

--------------------------------

### Pagination Dataset

Source: https://handsontable.com/docs/javascript-data-grid/rows-pagination

A list of product objects containing inventory details for grid pagination examples.

```javascript
{ model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
17
  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
18
  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
19
  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
20
  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
21
  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
22
  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
23
  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
24
  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
25
  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
26
  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
27
  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
28
  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },
29
  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },
30
  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },
31
  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },
32
  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },
33
  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },
34
  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },
35
  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },
36
  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },
37
  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },
38
  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },
39
  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },
40
  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },
41
  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },
42
  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },
43
  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },
44
  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },
45
  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },
46
  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },
47
  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },
48
  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },
49
  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },
50
  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },
51
  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },
52
  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },
53
  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },
54
  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },
55
  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },
56
  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },
57
  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },
58
  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },
59
  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },
60
  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },
61
  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },
62
```

--------------------------------

### HTML structure for sorting controls

Source: https://handsontable.com/docs/javascript-data-grid/rows-sorting

Provides the necessary DOM elements for the programmatic sorting example.

```html
<div class="example-controls-container">
  <div class="controls">
    <button id="sort_asc">Sort by the "Brand" column, in ascending order</button>
    <button id="unsort">Go back to the original order</button>
  </div>
</div>
<div id="exampleSortByAPI"></div>
```

--------------------------------

### Bootstrap the Project

Source: https://handsontable.com/docs/javascript-data-grid/recipes/data-management/server-side-nestjs

Run the setup script to initialize the database, migrations, and development servers.

```bash
bash setup.sh
# or: make setup
```

--------------------------------

### Initialize Handsontable with an array of arrays

Source: https://handsontable.com/docs/javascript-data-grid/binding-to-data

Use an array of arrays to define grid data. This example demonstrates the setup for both JavaScript and TypeScript environments.

```javascript
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';

// Register all Handsontable's modules.
registerAllModules();

const container = document.querySelector('#example1');
const data = [
  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
  ['2017', 110, 11, 12, 13, 15, 16],
  ['2018', 10, 11, 12, 13, 15, 16],
  ['2019', 10, 11, 12, 13, 15, 16],
  ['2020', 10, 11, 12, 13, 15, 16],
  ['2021', 10, 11, 12, 13, 15, 16],
];

new Handsontable(container, {
  data,
  startRows: 5,
  startCols: 5,
  height: 'auto',
  width: 'auto',
  colHeaders: true,
  minSpareRows: 1,
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});
```

```typescript
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';

// Register all Handsontable's modules.
registerAllModules();

const container = document.querySelector('#example1')!;
const data: (string | number)[][] = [
  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
  ['2017', 110, 11, 12, 13, 15, 16],
  ['2018', 10, 11, 12, 13, 15, 16],
  ['2019', 10, 11, 12, 13, 15, 16],
  ['2020', 10, 11, 12, 13, 15, 16],
  ['2021', 10, 11, 12, 13, 15, 16],
];

new Handsontable(container, {
  data,
  startRows: 5,
  startCols: 5,
  height: 'auto',
  width: 'auto',
  colHeaders: true,
  minSpareRows: 1,
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});
```

--------------------------------

### Install Dependencies

Source: https://handsontable.com/docs/javascript-data-grid/recipes/cell-types/flatpickr

Install the required packages via npm.

```bash
npm install flatpickr date-fns
```

--------------------------------

### Install Numbro

Source: https://handsontable.com/docs/javascript-data-grid/recipes/cell-types/numbro

Install the Numbro library via npm.

```bash
npm install numbro
```

--------------------------------

### Initialize and build the repository

Source: https://handsontable.com/docs/javascript-data-grid/custom-builds

Commands to install dependencies and perform a full build from the root directory.

```bash
pnpm install
```

```bash
pnpm run build
```

```bash
npm run build
```

--------------------------------

### Set initial column sort order

Source: https://handsontable.com/docs/javascript-data-grid/rows-sorting

Use the initialConfig option within columnSorting to define the starting column and sort direction upon initialization.

```javascript
1
const configurationOptions = {
2
  columnSorting: {
3
    initialConfig: {
4
      column: 0,
5
      sortOrder: 'asc',
6
    },
7
  },
8
};
```

--------------------------------

### Initialize a large grid with column virtualization

Source: https://handsontable.com/docs/javascript-data-grid/column-virtualization

This example demonstrates setting up a grid with 1,000 rows and 1,000 columns using virtualization. Ensure the container has defined dimensions and overflow hidden in CSS to enable scrolling.

```javascript
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';

// Register all Handsontable's modules.
registerAllModules();

// generate an array of arrays with dummy data
const data = new Array(1000) // number of rows
  .fill(null)
  .map((_, row) =>
    new Array(1000) // number of columns
      .fill(null)
      .map((_, column) => `${row}, ${column}`)
  );

const container = document.querySelector('#example1');

new Handsontable(container, {
  data,
  colWidths: 100,
  width: '100%',
  height: 320,
  rowHeaders: true,
  colHeaders: true,
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});
```

```typescript
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';

// Register all Handsontable's modules.
registerAllModules();

// generate an array of arrays with dummy data
const data: string[][] = new Array(1000) // number of rows
  .fill(null)
  .map((_, row) =>
    new Array(1000) // number of columns
      .fill(null)
      .map((_, column) => `${row}, ${column}`)
  );

const container = document.querySelector('#example1')!;

new Handsontable(container, {
  data,
  colWidths: 100,
  width: '100%',
  height: 320,
  rowHeaders: true,
  colHeaders: true,
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});
```

--------------------------------

### Install dependencies

Source: https://handsontable.com/docs/javascript-data-grid/migration-from-15.3-to-16.0

Installs project dependencies using pnpm.

```bash
pnpm install
```

--------------------------------

### paginationUI.install()

Source: https://handsontable.com/docs/javascript-data-grid/api/pagination-ui

Initializes the pagination UI by creating DOM elements and registering event listeners.

```APIDOC
## paginationUI.install()

### Description
Creates the pagination UI elements and sets up event listeners.
```

--------------------------------

### Install GraphQL dependency

Source: https://handsontable.com/docs/javascript-data-grid/recipes/data-management/server-side-symfony

Command to install the webonyx/graphql-php package for Symfony.

```bash
composer require webonyx/graphql-php
```

--------------------------------

### Initialize Handsontable with Language Support

Source: https://handsontable.com/docs/javascript-data-grid/language

Full implementation example showing module registration and grid initialization with a specific language.

```javascript
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';
import { registerLanguageDictionary, deDE } from 'handsontable/i18n';

// Register all Handsontable's modules.
registerAllModules();
registerLanguageDictionary(deDE);

const container = document.querySelector('#example1');
const data = [
  ['Lorem', 'ipsum', 'dolor', 'sit', '12/1/2015', 23],
  ['adipiscing', 'elit', 'Ut', 'imperdiet', '5/12/2015', 6],
  ['Pellentesque', 'vulputate', 'leo', 'semper', '10/23/2015', 26],
  ['diam', 'et', 'malesuada', 'libero', '12/1/2014', 98],
  ['orci', 'et', 'dignissim', 'hendrerit', '12/1/2016', 8.5],
];

new Handsontable(container, {
  data,
  contextMenu: true,
  height: 'auto',
  language: 'de-DE',
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});
```

```typescript
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';
import { registerLanguageDictionary, deDE } from 'handsontable/i18n';

// Register all Handsontable's modules.
registerAllModules();

registerLanguageDictionary(deDE);

const container: Element = document.querySelector('#example1')!;
const data: [string, string, string, string, string, number][] = [
  ['Lorem', 'ipsum', 'dolor', 'sit', '12/1/2015', 23],
  ['adipiscing', 'elit', 'Ut', 'imperdiet', '5/12/2015', 6],
  ['Pellentesque', 'vulputate', 'leo', 'semper', '10/23/2015', 26],
  ['diam', 'et', 'malesuada', 'libero', '12/1/2014', 98],
  ['orci', 'et', 'dignissim', 'hendrerit', '12/1/2016', 8.5],
];

new Handsontable(container, {
  data,
  contextMenu: true,
  height: 'auto',
  language: 'de-DE',
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});
```

--------------------------------

### Install Moment.js

Source: https://handsontable.com/docs/javascript-data-grid/recipes/cell-types/moment-time

Install the required Moment.js dependency via npm.

```bash
npm install moment
```

--------------------------------

### Initialize a large dataset with row virtualization

Source: https://handsontable.com/docs/javascript-data-grid/row-virtualization

Demonstrates setting up a Handsontable instance with 1 million cells using row virtualization.

```javascript
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';

// Register all Handsontable's modules.
registerAllModules();

// generate an array of arrays with dummy data
const data = new Array(1000) // number of rows
  .fill(null)
  .map((_, row) =>
    new Array(1000) // number of columns
      .fill(null)
      .map((_v, column) => `${row}, ${column}`)
  );

const container = document.querySelector('#example1');

new Handsontable(container, {
  data,
  colWidths: 100,
  width: '100%',
  height: 320,
  rowHeaders: true,
  colHeaders: true,
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});
```

```typescript
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';

// Register all Handsontable's modules.
registerAllModules();

// generate an array of arrays with dummy data
const data: string[][] = new Array(1000) // number of rows
  .fill(null)
  .map((_, row) =>
    new Array(1000) // number of columns
      .fill(null)
      .map((_v, column) => `${row}, ${column}`)
  );

const container = document.querySelector('#example1')!;

new Handsontable(container, {
  data,
  colWidths: 100,
  width: '100%',
  height: 320,
  rowHeaders: true,
  colHeaders: true,
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});
```

--------------------------------

### Initialize Handsontable with context menu

Source: https://handsontable.com/docs/javascript-data-grid/context-menu

Full initialization example showing the context menu enabled within the Handsontable configuration object.

```javascript
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';

// Register all Handsontable's modules.
registerAllModules();

const container = document.querySelector('#example1');

new Handsontable(container, {
  data: [
    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
    ['2017', 10, 11, 12, 13, 15, 16],
    ['2018', 10, 11, 12, 13, 15, 16],
    ['2019', 10, 11, 12, 13, 15, 16],
    ['2020', 10, 11, 12, 13, 15, 16],
    ['2021', 10, 11, 12, 13, 15, 16],
  ],
  rowHeaders: true,
  colHeaders: true,
  contextMenu: true,
  height: 'auto',
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});
```

```typescript
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';

// Register all Handsontable's modules.
registerAllModules();

const container = document.querySelector('#example1')!;

new Handsontable(container, {
  data: [
    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
    ['2017', 10, 11, 12, 13, 15, 16],
    ['2018', 10, 11, 12, 13, 15, 16],
    ['2019', 10, 11, 12, 13, 15, 16],
    ['2020', 10, 11, 12, 13, 15, 16],
    ['2021', 10, 11, 12, 13, 15, 16],
  ],
  rowHeaders: true,
  colHeaders: true,
  contextMenu: true,
  height: 'auto',
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});
```

--------------------------------

### Install Doctrine dependencies

Source: https://handsontable.com/docs/javascript-data-grid/recipes/data-management/server-side-symfony

Install the necessary Doctrine packages for ORM and migrations.

```bash
composer require doctrine/orm doctrine/doctrine-bundle doctrine/doctrine-migrations-bundle
```

--------------------------------

### Implement a basic comments example

Source: https://handsontable.com/docs/javascript-data-grid/comments

A full implementation showing the registration of modules and initialization of a table with pre-set comments.

```javascript
1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example1');
8

9
new Handsontable(container, {
10
  data: [
11
    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
12
    ['2017', 10, 11, 12, 13, 15, 16],
13
    ['2018', 10, 11, 12, 13, 15, 16],
14
    ['2019', 10, 11, 12, 13, 15, 16],
15
    ['2020', 10, 11, 12, 13, 15, 16],
16
    ['2021', 10, 11, 12, 13, 15, 16],
17
  ],
18
  rowHeaders: true,
19
  colHeaders: true,
20
  contextMenu: true,
21
  comments: true,
22
  cell: [
23
    { row: 1, col: 1, comment: { value: 'Some comment' } },
24
    { row: 2, col: 2, comment: { value: 'More comments' } },
25
  ],
26
  height: 'auto',
27
  autoWrapRow: true,
28
  autoWrapCol: true,
29
  licenseKey: 'non-commercial-and-evaluation',
30
});
```

```typescript
1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example1')!;
8

9
new Handsontable(container, {
10
  data: [
11
    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
12
    ['2017', 10, 11, 12, 13, 15, 16],
13
    ['2018', 10, 11, 12, 13, 15, 16],
14
    ['2019', 10, 11, 12, 13, 15, 16],
15
    ['2020', 10, 11, 12, 13, 15, 16],
16
    ['2021', 10, 11, 12, 13, 15, 16],
17
  ],
18
  rowHeaders: true,
19
  colHeaders: true,
20
  contextMenu: true,
21
  comments: true,
22
  cell: [
23
    { row: 1, col: 1, comment: { value: 'Some comment' } },
24
    { row: 2, col: 2, comment: { value: 'More comments' } },
25
  ],
26
  height: 'auto',
27
  autoWrapRow: true,
28
  autoWrapCol: true,
29
  licenseKey: 'non-commercial-and-evaluation',
30
});
```

--------------------------------

### Install Pickr Dependency

Source: https://handsontable.com/docs/javascript-data-grid/recipes/cell-types/colorful-picker

Command to install the Pickr library via npm.

```bash
npm install @simonwep/pickr
```

--------------------------------

### Import and Setup Handsontable Modules

Source: https://handsontable.com/docs/javascript-data-grid/formula-calculation

Initializes the environment by importing necessary modules and registering them for use with HyperFormula.

```javascript
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';
import { HyperFormula } from 'hyperformula';

// Register all Handsontable's modules.
registerAllModules();
```

--------------------------------

### Install ExcelJS dependency

Source: https://handsontable.com/docs/javascript-data-grid/export-to-excel

Install the required ExcelJS library version 4.4.0 or later.

```bash
npm install exceljs
```

--------------------------------

### Initialize Handsontable with Modules

Source: https://handsontable.com/docs/javascript-data-grid/focus-scopes

Basic setup for Handsontable using the registry module system.

```javascript
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';

// register Handsontable's modules
registerAllModules();

const data = [
  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
]
```
Tokens:
Raw