Handsontable

https://handsontable.com/docs/react-data-grid/
Admin
A JavaScript data grid component for web applications, offering extensive features for data...
Tokens:798,241
Snippets:4,981
Trust Score:10
Update:2 months ago
Show doc for...
Tokens:
Raw
### Implement custom pagination with Handsontable

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

This example shows the setup for a Handsontable instance with data and the necessary module registration.

```javascript
1
import React, { useRef, useState, useEffect } from 'react';
2
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

5
// register Handsontable's modules
6
registerAllModules();
7

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

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

### Install dependencies

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

Install the required packages for Handsontable and Fluent UI.

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

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

### Install dependencies

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

Run the bundle install command to install the newly added gems.

```bash
bundle install
```

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

### Install Dependencies

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

Install the required Pikaday fork and moment library.

```bash
npm install @handsontable/pikaday moment
```

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

### Install Dependencies

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

Install the necessary packages for date handling and the date picker.

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

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

### Setup Handsontable React imports and data

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

Initializes the necessary imports, registers Handsontable modules, and defines the dataset used in the example.

```javascript
import React, { useRef, useState, useEffect } from 'react';
import { HotTable, HotColumn, HotTableRef } 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 },
];
```

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

### Install Dependencies

Source: https://handsontable.com/docs/react-data-grid/recipes/cell-types/moment-date

Command to install the required Moment.js and Pikaday libraries.

```bash
npm install moment @handsontable/pikaday
```

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

### Install Moment.js

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

Install the required dependency via npm.

```bash
npm install moment
```

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

### install

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

Initializes the notification host.

```APIDOC
## install()

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

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

### Install Dependencies

Source: https://handsontable.com/docs/react-data-grid/recipes/import-export/export-to-pdf

Install the required libraries via npm.

```bash
npm install jspdf jspdf-autotable
```

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

### Install Dependencies

Source: https://handsontable.com/docs/react-data-grid/recipes/cell-types/color-picker-angular

Install the required Handsontable React wrapper and the react-colorful library.

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

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

### Install Base Web dependencies

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

Install Base Web and Styletron if you are setting up a new project.

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

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

### Install Dependencies

Source: https://handsontable.com/docs/react-data-grid/recipes/cell-types/rating-angular

Install the required Handsontable packages for React.

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

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

### Install Handsontable

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

Install the Handsontable package via npm.

```bash
npm install handsontable
```

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

### Install project dependencies

Source: https://handsontable.com/docs/react-data-grid/recipes/data-management/server-side-supabase

Commands to initialize a Vite React project and install the required Handsontable and Supabase packages.

```bash
npm create vite@latest my-inventory-app -- --template react-ts
cd my-inventory-app
npm install handsontable @handsontable/react-wrapper @supabase/supabase-js
```

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

### Full component setup and filter logic

Source: https://handsontable.com/docs/react-data-grid/recipes/filtering-search/multi-column-filter-panel

Complete setup including imports, data definition, and the logic for applying filters via the Handsontable filters plugin.

```typescript
import { useRef, type ReactNode } from 'react';
import { HotTable, HotTableRef } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
import './example1.css';


registerAllModules();


/* start:skip-in-preview */
const sourceData = [
  { name: 'Trail Bike', category: 'Bikes', price: 1499, stock: 12 },
  { name: 'Road Helmet', category: 'Safety', price: 89, stock: 42 },
  { name: 'Flat Pedals', category: 'Components', price: 59, stock: 80 },
  { name: 'Hydration Pack', category: 'Accessories', price: 129, stock: 23 },
  { name: 'Brake Pads', category: 'Components', price: 25, stock: 150 },
  { name: 'Cycling Glasses', category: 'Accessories', price: 79, stock: 33 },
  { name: 'Chain Lube', category: 'Maintenance', price: 16, stock: 99 },
  { name: 'Torque Wrench', category: 'Maintenance', price: 139, stock: 14 },
  { name: 'Kids Helmet', category: 'Safety', price: 54, stock: 20 },
  { name: 'Gravel Bike', category: 'Bikes', price: 2199, stock: 7 },
];
/* end:skip-in-preview */


type FilterLabelProps = {
  label: string;
  children: ReactNode;
};


const FilterLabel = ({ label, children }: FilterLabelProps) => (
  <label className="filter-label">
    {label}
    {children}
  </label>
);


const ExampleComponent = () => {
  const hotRef = useRef<HotTableRef>(null);
  const nameRef = useRef<HTMLInputElement>(null);
  const categoryRef = useRef<HTMLSelectElement>(null);
  const minPriceRef = useRef<HTMLInputElement>(null);
  const maxPriceRef = useRef<HTMLInputElement>(null);


  const applyFilters = () => {
    const hot = hotRef.current?.hotInstance;


    if (!hot) {
      return;
    }


    const name = nameRef.current?.value ?? '';
    const category = categoryRef.current?.value ?? '';
    const minPrice = minPriceRef.current?.value ?? '';
    const maxPrice = maxPriceRef.current?.value ?? '';
    const filtersPlugin = hot.getPlugin('filters');


    filtersPlugin.clearConditions();


    if (category) {
      filtersPlugin.addCondition(1, 'eq', [category]);
    }


    if (name.trim()) {
      filtersPlugin.addCondition(0, 'contains', [name.trim()]);
    }


    if (minPrice && maxPrice) {
      const lowerBound = Number(minPrice);
      const upperBound = Number(maxPrice);
```

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

### Style the example container

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

CSS styles for the container holding the pagination example controls.

```css
.example-modify-pagedata-container {
  display: flex;
  flex-direction: column;
  align-items: self-start;
  background: transparent;
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 12px 30px;
}
```

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

### Install Handsontable and Ant Design dependencies

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

Run this command in your project root to install the necessary packages.

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

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

### Install Handsontable via Package Manager

Source: https://handsontable.com/docs/react-data-grid/installation

Commands to install the core Handsontable library and the React wrapper using common package managers.

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

```bash
yarn add handsontable @handsontable/react-wrapper
```

```bash
pnpm add handsontable @handsontable/react-wrapper
```

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

### Install Handsontable dependencies

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

Install the required Handsontable packages in your project root.

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

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

### Install Chart.js

Source: https://handsontable.com/docs/react-data-grid/recipes/real-time/chartjs-sync

Use npm to install the library or include it via CDN for browser-based projects.

```bash
npm install chart.js
```

```html
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
```

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

### Install Handsontable dependencies

Source: https://handsontable.com/docs/react-data-grid/vue-nuxt

Install the required Handsontable and Vue 3 wrapper packages.

```bash
npm install handsontable @handsontable/vue3
```

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

### Install Handsontable React Wrapper

Source: https://handsontable.com/docs/react-data-grid/recipes/cell-types/feedback-angular

Install the required package to use Handsontable with React.

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

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

### Install GraphQL PHP Library

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

Command to install the webonyx/graphql-php package for GraphQL API support.

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

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

### Install Handsontable and MUI dependencies

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

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

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

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

### Handsontable React implementation

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

Example of setting up the HotTable component with data and modules.

```javascript

1
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const data = [
100 collapsed lines
8
  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
9
  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
10
  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
11
  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
12
  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
13
  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
14
  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
15
  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
16
  { 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

```

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

### Implement pagination in React

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

Basic setup for using Handsontable with pagination in a React application.

```javascript
1
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const data = [
100 collapsed lines
8
  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
9
  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
10
  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
11
  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
12
  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
13
  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
14
  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
15
  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
16
  { 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
```

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

### Modify current page data with React

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

This example demonstrates setting up a Handsontable instance in React with data and necessary module registration.

```javascript
import React, { useRef } 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 },
  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false }]
```

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

### Importing the Pagination module

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

Required imports and plugin registration to enable pagination functionality in a modular Handsontable setup.

```javascript
1
// import the base module
2
import Handsontable from 'handsontable/base';
3

4
// import the Pagination plugin
5
import { registerPlugin, Pagination } from 'handsontable/plugins';
6

7
// register the Pagination plugin
8
registerPlugin(Pagination);
```

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

### Full component implementation

Source: https://handsontable.com/docs/react-data-grid/row-trimming

A complete example showing the setup of the HotTable component with row trimming enabled.

```javascript
import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      data={[
        ['A1', 'B1', 'C1', 'D1'],
        ['A2', 'B2', 'C2', 'D2'],
        ['A3', 'B3', 'C3', 'D3'],
        ['A4', 'B4', 'C4', 'D4'],
        ['A5', 'B5', 'C5', 'D5'],
        ['A6', 'B6', 'C6', 'D6'],
        ['A7', 'B7', 'C7', 'D7'],
        ['A8', 'B8', 'C8', 'D8'],
        ['A9', 'B9', 'C9', 'D9'],
      ]}
      colHeaders={true}
      rowHeaders={true}
      trimRows={[1, 2, 5]}
      height="auto"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

export default ExampleComponent;
```

```typescript
import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      data={[
        ['A1', 'B1', 'C1', 'D1'],
        ['A2', 'B2', 'C2', 'D2'],
        ['A3', 'B3', 'C3', 'D3'],
        ['A4', 'B4', 'C4', 'D4'],
        ['A5', 'B5', 'C5', 'D5'],
        ['A6', 'B6', 'C6', 'D6'],
        ['A7', 'B7', 'C7', 'D7'],
        ['A8', 'B8', 'C8', 'D8'],
        ['A9', 'B9', 'C9', 'D9'],
      ]}
      colHeaders={true}
      rowHeaders={true}
      trimRows={[1, 2, 5]}
      height="auto"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

export default ExampleComponent;
```

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

### Bootstrap the project

Source: https://handsontable.com/docs/react-data-grid/recipes/data-management/server-side-expressjs

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

```bash
1
bash setup.sh
2
# or: make setup
```
Tokens:
Raw