Merged Cells

Jspreadsheet supports creating and managing merged cells in your spreadsheets.

Documentation

Methods

The following methods provide programmatic control over merged cells:

Method	Description
`setMerge`	Set the defined merged cell by the number of columns and rows given. `setMerge(cells: string\|object, colspan?: number, rowspan?: number) => void`
`getMerge`	Get a merged cell or all merge cells. `getMerge(cells?: string) => object \| null`
`removeMerge`	Remove the merged cells by the cell name. `removeMerge(cells: string\|object) => void`
`destroyMerge`	Remove all merged cells. `destroyMerge() => void`

Events

The following events are triggered during merged cell operations:

Event	Description
`onmerge`	`onmerge(worksheet: object, newValue: array, oldValue: array) => void`

Initial Settings

Configure default merged cells during spreadsheet initialization:

Property	Description
`mergeCells?: object`	Define initial default merged cells during initialization

Known Limitations

Merged cells spanning hidden or frozen rows and columns may produce unexpected results. These limitations will be addressed in future releases.

Examples

This example demonstrates initializing merged cells and programmatically managing merge operations.

Open this merged cells example on JSFiddle.

<html>
<script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v12/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

<div id="spreadsheet"></div>

<p><div id="log"></div></p>

<input type="button" value="setMerge('A3', 2, 3)" id="btn1" />
<input type="button" value="removeMerge('A3')" id="btn2" />
<input type="button" value="Get all merged cells" id="btn3" />
<input type="button" value="Destroy all merged" id="btn4" />

<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NzEzZDhlNzhjNmY4YmNlOWJhMjliYzU3MGNjNDQyZGI3YWY5NDU0YTZhZjRkZGY4YjNmZTUyYWY0MTFkMWI3M2VmMjE2NDZjMmUxNWQ3MWNlZWU3OTZmY2VlNGE5NDI1MjRmZTQ0ZjNmNmVhMDU4NGI3ZjNiNzg3YTQ3NzdlZjAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNelUwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

// Create the spreadsheet
let table = jspreadsheet(document.getElementById('spreadsheet'), {
    toolbar: true,
    worksheets: [{
        data: [
            ['Mazda', 2001, 2000, '2006-01-01 12:00:00'],
            ['Peugeot', 2010, 5000, '2005-01-01 13:00:00'],
            ['Honda Fit', 2009, 3000, '2004-01-01 14:01:00'],
            ['Honda CRV', 2010, 6000, '2003-01-01 23:30:00'],
        ],
        columnDrag: true,
        worksheetName: 'Merged Cells',
        minDimensions: [50, 5000],
        tableOverflow: true,
        tableWidth: '800px',
        tableHeight: '300px',
        columns: [
            {
                type: 'text',
                width: '300px',
                title: 'Model',
            },
            {
                type: 'text',
                width: '80px',
                title: 'Year',
            },
            {
                type: 'text',
                width: '100px',
                title: 'Price',
            },
            {
                type: 'calendar',
                width: '150px',
                title: 'Date',
                options: {
                    format: 'DD/MM/YYYY HH24:MI',
                    time: 1,
                }
            },
        ],
        mergeCells: {
            A1: [2, 2]
        }
    }]
});

document.getElementById("btn1").onclick = () => table[0].setMerge('A3', 2, 3);
document.getElementById("btn2").onclick = () => table[0].removeMerge('A3');
document.getElementById("btn3").onclick = () => {
    document.getElementById("log").innerHTML = JSON.stringify(table[0].getMerge());
}
document.getElementById("btn4").onclick = () => table[0].destroyMerge();
</script>
</html>

import React, { useRef } from 'react';
import { Spreadsheet, Worksheet, jspreadsheet } from '@jspreadsheet/react';
import 'jsuites/dist/jsuites.css';
import 'jspreadsheet/dist/jspreadsheet.css';

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NzEzZDhlNzhjNmY4YmNlOWJhMjliYzU3MGNjNDQyZGI3YWY5NDU0YTZhZjRkZGY4YjNmZTUyYWY0MTFkMWI3M2VmMjE2NDZjMmUxNWQ3MWNlZWU3OTZmY2VlNGE5NDI1MjRmZTQ0ZjNmNmVhMDU4NGI3ZjNiNzg3YTQ3NzdlZjAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNelUwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default function App() {
    const spreadsheet = useRef();
    const log = useRef();

    const worksheets = [
        {
            data: [
                ['Mazda', 2001, 2000, '2006-01-01 12:00:00'],
                ['Peugeot', 2010, 5000, '2005-01-01 13:00:00'],
                ['Honda Fit', 2009, 3000, '2004-01-01 14:01:00'],
                ['Honda CRV', 2010, 6000, '2003-01-01 23:30:00'],
            ],
        columnDrag: true,
        worksheetName: 'Merged Cells',
        minDimensions: [50, 5000],
        tableOverflow: true,
        tableWidth: '800px',
        tableHeight: '300px',
        columns: [
          {
            type: 'text',
            width: '300px',
            title: 'Model',
          },
          {
            type: 'text',
            width: '80px',
            title: 'Year',
          },
          {
            type: 'text',
            width: '100px',
            title: 'Price',
          },
          {
            type: 'calendar',
            width: '150px',
            title: 'Date',
            options: {
              format: 'DD/MM/YYYY HH24:MI',
              time: 1,
            },
          },
        ],
        mergeCells: {
          A1: [2, 2],
        },
      },
    ];
  
    // Extracted functions
    const handleSetMerge = () => {
      spreadsheet.current[0].setMerge('A3', 2, 3);
    };
  
    const handleRemoveMerge = () => {
      spreadsheet.current[0].removeMerge('A3');
    };
  
    const handleGetAllMergedCells = () => {
      log.current.value = JSON.stringify(spreadsheet.current[0].getMerge());
    };
  
    const handleDestroyAllMerged = () => {
      spreadsheet.current[0].destroyMerge();
    };
  
    return (
      <>
        <Spreadsheet
          ref={spreadsheet}
          worksheets={worksheets}
        />
        <div ref={log}></div>
        <input
          type="button"
          value="setMerge('A3', 2, 3)"
          onClick={handleSetMerge}
        />
        <input
          type="button"
          value="removeMerge('A3')"
          onClick={handleRemoveMerge}
        />
        <input
          type="button"
          value="Get all merged cells"
          onClick={handleGetAllMergedCells}
        />
        <input
          type="button"
          value="Destroy all merged"
          onClick={handleDestroyAllMerged}
        />
      </>
    );
}

<template>
  <Spreadsheet ref="spreadsheet" :worksheets="worksheets" />
  <div ref="log"></div>
  <input type="button" value="setMerge('A3', 2, 3)" @click="handleSetMerge" />
  <input type="button" value="removeMerge('A3')" @click="handleRemoveMerge" />
  <input
    type="button"
    value="Get all merged cells"
    @click="handleGetAllMergedCells"
  />
  <input
    type="button"
    value="Destroy all merged"
    @click="handleDestroyAllMerged"
  />
</template>

<script>
import { Spreadsheet, Worksheet, jspreadsheet } from '@jspreadsheet/vue';
import 'jsuites/dist/jsuites.css';
import 'jspreadsheet/dist/jspreadsheet.css';

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NzEzZDhlNzhjNmY4YmNlOWJhMjliYzU3MGNjNDQyZGI3YWY5NDU0YTZhZjRkZGY4YjNmZTUyYWY0MTFkMWI3M2VmMjE2NDZjMmUxNWQ3MWNlZWU3OTZmY2VlNGE5NDI1MjRmZTQ0ZjNmNmVhMDU4NGI3ZjNiNzg3YTQ3NzdlZjAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNelUwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default {
  components: {
    Spreadsheet,
    Worksheet,
  },
  data() {
    const worksheets = [
      {
        data: [
          ['Mazda', 2001, 2000, '2006-01-01 12:00:00'],
          ['Peugeot', 2010, 5000, '2005-01-01 13:00:00'],
          ['Honda Fit', 2009, 3000, '2004-01-01 14:01:00'],
          ['Honda CRV', 2010, 6000, '2003-01-01 23:30:00'],
        ],
        columnDrag: true,
        worksheetName: 'Merged Cells',
        minDimensions: [50, 5000],
        tableOverflow: true,
        tableWidth: '800px',
        tableHeight: '300px',
        columns: [
          {
            type: 'text',
            width: '300px',
            title: 'Model',
          },
          {
            type: 'text',
            width: '80px',
            title: 'Year',
          },
          {
            type: 'text',
            width: '100px',
            title: 'Price',
          },
          {
            type: 'calendar',
            width: '150px',
            title: 'Date',
            options: {
              format: 'DD/MM/YYYY HH24:MI',
              time: 1,
            },
          },
        ],
        mergeCells: {
          A1: [2, 2],
        },
      },
    ];

    return {
      worksheets,
    };
  },
  methods: {
    handleSetMerge() {
      this.$refs.spreadsheet.current[0].setMerge('A3', 2, 3);
    },

    handleRemoveMerge() {
      this.$refs.spreadsheet.current[0].removeMerge('A3');
    },

    handleGetAllMergedCells() {
      this.$refs.log.value = JSON.stringify(
        this.$refs.spreadsheet.current[0].getMerge()
      );
    },

    handleDestroyAllMerged() {
      this.$refs.spreadsheet.current[0].destroyMerge();
    },
  },
};
</script>

import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import 'jsuites/dist/jsuites.css';
import 'jspreadsheet/dist/jspreadsheet.css';

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NzEzZDhlNzhjNmY4YmNlOWJhMjliYzU3MGNjNDQyZGI3YWY5NDU0YTZhZjRkZGY4YjNmZTUyYWY0MTFkMWI3M2VmMjE2NDZjMmUxNWQ3MWNlZWU3OTZmY2VlNGE5NDI1MjRmZTQ0ZjNmNmVhMDU4NGI3ZjNiNzg3YTQ3NzdlZjAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNelUwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

// Create component
@Component({
    standalone: true,
    selector: "app-root",
    template: `<div #spreadsheet></div>
        <div #log></div>
        <input type="button" value="setMerge('A3', 2, 3)" (click)="this.worksheets[0].setMerge('A3', 2, 3);" />
        <input type="button" value="removeMerge('A3')" (click)="this.worksheets[0].removeMerge('A3');" />
        <input type="button" value="Get all merged cells" (click)="getMerge()" />
        <input type="button" value="Destroy all merged" (click)="this.worksheets[0].destroyMerge();" />`,
})
export class AppComponent {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    @ViewChild("log") log: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngAfterViewInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            toolbar: true,
            worksheets: [{
                data: [
                    ['Mazda', 2001, 2000, '2006-01-01 12:00:00'],
                    ['Peugeot', 2010, 5000, '2005-01-01 13:00:00'],
                    ['Honda Fit', 2009, 3000, '2004-01-01 14:01:00'],
                    ['Honda CRV', 2010, 6000, '2003-01-01 23:30:00'],
                ],
                columnDrag: true,
                worksheetName: 'Merged Cells',
                minDimensions: [50, 5000],
                tableOverflow: true,
                tableWidth: '800px',
                tableHeight: '300px',
                columns: [
                    {
                        type: 'text',
                        width: '300px',
                        title: 'Model',
                    },
                    {
                        type: 'text',
                        width: '80px',
                        title: 'Year',
                    },
                    {
                        type: 'text',
                        width: '100px',
                        title: 'Price',
                    },
                    {
                        type: 'calendar',
                        width: '150px',
                        title: 'Date',
                        options: {
                            format: 'DD/MM/YYYY HH24:MI',
                            time: 1,
                        }
                    },
                ],
                mergeCells: {
                    A1: [2, 2]
                }
            }]
        });
    }
    getMerge() {
        this.log.nativeElement.innerHTML = JSON.stringify(this.worksheets[0].getMerge());
    }
}

Batch operations

Batch operations allow you to apply multiple merge operations simultaneously with a single command.

Example

This example shows how to perform multiple merge operations simultaneously using batch commands.

<html>
<script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v12/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

<div id="spreadsheet"></div>

<p>
<input type="button" value="Batch Set Merge" id="btn1" />
<input type="button" value="Batch Remove Merge" id="btn2" />
<input type="button" value="Get All Merged" id="btn3" />
</p>

<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NzEzZDhlNzhjNmY4YmNlOWJhMjliYzU3MGNjNDQyZGI3YWY5NDU0YTZhZjRkZGY4YjNmZTUyYWY0MTFkMWI3M2VmMjE2NDZjMmUxNWQ3MWNlZWU3OTZmY2VlNGE5NDI1MjRmZTQ0ZjNmNmVhMDU4NGI3ZjNiNzg3YTQ3NzdlZjAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNelUwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

// Create the spreadsheet
let table = jspreadsheet(document.getElementById('spreadsheet'), {
    toolbar: true,
    worksheets: [{
        data: [
            ['A1', 'B1', 'C1', 'D1', 'E1', 'F1'],
            ['A2', 'B2', 'C2', 'D2', 'E2', 'F2'],
            ['A3', 'B3', 'C3', 'D3', 'E3', 'F3'],
            ['A4', 'B4', 'C4', 'D4', 'E4', 'F4'],
            ['A5', 'B5', 'C5', 'D5', 'E5', 'F5'],
        ],
        minDimensions: [6, 6],
        tableOverflow: true,
        tableWidth: '600px',
        tableHeight: '300px',
    }]
});

// Batch set multiple merged cells at the same time
document.getElementById("btn1").onclick = () => {
    table[0].setMerge({ A1: [2,2], D1: [2,2] });
};

// Batch remove multiple merged cells at the same time
document.getElementById("btn2").onclick = () => {
    table[0].removeMerge({ A1: true, D1: true });
};

// Get all merged cells to see the current state
document.getElementById("btn3").onclick = () => {
    alert(JSON.stringify(table[0].getMerge()));
};
</script>
</html>

import React, { useRef } from 'react';
import { Spreadsheet, Worksheet, jspreadsheet } from '@jspreadsheet/react';
import 'jsuites/dist/jsuites.css';
import 'jspreadsheet/dist/jspreadsheet.css';

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NzEzZDhlNzhjNmY4YmNlOWJhMjliYzU3MGNjNDQyZGI3YWY5NDU0YTZhZjRkZGY4YjNmZTUyYWY0MTFkMWI3M2VmMjE2NDZjMmUxNWQ3MWNlZWU3OTZmY2VlNGE5NDI1MjRmZTQ0ZjNmNmVhMDU4NGI3ZjNiNzg3YTQ3NzdlZjAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNelUwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default function App() {
    const spreadsheet = useRef();

    const worksheets = [
        {
            data: [
                ['A1', 'B1', 'C1', 'D1', 'E1', 'F1'],
                ['A2', 'B2', 'C2', 'D2', 'E2', 'F2'],
                ['A3', 'B3', 'C3', 'D3', 'E3', 'F3'],
                ['A4', 'B4', 'C4', 'D4', 'E4', 'F4'],
                ['A5', 'B5', 'C5', 'D5', 'E5', 'F5'],
            ],
            minDimensions: [6, 6],
            tableOverflow: true,
            tableWidth: '600px',
            tableHeight: '300px',
        },
    ];

    // Batch set multiple merged cells at the same time
    const handleBatchSetMerge = () => {
        spreadsheet.current[0].setMerge({ A1: [2,2], D1: [2,2] });
    };

    // Batch remove multiple merged cells at the same time
    const handleBatchRemoveMerge = () => {
        spreadsheet.current[0].removeMerge({ A1: true, D1: true });
    };

    // Get all merged cells to see the current state
    const handleGetAllMerged = () => {
        alert(JSON.stringify(spreadsheet.current[0].getMerge()));
    };

    return (
        <>
            <Spreadsheet
                ref={spreadsheet}
                toolbar
                worksheets={worksheets}
            />
            <p>
                <input
                    type="button"
                    value="Batch Set Merge"
                    onClick={handleBatchSetMerge}
                />
                <input
                    type="button"
                    value="Batch Remove Merge"
                    onClick={handleBatchRemoveMerge}
                />
                <input
                    type="button"
                    value="Get All Merged"
                    onClick={handleGetAllMerged}
                />
            </p>
        </>
    );
}

<template>
    <Spreadsheet ref="spreadsheet" toolbar :worksheets="worksheets" />
    <p>
        <input type="button" value="Batch Set Merge" @click="handleBatchSetMerge" />
        <input type="button" value="Batch Remove Merge" @click="handleBatchRemoveMerge" />
        <input type="button" value="Get All Merged" @click="handleGetAllMerged" />
    </p>
</template>

<script>
import { Spreadsheet, Worksheet, jspreadsheet } from '@jspreadsheet/vue';
import 'jsuites/dist/jsuites.css';
import 'jspreadsheet/dist/jspreadsheet.css';

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NzEzZDhlNzhjNmY4YmNlOWJhMjliYzU3MGNjNDQyZGI3YWY5NDU0YTZhZjRkZGY4YjNmZTUyYWY0MTFkMWI3M2VmMjE2NDZjMmUxNWQ3MWNlZWU3OTZmY2VlNGE5NDI1MjRmZTQ0ZjNmNmVhMDU4NGI3ZjNiNzg3YTQ3NzdlZjAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNelUwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    data() {
        const worksheets = [
            {
                data: [
                    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1'],
                    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2'],
                    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3'],
                    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4'],
                    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5'],
                ],
                minDimensions: [6, 6],
                tableOverflow: true,
                tableWidth: '600px',
                tableHeight: '300px',
            },
        ];

        return {
            worksheets,
        };
    },
    methods: {
        // Batch set multiple merged cells at the same time
        handleBatchSetMerge() {
            this.$refs.spreadsheet.current[0].setMerge({ A1: [2,2], D1: [2,2] });
        },

        // Batch remove multiple merged cells at the same time
        handleBatchRemoveMerge() {
            this.$refs.spreadsheet.current[0].removeMerge({ A1: true, D1: true });
        },

        // Get all merged cells to see the current state
        handleGetAllMerged() {
            alert(JSON.stringify(this.$refs.spreadsheet.current[0].getMerge()));
        },
    },
};
</script>

import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import 'jsuites/dist/jsuites.css';
import 'jspreadsheet/dist/jspreadsheet.css';

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NzEzZDhlNzhjNmY4YmNlOWJhMjliYzU3MGNjNDQyZGI3YWY5NDU0YTZhZjRkZGY4YjNmZTUyYWY0MTFkMWI3M2VmMjE2NDZjMmUxNWQ3MWNlZWU3OTZmY2VlNGE5NDI1MjRmZTQ0ZjNmNmVhMDU4NGI3ZjNiNzg3YTQ3NzdlZjAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNelUwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

// Create component
@Component({
    standalone: true,
    selector: "app-root",
    template: `
        <div #spreadsheet></div>
        <p>
            <input type="button" value="Batch Set Merge" (click)="handleBatchSetMerge()" />
            <input type="button" value="Batch Remove Merge" (click)="handleBatchRemoveMerge()" />
            <input type="button" value="Get All Merged" (click)="handleGetAllMerged()" />
        </p>
    `,
})
export class AppComponent {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];

    // Create a new data grid
    ngAfterViewInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            toolbar: true,
            worksheets: [{
                data: [
                    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1'],
                    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2'],
                    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3'],
                    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4'],
                    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5'],
                ],
                minDimensions: [6, 6],
                tableOverflow: true,
                tableWidth: '600px',
                tableHeight: '300px',
            }]
        });
    }

    // Batch set multiple merged cells at the same time
    handleBatchSetMerge() {
        this.worksheets[0].setMerge({ A1: [2,2], D1: [2,2] });
    }

    // Batch remove multiple merged cells at the same time
    handleBatchRemoveMerge() {
        this.worksheets[0].removeMerge({ A1: true, D1: true });
    }

    // Get all merged cells to see the current state
    handleGetAllMerged() {
        alert(JSON.stringify(this.worksheets[0].getMerge()));
    }
}

Edit this page on GitHub