### Install Handsontable with npm
Source: https://handsontable.com/docs/react-data-grid/installation
Install Handsontable and the React wrapper using npm.
```bash
npm install handsontable @handsontable/react-wrapper
```
--------------------------------
### Install Handsontable with Yarn
Source: https://handsontable.com/docs/react-data-grid/installation
Install Handsontable and the React wrapper using Yarn.
```bash
yarn add handsontable @handsontable/react-wrapper
```
--------------------------------
### React Handsontable with Pagination Setup
Source: https://handsontable.com/docs/react-data-grid/rows-pagination
This snippet shows the basic setup for using Handsontable with React, including registering modules and defining data. It's a starting point for implementing custom pagination.
```javascript
import React, { useRef, useState, useEffect } from 'react';
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
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 }
];
function Example() {
const hotTableComponent = useRef(null);
return (
);
}
export default Example;
```
--------------------------------
### Install Handsontable with pnpm
Source: https://handsontable.com/docs/react-data-grid/installation
Install Handsontable and the React wrapper using pnpm.
```bash
pnpm add handsontable @handsontable/react-wrapper
```
--------------------------------
### Install Dependencies
Source: https://handsontable.com/docs/react-data-grid/recipes/cell-types/rating
Install the necessary Handsontable React wrapper and the star rating component.
```bash
npm install @handsontable/react-wrapper react-star-rating-component
```
--------------------------------
### Install Handsontable
Source: https://handsontable.com/docs/react-data-grid/recipes/context-menu/custom-context-menu
Install Handsontable using npm. This is the first step before importing and registering modules.
```bash
npm install handsontable
```
--------------------------------
### Install Dependencies
Source: https://handsontable.com/docs/react-data-grid/recipes/cell-types/color-picker
Install the necessary Handsontable React wrapper and react-colorful packages.
```bash
npm install @handsontable/react-wrapper react-colorful
```
--------------------------------
### CSS for Example Container
Source: https://handsontable.com/docs/react-data-grid/grid-size
Basic CSS to set the initial height of the example container and allow it to be dynamically changed.
```css
#exampleParent {
height: 157px;
}
#exampleParent > div{
```
--------------------------------
### Install Ruby Gems
Source: https://handsontable.com/docs/react-data-grid/recipes/data-management/server-side-rails
Run `bundle install` to install the gems specified in your Gemfile.
```ruby
bundle install
```
--------------------------------
### Install Handsontable and MUI Dependencies
Source: https://handsontable.com/docs/react-data-grid/recipes/themes/mui-theme
Install the necessary Handsontable and MUI packages using npm.
```bash
npm install handsontable @handsontable/react-wrapper @mui/material @emotion/react @emotion/styled
```
--------------------------------
### Install Handsontable React Wrapper
Source: https://handsontable.com/docs/react-data-grid/recipes/cell-types/feedback-react
Install the necessary package for using Handsontable with React.
```bash
npm install @handsontable/react-wrapper
```
--------------------------------
### Install Handsontable React Wrapper
Source: https://handsontable.com/docs/react-data-grid/recipes/cell-types/feedback
Install the necessary package for using Handsontable with React.
```bash
npm install @handsontable/react-wrapper
```
--------------------------------
### Install Core Symfony Framework and Routing
Source: https://handsontable.com/docs/react-data-grid/recipes/data-management/server-side-symfony
Installs the essential Symfony framework bundle and routing component.
```bash
composer require symfony/framework-bundle symfony/routing
```
--------------------------------
### Install Handsontable and Ant Design Dependencies
Source: https://handsontable.com/docs/react-data-grid/recipes/themes/ant-design
Install the necessary Handsontable and Ant Design packages using npm or yarn.
```bash
npm install handsontable @handsontable/react-wrapper antd
```
--------------------------------
### modifyTransformStart
Source: https://handsontable.com/docs/react-data-grid/api/hooks
Fired when the start of the selection is being modified, for example, when moving the selection with arrow keys.
```APIDOC
## modifyTransformStart
### Description
Fired when the start of the selection is being modified (e.g. Moving the selection with the arrow keys).
### Method
N/A (Hook)
### Parameters
#### Parameters
- **delta** (CellCoords) - Description: Cell coords object declaring the delta of the new selection relative to the previous one.
### Since
N/A
```
--------------------------------
### Basic Row Virtualization Example
Source: https://handsontable.com/docs/react-data-grid/row-virtualization
Demonstrates rendering a large dataset (1000x1000 cells) using row virtualization. Ensure Handsontable modules are registered before use.
```javascript
import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
// register Handsontable's modules
registerAllModules();
// generate an array of arrays with dummy data
const data = new Array(1000) // number of rows
.fill(0)
.map((_, row) =>
new Array(1000) // number of columns
.fill(0)
.map((_, column) => `${row}, ${column}`)
);
const ExampleComponent = () => {
return (
);
};
export default ExampleComponent;
```
--------------------------------
### Get Handsontable Instance Reference in React
Source: https://handsontable.com/docs/react-data-grid/instance-methods
This example demonstrates how to get a reference to the Handsontable instance using `useRef` and then call the `selectCell` method to programmatically select a cell. Ensure Handsontable modules are registered.
```javascript
import { useRef } from 'react';
import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontontable/registry';
// register Handsontable's modules
registerAllModules();
const ExampleComponent = () => {
const data = [
['A1', 'B1', 'C1', 'D1'],
['A2', 'B2', 'C2', 'D2'],
['A3', 'B3', 'C3', 'D3'],
['A4', 'B4', 'C4', 'D4'],
];
const hotTableComponentRef = useRef(null);
const selectCell = () => {
// The Handsontable instance is stored under the `hotInstance` property of the wrapper component.
hotTableComponentRef.current?.hotInstance?.selectCell(1, 1);
};
return (
<>
);
};
export default ExampleComponent;
```
--------------------------------
### Bootstrap NestJS Project
Source: https://handsontable.com/docs/react-data-grid/recipes/data-management/server-side-nestjs
Run this command to set up the NestJS project, including starting PostgreSQL, applying TypeORM migrations, seeding data, and launching the backend server.
```bash
bash setup.sh
```
--------------------------------
### Basic Sparkline Cell Renderer Configuration
Source: https://handsontable.com/docs/react-data-grid/recipes/rendering-styling/sparkline-cell-renderer
Demonstrates the basic setup for a sparkline cell renderer. Ensure the 'handsontable/handsontable' package is installed.
```javascript
import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';
const data = [
['=SparkLine(A1:E1)', '=SparkLine(A2:E2)', '=SparkLine(A3:E3)', '=SparkLine(A4:E4)', '=SparkLine(A5:E5)']
];
const container = document.getElementById('example1');
const hot = new Handsontable(container, {
data: data,
colHeaders: true,
cells: function (row, col, prop) {
const cellProperties = {};
if (prop === '0') {
cellProperties.renderer = Handsontable.renderers.SparkLineRenderer;
cellProperties.editor = Handsontable.editors.TextEditor;
cellProperties.data = 'sparkline';
cellProperties.type = 'text';
}
return cellProperties;
}
});
```
--------------------------------
### Install Base Web and Styletron Dependencies
Source: https://handsontable.com/docs/react-data-grid/recipes/themes/base-theme
If setting up a new Base Web environment, install Base UI and Styletron dependencies using pnpm.
```bash
pnpm add baseui styletron-engine-atomic styletron-react
```
--------------------------------
### Basic NestJS Module Setup
Source: https://handsontable.com/docs/react-data-grid/recipes/data-management/server-side-nestjs
Sets up a basic module for data management, including controllers and services. Ensure you have NestJS CLI installed.
```typescript
import { Module } from '@nestjs/common';
import { DataController } from './data.controller';
import { DataService } from './data.service';
@Module({
controllers: [DataController],
providers: [DataService],
})
export class DataModule {}
```
--------------------------------
### Full Example with Comments and Context Menu
Source: https://handsontable.com/docs/react-data-grid/comments
A comprehensive example demonstrating how to enable the Comments plugin and pre-set comments on specific cells. It also enables the context menu for interactive comment management.
```jsx
import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
// register Handsontable's modules
registerAllModules();
const ExampleComponent = () => {
return (
);
};
export default ExampleComponent;
```
--------------------------------
### Editor Class Structure
Source: https://handsontable.com/docs/react-data-grid/cell-function
An example of how to define a custom cell editor as a class extending BaseEditor. The full lifecycle API is detailed in the Cell editor guide.
```javascript
// editor — a class; see the Cell editor guide for the full lifecycle API
class MyEditor extends BaseEditor { ... }
```
--------------------------------
### Get Copyable Text Data
Source: https://handsontable.com/docs/react-data-grid/api/data-map
Returns the data as tab-separated text, intended for clipboard copy to external applications. Specify start and end selection positions for a range.
```javascript
dataMap.getCopyableText(start, end);
```
--------------------------------
### Handsontable with Column Virtualization
Source: https://handsontable.com/docs/react-data-grid/column-virtualization
This example demonstrates how to set up Handsontable with a large dataset (1000x1000 cells) to leverage column virtualization. Ensure Handsontable modules are registered before use.
```javascript
import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
// register 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 ExampleComponent = () => {
return (
);
};
export default ExampleComponent;
```
--------------------------------
### NestJS Controller for Data Operations
Source: https://handsontable.com/docs/react-data-grid/recipes/data-management/server-side-nestjs
Defines a controller to handle incoming HTTP requests for data manipulation. This example includes endpoints for getting all items and a specific item by ID.
```typescript
import { Controller, Get, Param } from '@nestjs/common';
import { DataService } from './data.service';
@Controller('data')
export class DataController {
constructor(private readonly dataService: DataService) {}
@Get()
findAll(): string[] {
return this.dataService.findAll();
}
@Get(':id')
findOne(@Param('id') id: string): string {
return this.dataService.findOne(id);
}
}
```
--------------------------------
### Reacting to Row Creation Event
Source: https://handsontable.com/docs/react-data-grid/events-and-hooks
Use the `afterCreateRow` hook to execute code after new rows are added. This example logs the starting row index and the number of rows created.
```javascript
{
console.log(`${amount} row(s) were created, starting at index ${row}`);
}}/>
```
--------------------------------
### Basic Data Grid with Built-in Cell Types
Source: https://handsontable.com/docs/react-data-grid/cell-type
This example shows a basic data grid setup utilizing default cell types. Ensure the component is correctly imported and rendered.
```javascript
import React from 'react';
import DataGrid from 'react-data-grid';
const ExampleComponent = () => {
const columns = [
{ key: 'id', name: 'ID' },
{ key: 'title', name: 'Title' },
{ key: 'complete', name: 'Complete' },
];
const rows = [
{ id: 0, title: 'Example', complete: false },
{ id: 1, title: 'Another Example', complete: true },
];
return (
);
};
export default ExampleComponent;
```
--------------------------------
### Install Handsontable and React Wrapper
Source: https://handsontable.com/docs/react-data-grid/recipes/themes/base-theme
Install the necessary Handsontable packages and the React wrapper using pnpm. Ensure you are using the correct version numbers.
```bash
pnpm add handsontable@0.0.0-next-deba76c-20260408 @handsontable/react-wrapper@0.0.0-next-deba76c-20260408
```
--------------------------------
### Configure Nested Headers with Colspan
Source: https://handsontable.com/docs/react-data-grid/api/nested-headers
This example shows how to configure nested headers using an array of arrays, specifying colspan for header width. It illustrates a simpler nested header setup.
```javascript
nestedHeaders: [
['A', {label: 'B', colspan: 8}, 'C'],
['D', {label: 'E', colspan: 4}, {label: 'F', colspan: 4}, 'G'],
['H', 'I', 'J', 'K', 'L', 'M', 'N', 'R', 'S', 'T']
],
```
--------------------------------
### getOuterTopStartCorner
Source: https://handsontable.com/docs/react-data-grid/api/cell-range
Gets the top left (in LTR) or top right (in RTL) corner coordinates of the range. If the corner contains header coordinates (negative values), the top and start coordinates are pointed to that header.
```APIDOC
## getOuterTopStartCorner
### Description
Gets the top left (in LTR) or top right (in RTL) corner coordinates of your range. If the corner contains header coordinates (negative values), the top and start coordinates are pointed to that header.
### Method
GET
### Endpoint
_cellRange.getOuterTopStartCorner()
### Returns
- **CellCoords** - The coordinates of the outer top start corner.
```
--------------------------------
### Install Handsontable and React Wrapper
Source: https://handsontable.com/docs/react-data-grid/recipes/themes/fluent-ui
Install the necessary Handsontable packages and the React wrapper using npm. Ensure Handsontable versions are pinned for compatibility.
```bash
npm install handsontable @handsontable/react-wrapper @fluentui/react-components
```
--------------------------------
### getOuterTopEndCorner
Source: https://handsontable.com/docs/react-data-grid/api/cell-range
Gets the top right (in LTR) or top left (in RTL) corner coordinates of the range. If the corner contains header coordinates (negative values), the top and start coordinates are pointed to that header.
```APIDOC
## getOuterTopEndCorner
### Description
Gets the top right (in LTR) or top left (in RTL) corner coordinates of your range. If the corner contains header coordinates (negative values), the top and start coordinates are pointed to that header.
### Method
GET
### Endpoint
_cellRange.getOuterTopEndCorner()
### Returns
- **CellCoords** - The coordinates of the outer top end corner.
```
--------------------------------
### Configure Theme using Theme API with Runtime Features
Source: https://handsontable.com/docs/react-data-grid/migration-from-16.2-to-17.0
This example shows the 'after' state using the Theme API, allowing programmatic configuration of color schemes and density types at runtime.
```javascript
import { HotTable } from '@handsontable/react-wrapper';
import { mainTheme, registerTheme } from 'handsontable/themes';
const theme = registerTheme(mainTheme)
.setColorScheme('auto')
.setDensityType('default');
function App() {
return (
);
}
```
--------------------------------
### getOuterBottomStartCorner
Source: https://handsontable.com/docs/react-data-grid/api/cell-range
Gets the bottom left (in LTR) or bottom right (in RTL) corner coordinates of the range. If the corner contains header coordinates (negative values), the top and start coordinates are pointed to that header.
```APIDOC
## getOuterBottomStartCorner
### Description
Gets the bottom left (in LTR) or bottom right (in RTL) corner coordinates of your range. If the corner contains header coordinates (negative values), the top and start coordinates are pointed to that header.
### Method
GET
### Endpoint
_cellRange.getOuterBottomStartCorner()
### Returns
- **CellCoords** - The coordinates of the outer bottom start corner.
```
--------------------------------
### getOuterBottomEndCorner
Source: https://handsontable.com/docs/react-data-grid/api/cell-range
Gets the bottom right (in LTR) or bottom left (in RTL) corner coordinates of the range. If the corner contains header coordinates (negative values), the top and start coordinates are pointed to that header.
```APIDOC
## getOuterBottomEndCorner
### Description
Gets the bottom right (in LTR) or bottom left (in RTL) corner coordinates of your range. If the corner contains header coordinates (negative values), the top and start coordinates are pointed to that header.
### Method
GET
### Endpoint
_cellRange.getOuterBottomEndCorner()
### Returns
- **CellCoords** - The coordinates of the outer bottom end corner.
```
--------------------------------
### Initialize Handsontable with Data and Columns
Source: https://handsontable.com/docs/react-data-grid/recipes/column-management/column-visibility
Sets up the initial Handsontable instance with sample data and a full column configuration. This code is a prerequisite for managing column visibility.
```javascript
import { useCallback, useMemo, useState } from 'react';
import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
registerAllModules();
/* start:skip-in-preview */
const data = [
{ name: 'Alice Johnson', department: 'Engineering', role: 'Senior Engineer', salary: 95000, startDate: '2019-03-12', location: 'New York', status: 'Active' },
{ name: 'Bob Martinez', department: 'Marketing', role: 'Marketing Manager', salary: 78000, startDate: '2020-07-01', location: 'Chicago', status: 'Active' },
{ name: 'Carol Lee', department: 'Engineering', role: 'Tech Lead', salary: 115000, startDate: '2017-11-15', location: 'San Francisco', status: 'Active' },
{ name: 'David Kim', department: 'HR', role: 'HR Specialist', salary: 65000, startDate: '2021-02-28', location: 'Austin', status: 'On Leave' },
{ name: 'Eva Novak', department: 'Finance', role: 'Financial Analyst', salary: 82000, startDate: '2018-09-03', location: 'New York', status: 'Active' },
{ name: 'Frank Chen', department: 'Engineering', role: 'Junior Engineer', salary: 72000, startDate: '2022-05-16', location: 'Seattle', status: 'Active' },
{ name: 'Grace Okafor', department: 'Sales', role: 'Sales Executive', salary: 70000, startDate: '2020-01-20', location: 'Dallas', status: 'Active' },
{ name: 'Henry Walsh', department: 'Finance', role: 'Finance Director', salary: 130000, startDate: '2015-06-10', location: 'Chicago', status: 'Active' },
];
/* end:skip-in-preview */
// The full columns config is the immutable source of truth.
// Never mutate this array -- always derive a visible subset from it.
const allColumns = [
{ data: 'name', title: 'Name', type: 'text', width: 140 },
{ data: 'department', title: 'Department', type: 'text', width: 120 },
{ data: 'role', title: 'Role', type: 'text', width: 150 },
{
data: 'salary',
title: 'Salary',
type: 'numeric',
locale: 'en-US',
numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 },
width: 110,
},
{ data: 'startDate', title: 'Start Date', type: 'intl-date', locale: 'en-CA', dateFormat: { dateStyle: 'short' }, width: 120 },
{ data: 'location', title: 'Location', type: 'text', width: 120 },
{
data: 'status',
title: 'Status',
type: 'dropdown',
source: ['Active', 'On Leave', 'Inactive'],
width: 120,
},
];
const ExampleComponent = () => {
// Track which column indices (into allColumns) are currently visible.
// Start with all columns visible.
const [visibleIndices, setVisibleIndices] = useState(
() => new Set(allColumns.map((_, i) => i))
);
const handleToggle = useCallback((index) => {
setVisibleIndices((prev) => {
// Prevent hiding the last visible column.
if (prev.has(index) && prev.size === 1) {
return prev;
}
const next = new Set(prev);
if (prev.has(index)) {
next.delete(index);
} else {
next.add(index);
}
return next;
});
}, []);
const columns = useMemo(
() => allColumns.filter((_, i) => visibleIndices.has(i)),
[visibleIndices]
);
const colHeaders = useMemo(
() => allColumns.filter((_, i) => visibleIndices.has(i)).map((col) => col.title),
[visibleIndices]
);
return (
<>