React Data Grid Merge cells

Table of contents

• Overview
• How to merge cells
• Related keyboard shortcuts
• Related API reference

Overview

The merging cells feature enables you to combine the contents of two or more cells to create a new larger cell that spans several columns. Particularly useful when you have data that's length is greater than the width of the column. For example, a license id that's length is so long that it needs more than one column width to view it in its entirety.

How to merge cells

To enable the merge cells feature, set the mergeCells option to true or to an array.

To initialize Handsontable with predefined merged cells, provide merged cells details in form of an array:

mergeCells={[{ row: 1, col: 1, rowspan: 2, colspan: 2 }]}

import Handsontable from 'handsontable'; import ReactDOM from 'react-dom'; import { HotTable } from '@handsontable/react'; import { registerAllModules } from 'handsontable/registry'; import 'handsontable/dist/handsontable.full.min.css'; // register Handsontable's modules registerAllModules(); const ExampleComponent = () => { return ( <HotTable data={Handsontable.helper.createSpreadsheetData(100, 50)} height={320} colWidths={47} rowHeaders={true} colHeaders={true} contextMenu={true} mergeCells={[ { row: 1, col: 1, rowspan: 3, colspan: 3 }, { row: 3, col: 4, rowspan: 2, colspan: 2 }, { row: 5, col: 6, rowspan: 3, colspan: 3 } ]} licenseKey="non-commercial-and-evaluation" /> ); }; ReactDOM.render(<ExampleComponent />, document.getElementById('example1')); <script src="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.css" /> <script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@handsontable/react@12.1/dist/react-handsontable.js"></script> <script src="https://handsontable.com/docs/12.1/scripts/fixer.js"></script> <script src="https://handsontable.com/docs/12.1/scripts/helpers.js"></script> <div id="example1" class="hot "></div>

import Handsontable from 'handsontable';
import ReactDOM from 'react-dom';
import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      data={Handsontable.helper.createSpreadsheetData(100, 50)}
      height={320}
      colWidths={47}
      rowHeaders={true}
      colHeaders={true}
      contextMenu={true}
      mergeCells={[
        { row: 1, col: 1, rowspan: 3, colspan: 3 },
        { row: 3, col: 4, rowspan: 2, colspan: 2 },
        { row: 5, col: 6, rowspan: 3, colspan: 3 }
      ]}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

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

Related keyboard shortcuts

Windows	macOS	Action	Excel	Sheets
Ctrl + M	Ctrl + M	Merge or unmerge the selected cells	✗	✗

Related API reference

• Configuration options:
  • mergeCells
• Hooks:
  • afterMergeCells
  • afterUnmergeCells
  • beforeMergeCells
  • beforeUnmergeCells
• Plugins:
  • MergeCells