React Data GridSelection

Select a single cell, a range of adjacent cells, or multiple non-adjacent ranges of cells.

Overview
Basic configuration
Select ranges
Get data from the selected ranges
Modify the selected cells
Style the selection area
Jump across the grid's edges
Related keyboard shortcuts
Related API reference

Overview

Selection enables you to select a single cell or ranges of cells within Handsontable. Once selected, you can retrieve data from the cell, edit the cell's contents, or change the style of the cell.

Basic configuration

With this feature, you can select single cells or ranges of cells across a grid. Easily retrieve the coordinates of the selected cells to clear or change the cells' content.

Use Cmd on Mac or Ctrl on Windows to select non-adjacent ranges of cells.

Select ranges

There are different modes in which you can use this plugin. Choose between selecting a single cell, a range of adjacent cells, and multiple non-adjacent ranges of cells.

Possible values of selectionMode:

single - You can select a single cell.
range - You can select multiple cells within a single rangeselected.
multiple - You can select multiple, non-adjacent ranges of cells.

{
  "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 { useRef } 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 hotRef = useRef(null);
  const selectOptionChangeCallback = (event) => {
    const hot = hotRef.current?.hotInstance;
    const value = event.target.value;
    const first = value.split(' ')[0].toLowerCase();

    hot?.updateSettings({ selectionMode: first });
  };

  return (
    <>
      <div className="controls">
        <label>
          <select
            id="selectOption"
            onChange={(...args) => selectOptionChangeCallback(...args)}
            defaultValue="multiple"
          >
            <option value="single">Single selection</option>
            <option value="range">Range selection</option>
            <option value="multiple">Multiple ranges selection</option>
          </select>
        </label>
      </div>
      <HotTable
        ref={hotRef}
        data={[
          ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],
          ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],
          ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],
          ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],
          ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],
          ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],
          ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],
          ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],
          ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],
        ]}
        width="auto"
        height="auto"
        colWidths={100}
        rowHeights={23}
        rowHeaders={true}
        colHeaders={true}
        selectionMode="multiple" // 'single', 'range' or 'multiple',
        autoWrapRow={true}
        autoWrapCol={true}
        licenseKey="non-commercial-and-evaluation"
      />
    </>
  );
};

export default ExampleComponent;

import { useRef } 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 hotRef = useRef(null);
  const selectOptionChangeCallback = (event) => {
    const hot = hotRef.current?.hotInstance;
    const value = event.target.value;
    const first = value.split(' ')[0].toLowerCase();

    hot?.updateSettings({ selectionMode: first });
  };

  return (
    <>
      <div className="controls">
        <label>
          <select
            id="selectOption"
            onChange={(...args) => selectOptionChangeCallback(...args)}
            defaultValue="multiple"
          >
            <option value="single">Single selection</option>
            <option value="range">Range selection</option>
            <option value="multiple">Multiple ranges selection</option>
          </select>
        </label>
      </div>
      <HotTable
        ref={hotRef}
        data={[
          ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],
          ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],
          ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],
          ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],
          ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],
          ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],
          ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],
          ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],
          ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],
        ]}
        width="auto"
        height="auto"
        colWidths={100}
        rowHeights={23}
        rowHeaders={true}
        colHeaders={true}
        selectionMode="multiple" // 'single', 'range' or 'multiple',
        autoWrapRow={true}
        autoWrapCol={true}
        licenseKey="non-commercial-and-evaluation"
      />
    </>
  );
};



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 "></div>

import { useRef } 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 hotRef = useRef(null);
  const selectOptionChangeCallback = (event) => {
    const hot = hotRef.current?.hotInstance;
    const value = event.target.value;
    const first = value.split(' ')[0].toLowerCase();

    hot?.updateSettings({ selectionMode: first });
  };

  return (
    <>
      <div className="controls">
        <label>
          <select
            id="selectOption"
            onChange={(...args) => selectOptionChangeCallback(...args)}
            defaultValue="multiple"
          >
            <option value="single">Single selection</option>
            <option value="range">Range selection</option>
            <option value="multiple">Multiple ranges selection</option>
          </select>
        </label>
      </div>
      <HotTable
        ref={hotRef}
        data={[
          ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],
          ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],
          ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],
          ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],
          ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],
          ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],
          ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],
          ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],
          ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],
        ]}
        width="auto"
        height="auto"
        colWidths={100}
        rowHeights={23}
        rowHeaders={true}
        colHeaders={true}
        selectionMode="multiple" // 'single', 'range' or 'multiple',
        autoWrapRow={true}
        autoWrapCol={true}
        licenseKey="non-commercial-and-evaluation"
      />
    </>
  );
};

export default ExampleComponent;

Get data from the selected ranges

To retrieve the selected cells as an array of arrays, you use the getSelected() or getSelectedRange() methods.

{
  "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 { useRef, useState } 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 hotRef = useRef(null);
  const [output, setOutput] = useState('');
  const getButtonClickCallback = () => {
    const hot = hotRef.current?.hotInstance;
    const selected = hot?.getSelected() || [];
    let data = [];

    if (selected.length === 1) {
      data = hot?.getData(...selected[0]) || [];
    } else {
      for (let i = 0; i < selected.length; i += 1) {
        const item = selected[i];

        data.push(hot?.getData(...item));
      }
    }

    setOutput(JSON.stringify(data));
  };

  return (
    <>
      <div className="example-controls-container">
        <div className="controls">
          <button id="getButton" onClick={() => getButtonClickCallback()}>
            Get data
          </button>
        </div>
        <output className="console" id="output">
          {output}
        </output>
      </div>
      <HotTable
        ref={hotRef}
        data={[
          ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],
          ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],
          ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],
          ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],
          ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],
          ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],
          ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],
          ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],
          ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],
        ]}
        width="auto"
        height="auto"
        colWidths={100}
        rowHeights={23}
        rowHeaders={true}
        colHeaders={true}
        outsideClickDeselects={false}
        selectionMode="multiple" // 'single', 'range' or 'multiple',
        autoWrapRow={true}
        autoWrapCol={true}
        licenseKey="non-commercial-and-evaluation"
      />
    </>
  );
};

export default ExampleComponent;

import { useRef, useState } 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 hotRef = useRef(null);
  const [output, setOutput] = useState('');
  const getButtonClickCallback = () => {
    const hot = hotRef.current?.hotInstance;
    const selected = hot?.getSelected() || [];
    let data = [];

    if (selected.length === 1) {
      data = hot?.getData(...selected[0]) || [];
    } else {
      for (let i = 0; i < selected.length; i += 1) {
        const item = selected[i];

        data.push(hot?.getData(...item));
      }
    }

    setOutput(JSON.stringify(data));
  };

  return (
    <>
      <div className="example-controls-container">
        <div className="controls">
          <button id="getButton" onClick={() => getButtonClickCallback()}>
            Get data
          </button>
        </div>
        <output className="console" id="output">
          {output}
        </output>
      </div>
      <HotTable
        ref={hotRef}
        data={[
          ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],
          ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],
          ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],
          ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],
          ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],
          ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],
          ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],
          ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],
          ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],
        ]}
        width="auto"
        height="auto"
        colWidths={100}
        rowHeights={23}
        rowHeaders={true}
        colHeaders={true}
        outsideClickDeselects={false}
        selectionMode="multiple" // 'single', 'range' or 'multiple',
        autoWrapRow={true}
        autoWrapCol={true}
        licenseKey="non-commercial-and-evaluation"
      />
    </>
  );
};



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

<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="example2" class="hot ht-theme-main-dark-auto "></div>

import { useRef, useState } 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 hotRef = useRef(null);
  const [output, setOutput] = useState('');
  const getButtonClickCallback = () => {
    const hot = hotRef.current?.hotInstance;
    const selected = hot?.getSelected() || [];
    let data = [];

    if (selected.length === 1) {
      data = hot?.getData(...selected[0]) || [];
    } else {
      for (let i = 0; i < selected.length; i += 1) {
        const item = selected[i];

        data.push(hot?.getData(...item));
      }
    }

    setOutput(JSON.stringify(data));
  };

  return (
    <>
      <div className="example-controls-container">
        <div className="controls">
          <button id="getButton" onClick={() => getButtonClickCallback()}>
            Get data
          </button>
        </div>
        <output className="console" id="output">
          {output}
        </output>
      </div>
      <HotTable
        ref={hotRef}
        data={[
          ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],
          ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],
          ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],
          ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],
          ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],
          ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],
          ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],
          ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],
          ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],
        ]}
        width="auto"
        height="auto"
        colWidths={100}
        rowHeights={23}
        rowHeaders={true}
        colHeaders={true}
        outsideClickDeselects={false}
        selectionMode="multiple" // 'single', 'range' or 'multiple',
        autoWrapRow={true}
        autoWrapCol={true}
        licenseKey="non-commercial-and-evaluation"
      />
    </>
  );
};

export default ExampleComponent;

Modify the selected cells

You may want to delete, format, or otherwise change the selected cells. For example, you can change a value or add CSS classes to the selected cells using the demo below.

{
  "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>

.c-red {
  color: red;
}

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 { useRef } 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 hotRef = useRef(null);
  const buttonClickCallback = () => {
    const hot = hotRef.current?.hotInstance;
    const selected = hot?.getSelected() || [];

    hot?.suspendRender();

    for (let index = 0; index < selected.length; index += 1) {
      const [row1, column1, row2, column2] = selected[index];
      const startRow = Math.max(Math.min(row1, row2), 0);
      const endRow = Math.max(row1, row2);
      const startCol = Math.max(Math.min(column1, column2), 0);
      const endCol = Math.max(column1, column2);

      for (let rowIndex = startRow; rowIndex <= endRow; rowIndex += 1) {
        for (
          let columnIndex = startCol;
          columnIndex <= endCol;
          columnIndex += 1
        ) {
          hot?.setDataAtCell(rowIndex, columnIndex, 'data changed');
          hot?.setCellMeta(rowIndex, columnIndex, 'className', 'c-red');
        }
      }
    }

    hot?.render();
    hot?.resumeRender();
  };

  return (
    <>
      <div className="controls">
        <button id="set-data-action" onClick={() => buttonClickCallback()}>
          Click to modify the selected cells
        </button>
      </div>
      <HotTable
        ref={hotRef}
        data={[
          ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],
          ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],
          ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],
          ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],
          ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],
          ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],
          ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],
          ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],
          ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],
        ]}
        width="auto"
        height="auto"
        colWidths={100}
        rowHeights={23}
        rowHeaders={true}
        colHeaders={true}
        outsideClickDeselects={false}
        selectionMode="multiple" // 'single', 'range' or 'multiple',
        autoWrapRow={true}
        autoWrapCol={true}
        licenseKey="non-commercial-and-evaluation"
      />
    </>
  );
};

export default ExampleComponent;

import { useRef } 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 hotRef = useRef(null);
  const buttonClickCallback = () => {
    const hot = hotRef.current?.hotInstance;
    const selected = hot?.getSelected() || [];

    hot?.suspendRender();

    for (let index = 0; index < selected.length; index += 1) {
      const [row1, column1, row2, column2] = selected[index];
      const startRow = Math.max(Math.min(row1, row2), 0);
      const endRow = Math.max(row1, row2);
      const startCol = Math.max(Math.min(column1, column2), 0);
      const endCol = Math.max(column1, column2);

      for (let rowIndex = startRow; rowIndex <= endRow; rowIndex += 1) {
        for (
          let columnIndex = startCol;
          columnIndex <= endCol;
          columnIndex += 1
        ) {
          hot?.setDataAtCell(rowIndex, columnIndex, 'data changed');
          hot?.setCellMeta(rowIndex, columnIndex, 'className', 'c-red');
        }
      }
    }

    hot?.render();
    hot?.resumeRender();
  };

  return (
    <>
      <div className="controls">
        <button id="set-data-action" onClick={() => buttonClickCallback()}>
          Click to modify the selected cells
        </button>
      </div>
      <HotTable
        ref={hotRef}
        data={[
          ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],
          ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],
          ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],
          ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],
          ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],
          ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],
          ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],
          ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],
          ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],
        ]}
        width="auto"
        height="auto"
        colWidths={100}
        rowHeights={23}
        rowHeaders={true}
        colHeaders={true}
        outsideClickDeselects={false}
        selectionMode="multiple" // 'single', 'range' or 'multiple',
        autoWrapRow={true}
        autoWrapCol={true}
        licenseKey="non-commercial-and-evaluation"
      />
    </>
  );
};



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

<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="example3" class="hot ht-theme-main-dark-auto "></div>

.c-red {
  color: red;
}

import { useRef } 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 hotRef = useRef(null);
  const buttonClickCallback = () => {
    const hot = hotRef.current?.hotInstance;
    const selected = hot?.getSelected() || [];

    hot?.suspendRender();

    for (let index = 0; index < selected.length; index += 1) {
      const [row1, column1, row2, column2] = selected[index];
      const startRow = Math.max(Math.min(row1, row2), 0);
      const endRow = Math.max(row1, row2);
      const startCol = Math.max(Math.min(column1, column2), 0);
      const endCol = Math.max(column1, column2);

      for (let rowIndex = startRow; rowIndex <= endRow; rowIndex += 1) {
        for (
          let columnIndex = startCol;
          columnIndex <= endCol;
          columnIndex += 1
        ) {
          hot?.setDataAtCell(rowIndex, columnIndex, 'data changed');
          hot?.setCellMeta(rowIndex, columnIndex, 'className', 'c-red');
        }
      }
    }

    hot?.render();
    hot?.resumeRender();
  };

  return (
    <>
      <div className="controls">
        <button id="set-data-action" onClick={() => buttonClickCallback()}>
          Click to modify the selected cells
        </button>
      </div>
      <HotTable
        ref={hotRef}
        data={[
          ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],
          ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],
          ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],
          ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],
          ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],
          ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],
          ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],
          ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],
          ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],
        ]}
        width="auto"
        height="auto"
        colWidths={100}
        rowHeights={23}
        rowHeaders={true}
        colHeaders={true}
        outsideClickDeselects={false}
        selectionMode="multiple" // 'single', 'range' or 'multiple',
        autoWrapRow={true}
        autoWrapCol={true}
        licenseKey="non-commercial-and-evaluation"
      />
    </>
  );
};

export default ExampleComponent;

Style the selection area

You can easily change the background color, using CSS styles. The main, light blue background color is defined in the .area class.

For non-adjacent selection, multiple classes are making each level a bit darker. These classes are called area-1, area-2, etc.

Unfortunately, there is no easy way to change the border color of the selection.

Jump across the grid's edges

When you use keyboard navigation to cross an edge of the grid, you can set cell selection to jump to the opposite edge.

Jump across vertical edges

To enable jumping across the left and right edges:

Set the autoWrapRow configuration option to true.

To jump across a vertical edge:

When cell selection is on a row's first cell, press the left arrow key.
When cell selection is on a row's last cell, press the right arrow key, or press Tab.

Jump across horizontal edges

To enable jumping across the top and bottom edges:

Set the autoWrapCol configuration option to true.

To jump across a horizontal edge:

When cell selection is on a column's first cell, press the up arrow key.
When cell selection is on a column's last cell, press the down arrow key, or press Enter.

Windows	macOS	Action	Excel	Sheets
`Ctrl`+`A`	`Cmd`+`A`	Select all cells	✓	✓
`Ctrl`+`Shift`+`Space`	`Cmd`+`Shift`+`Space`	Select all cells and headers	✓	✓
`Ctrl`+`Space`	`Ctrl`+`Space`	Select the entire column	✓	✓
`Shift`+`Space`	`Shift`+`Space`	Select the entire row	✓	✓
`Ctrl`+`Shift`+`↑`	`Cmd`+`Shift`+`↑`	Extend the selection to the first cell of the current column^**	✓	✓
`Ctrl`+`Shift`+`↓`	`Cmd`+`Shift`+`↓`	Extend the selection to the last cell of the current column^**	✓	✓
`Ctrl`+`Shift`+`←`	`Cmd`+`Shift`+`←`	Extend the selection to the leftmost cell of the current row^**	✓	✓
`Ctrl`+`Shift`+`→`	`Cmd`+`Shift`+`→`	Extend the selection to the rightmost cell of the current row^**	✓	✓
`Shift` + Arrow keys	`Shift` + Arrow keys	Extend the selection by one cell	✓	✓
`Shift`+`Home`	`Shift`+`Home`	Extend the selection to the first non-frozen cell of the current row^*	✓	✗
`Shift`+`End`	`Shift`+`End`	Extend the selection to the last non-frozen cell of the current row^*	✗	✗
`Shift`+`Page Up`	`Shift`+`Page Up`	Extend the selection by one screen up	✓	✓
`Shift`+`Page Down`	`Shift`+`Page Down`	Extend the selection by one screen down	✓	✓
`Ctrl`+`Enter`	`Cmd`+`Enter`	Fill the selected range of cells with the value of the active cell	✗	✓
`Delete`	`Delete`	Clear the contents of the selected cells	✓	✓
`Backspace`	`Backspace`	Clear the contents of the selected cells	✓	✓

^* This action depends on your layout direction.
^** In case of multiple selection layers, only the last selection layer gets extended.