React Data GridHandsontable cell type

Add a spreadsheet editor in a popup, by using the Handsontable cell type.

Usage
Basic example
Related articles
- Related guides
- Related API reference

Usage

HOT-in-HOT opens by any of the following:

F2 or Enter key is pressed while the cell is selected
The triangle icon is clicked
The cell content is double clicked

While HOT-in-HOT is opened, the text field above the HOT-in-HOT remains focused at all times.

Keyboard bindings while the HOT-in-HOT is opened:

Escape - close editor and cancel change.
Enter - close editor and apply change*, move the selection in the main HOT downwards or according to the enterMoves setting.
Tab - behaves as the Enter key, but move the selection in the main HOT to the right or to the left (depending on your layoutDirection setting) or according to the tabMovessetting.
Arrow Down - move the selection in HOT-in-HOT downwards. If the last row was selected, this has no effect.
Arrow Up - move the selection in HOT-in-HOT upwards. If the first row was selected, deselect. If HOT-in-HOT was deselected, behave as the Enter key but move the selection in the main HOT upwards.
Arrow Right - move the text cursor in the text field to the left. If the text cursor was at the start position, behave as the Enter key but move the selection in the main HOT to the left.
Arrow Left - move the text cursor in the text field to the right. If the text cursor was at the end position, behave as the Tab key.

Basic example

{
  "name": "handsontable",
  "version": "1.0.0",
  "description": "",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "hyperformula": "^2.4.0",
    "handsontable": "15.0",
    "@handsontable/react-wrapper": "15.0"
  },
  
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Handsontable</title>
  </head>

  <body>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="root"></div>
  </body>
</html>

import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";
import ExampleComponent from "./ExampleComponent";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <ExampleComponent />
  </StrictMode>
);

import React from "react";
import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  const colorData = [
    ['yellow'],
    ['red'],
    ['orange'],
    ['green'],
    ['blue'],
    ['gray'],
    ['black'],
    ['white'],
  ];

  const manufacturerData = [
    { name: 'BMW', country: 'Germany', owner: 'Bayerische Motoren Werke AG' },
    { name: 'Chrysler', country: 'USA', owner: 'Chrysler Group LLC' },
    { name: 'Nissan', country: 'Japan', owner: 'Nissan Motor Company Ltd' },
    { name: 'Suzuki', country: 'Japan', owner: 'Suzuki Motor Corporation' },
    { name: 'Toyota', country: 'Japan', owner: 'Toyota Motor Corporation' },
    { name: 'Volvo', country: 'Sweden', owner: 'Zhejiang Geely Holding Group' },
  ];

  return (
    <HotTable
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
      data={[
        ['Tesla', 2017, 'black', 'black'],
        ['Nissan', 2018, 'blue', 'blue'],
        ['Chrysler', 2019, 'yellow', 'black'],
        ['Volvo', 2020, 'white', 'gray'],
      ]}
      colHeaders={['Car', 'Year', 'Chassis color', 'Bumper color']}
      columns={[
        {
          type: 'handsontable',
          handsontable: {
            colHeaders: ['Marque', 'Country', 'Parent company'],
            autoColumnSize: true,
            data: manufacturerData,
            getValue() {
              const selection = this.getSelectedLast();

              // Get the manufacturer name of the clicked row and ignore header
              // coordinates (negative values)
              return this.getSourceDataAtRow(Math.max(selection[0], 0)).name;
            },
          },
        },
        { type: 'numeric' },
        {
          type: 'handsontable',
          handsontable: {
            colHeaders: false,
            data: colorData,
          },
        },
        {
          type: 'handsontable',
          handsontable: {
            colHeaders: false,
            data: colorData,
          },
        },
      ]}
    />
  );
};

export default ExampleComponent;

import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  const colorData = [
    ['yellow'],
    ['red'],
    ['orange'],
    ['green'],
    ['blue'],
    ['gray'],
    ['black'],
    ['white'],
  ];

  const manufacturerData = [
    { name: 'BMW', country: 'Germany', owner: 'Bayerische Motoren Werke AG' },
    { name: 'Chrysler', country: 'USA', owner: 'Chrysler Group LLC' },
    { name: 'Nissan', country: 'Japan', owner: 'Nissan Motor Company Ltd' },
    { name: 'Suzuki', country: 'Japan', owner: 'Suzuki Motor Corporation' },
    { name: 'Toyota', country: 'Japan', owner: 'Toyota Motor Corporation' },
    { name: 'Volvo', country: 'Sweden', owner: 'Zhejiang Geely Holding Group' },
  ];

  return (
    <HotTable
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
      data={[
        ['Tesla', 2017, 'black', 'black'],
        ['Nissan', 2018, 'blue', 'blue'],
        ['Chrysler', 2019, 'yellow', 'black'],
        ['Volvo', 2020, 'white', 'gray'],
      ]}
      colHeaders={['Car', 'Year', 'Chassis color', 'Bumper color']}
      columns={[
        {
          type: 'handsontable',
          handsontable: {
            colHeaders: ['Marque', 'Country', 'Parent company'],
            autoColumnSize: true,
            data: manufacturerData,
            getValue() {
              const selection = this.getSelectedLast();

              // Get the manufacturer name of the clicked row and ignore header
              // coordinates (negative values)
              return this.getSourceDataAtRow(Math.max(selection[0], 0)).name;
            },
          },
        },
        { type: 'numeric' },
        {
          type: 'handsontable',
          handsontable: {
            colHeaders: false,
            data: colorData,
          },
        },
        {
          type: 'handsontable',
          handsontable: {
            colHeaders: false,
            data: colorData,
          },
        },
      ]}
    />
  );
};



ReactDOM.render(<ExampleComponent />, document.getElementById("example1"));

<script src="https://cdn.jsdelivr.net/npm/handsontable@15.0/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@15.0/styles/handsontable.min.css" /> 
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@15.0/styles/ht-theme-main.css" /> 
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@15.0/styles/ht-theme-horizon.css" /> 
<script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react-wrapper@15.0/dist/react-handsontable.min.js"></script>
<script src="https://handsontable.com/docs/scripts/fixer.js"></script>

<div id="example1" class="hot ht-theme-main-dark-auto docs-height-small"></div>

import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  const colorData = [
    ['yellow'],
    ['red'],
    ['orange'],
    ['green'],
    ['blue'],
    ['gray'],
    ['black'],
    ['white'],
  ];

  const manufacturerData = [
    { name: 'BMW', country: 'Germany', owner: 'Bayerische Motoren Werke AG' },
    { name: 'Chrysler', country: 'USA', owner: 'Chrysler Group LLC' },
    { name: 'Nissan', country: 'Japan', owner: 'Nissan Motor Company Ltd' },
    { name: 'Suzuki', country: 'Japan', owner: 'Suzuki Motor Corporation' },
    { name: 'Toyota', country: 'Japan', owner: 'Toyota Motor Corporation' },
    { name: 'Volvo', country: 'Sweden', owner: 'Zhejiang Geely Holding Group' },
  ];

  return (
    <HotTable
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
      data={[
        ['Tesla', 2017, 'black', 'black'],
        ['Nissan', 2018, 'blue', 'blue'],
        ['Chrysler', 2019, 'yellow', 'black'],
        ['Volvo', 2020, 'white', 'gray'],
      ]}
      colHeaders={['Car', 'Year', 'Chassis color', 'Bumper color']}
      columns={[
        {
          type: 'handsontable',
          handsontable: {
            colHeaders: ['Marque', 'Country', 'Parent company'],
            autoColumnSize: true,
            data: manufacturerData,
            getValue() {
              const selection = this.getSelectedLast();

              // Get the manufacturer name of the clicked row and ignore header
              // coordinates (negative values)
              return this.getSourceDataAtRow(Math.max(selection[0], 0)).name;
            },
          },
        },
        { type: 'numeric' },
        {
          type: 'handsontable',
          handsontable: {
            colHeaders: false,
            data: colorData,
          },
        },
        {
          type: 'handsontable',
          handsontable: {
            colHeaders: false,
            data: colorData,
          },
        },
      ]}
    />
  );
};

export default ExampleComponent;

Cell type

React Data GridHandsontable cell type

Usage

Basic example

Related articles

Related guides

Related API reference