React Data Grid Merge cells

Merge adjacent cells, using the Ctrl + M shortcut or the context menu. Control merged cells, using Handsontable's API.

In this article

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

Overview

By merging, you can combine two or more adjacent cells into a single cell that spans several rows or columns.

Handsontable merges cells in the same way as Microsoft Excel: keeps only the upper-left value of the selected range and clears other values.

Cell merging happens on Handsontable's visual layer and doesn't affect your source data structure.

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 { HotTable } from '@handsontable/react'; import { registerAllModules } from 'handsontable/registry'; import 'handsontable/dist/handsontable.full.min.css'; // register Handsontable's modules registerAllModules(); // generate an array of arrays with dummy data const data = new Array(100) // number of rows .fill() .map((_, row) => new Array(50) // number of columns .fill() .map((_, column) => `${row}, ${column}`) ); export const ExampleComponent = () => { return ( <HotTable data={data} 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@13.0/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@13.0/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@13.0/dist/react-handsontable.min.js"></script> <script src="https://handsontable.com/docs/13.0/scripts/fixer.js"></script> <div id="example1" class="hot "></div>

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

// register Handsontable's modules
registerAllModules();

// generate an array of arrays with dummy data
const data = new Array(100) // number of rows
  .fill()
  .map((_, row) => new Array(50) // number of columns
    .fill()
    .map((_, column) => `${row}, ${column}`)
  );

export const ExampleComponent = () => {
  return (
    <HotTable
      data={data}
      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"
    />
  );
};

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