JavaScript Data GridMerge cells

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

Overview
How to merge cells
Optimizing rendering of the wide/tall merged 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 }]

0, 0

0, 1

0, 2

0, 3

0, 4

0, 5

0, 6

0, 7

0, 8

0, 9

0, 10

0, 11

0, 12

0, 13

0, 14

0, 15

0, 16

0, 17

0, 18

0, 19

0, 20

0, 21

0, 22

0, 23

0, 24

0, 25

0, 26

0, 27

1, 0

1, 1

1, 4

1, 5

1, 6

1, 7

1, 8

1, 9

1, 10

1, 11

1, 12

1, 13

1, 14

1, 15

1, 16

1, 17

1, 18

1, 19

1, 20

1, 21

1, 22

1, 23

1, 24

1, 25

1, 26

1, 27

2, 0

2, 4

2, 5

2, 6

2, 7

2, 8

2, 9

2, 10

2, 11

2, 12

2, 13

2, 14

2, 15

2, 16

2, 17

2, 18

2, 19

2, 20

2, 21

2, 22

2, 23

2, 24

2, 25

2, 26

2, 27

3, 0

3, 4

3, 6

3, 7

3, 8

3, 9

3, 10

3, 11

3, 12

3, 13

3, 14

3, 15

3, 16

3, 17

3, 18

3, 19

3, 20

3, 21

3, 22

3, 23

3, 24

3, 25

3, 26

3, 27

4, 0

4, 1

4, 2

4, 3

4, 6

4, 7

4, 8

4, 9

4, 10

4, 11

4, 12

4, 13

4, 14

4, 15

4, 16

4, 17

4, 18

4, 19

4, 20

4, 21

4, 22

4, 23

4, 24

4, 25

4, 26

4, 27

5, 0

5, 1

5, 2

5, 3

5, 4

5, 5

5, 6

5, 9

5, 10

5, 11

5, 12

5, 13

5, 14

5, 15

5, 16

5, 17

5, 18

5, 19

5, 20

5, 21

5, 22

5, 23

5, 24

5, 25

5, 26

5, 27

6, 0

6, 1

6, 2

6, 3

6, 4

6, 5

6, 9

6, 10

6, 11

6, 12

6, 13

6, 14

6, 15

6, 16

6, 17

6, 18

6, 19

6, 20

6, 21

6, 22

6, 23

6, 24

6, 25

6, 26

6, 27

7, 0

7, 1

7, 2

7, 3

7, 4

7, 5

7, 9

7, 10

7, 11

7, 12

7, 13

7, 14

7, 15

7, 16

7, 17

7, 18

7, 19

7, 20

7, 21

7, 22

7, 23

7, 24

7, 25

7, 26

7, 27

8, 0

8, 1

8, 2

8, 3

8, 4

8, 5

8, 6

8, 7

8, 8

8, 9

8, 10

8, 11

8, 12

8, 13

8, 14

8, 15

8, 16

8, 17

8, 18

8, 19

8, 20

8, 21

8, 22

8, 23

8, 24

8, 25

8, 26

8, 27

9, 0

9, 1

9, 2

9, 3

9, 4

9, 5

9, 6

9, 7

9, 8

9, 9

9, 10

9, 11

9, 12

9, 13

9, 14

9, 15

9, 16

9, 17

9, 18

9, 19

9, 20

9, 21

9, 22

9, 23

9, 24

9, 25

9, 26

9, 27

10, 0

10, 1

10, 2

10, 3

10, 4

10, 5

10, 6

10, 7

10, 8

10, 9

10, 10

10, 11

10, 12

10, 13

10, 14

10, 15

10, 16

10, 17

10, 18

10, 19

10, 20

10, 21

10, 22

10, 23

10, 24

10, 25

10, 26

10, 27

11, 0

11, 1

11, 2

11, 3

11, 4

11, 5

11, 6

11, 7

11, 8

11, 9

11, 10

11, 11

11, 12

11, 13

11, 14

11, 15

11, 16

11, 17

11, 18

11, 19

11, 20

11, 21

11, 22

11, 23

11, 24

11, 25

11, 26

11, 27

12, 0

12, 1

12, 2

12, 3

12, 4

12, 5

12, 6

12, 7

12, 8

12, 9

12, 10

12, 11

12, 12

12, 13

12, 14

12, 15

12, 16

12, 17

12, 18

12, 19

12, 20

12, 21

12, 22

12, 23

12, 24

12, 25

12, 26

12, 27

13, 0

13, 1

13, 2

13, 3

13, 4

13, 5

13, 6

13, 7

13, 8

13, 9

13, 10

13, 11

13, 12

13, 13

13, 14

13, 15

13, 16

13, 17

13, 18

13, 19

13, 20

13, 21

13, 22

13, 23

13, 24

13, 25

13, 26

13, 27

{
    "name": "handsontable",
    "version": "1.0.0",
    "description": "",
    "dependencies": {
      "hyperformula": "^3.0.0",
      "handsontable": "15.1"
    }
  }

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Handsontable</title>
    </head>
  
    <body>
      <div id="example1" class="hot ht-theme-main " ></div>
    </body>
  </html>

import './styles.css'
import Handsontable from 'handsontable';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

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

const container = document.querySelector('#example1');

new Handsontable(container, {
  data,
  height: 320,
  colWidths: 50,
  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 },
  ],
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});

import Handsontable from 'handsontable';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

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

const container = document.querySelector('#example1');

new Handsontable(container, {
  data,
  height: 320,
  colWidths: 50,
  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 },
  ],
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});

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

<div id="example1" class="hot ht-theme-main " ></div>

Code

import Handsontable from 'handsontable';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

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

const container = document.querySelector('#example1');

new Handsontable(container, {
  data,
  height: 320,
  colWidths: 50,
  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 },
  ],
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});

Optimizing rendering of the wide/tall merged cells

When cells span thousands of rows or columns, scrolling may feel slower compared to unmerged cells. To improve performance, consider enabling the dedicated virtualization feature for merged cells, which is disabled by default.

To enable the merged cells virtualization mode, enable the virtualized option:

mergeCells: {
  virtualized: true,
  cells: [{ row: 1, col: 1, rowspan: 200, colspan: 2 }]
}

The example below uses virtualized merged cells. It's also recommended to increase the buffer of rendered rows/columns to minimize the flickering effects.