Merged cells

This section covers how to create and manage merged cells on your online spreadsheets.

Documentation

Methods

The following methods to deal with the spreadsheet merged cells programmatically are listed below.
Method Description
setMerge Set the defined merged by the number of columns and rows given. Null to consider all selected cells.
setMerge(mixed: String, colspan: Number, rowspan: number) : void
@Param {string?} columnName such as A1 or null to all selected cells
@Param {number} colspan - Number of columns
@Param {number} rowspan - Number of rows
getMerge Get a merged cell by cell name or all merged cells when null is given.
getMerge(mixed: String) : mixed
@param {string?} Cellname such as A1 or null to return all merged cells.
@return {array|object} array with colspan/rowspan or an object with all merged cells.
removeMerge Destroy merged by column name
param string columnName - Column name, such as A1.
removeMerge(cellName: String) : null
destroyMerge Destroy all merged cells destroyMerge();


Events

Merge cells events.
Method Description
onmergeonmerge(worksheet: Object, newValue: Array, oldValue: Array) : void


Initial Settings

The initial merge cells spreadsheet properties.
PropertyDescription
mergeCells: arrayEnable the user to define the initial default merged cells.


Examples

A basic example on how to initiate and programatically change the merge cells definitions.




The methods for the merge cells management are: setMerge, getMerge, removeMerge, destroyMerge





Source code

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

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

<script>
var data = [
    ['Mazda', 2001, 2000, '2006-01-01 12:00:00'],
    ['Pegeout', 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'],
];

var table = jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        data: data,
        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],
            J13:[3,3],
        },
        columnDrag: true,
    }],
    toolbar: true,
    license: 'MWEzMTE4MGFkNWY5YzQzNjE4NjZiNmE1NThhM2M0Yjc1NmUyNGM2N2YzZjU2NDQ5ZjM1MGFiYWNmOTFkNTkwODFiYmYwNDE1YjhhM2ViNGUyMzM2YjYzY2Q4NTcyMWE4MGQ4YjVjNjI2NWY4NWYyMTBjMWU5M2ZmNTU4OGI1MDQsZXlKdVlXMWxJam9pY0dGMWJDNW9iMlJsYkNJc0ltUmhkR1VpT2pFMk5UZzVOakk0TURBc0ltUnZiV0ZwYmlJNld5SnFjM0J5WldGa2MyaGxaWFF1WTI5dElpd2lZM05pTG1Gd2NDSXNJbXB6YUdWc2JDNXVaWFFpTENKc2IyTmhiR2h2YzNRaVhTd2ljR3hoYmlJNklqSWlMQ0p6WTI5d1pTSTZXeUoyTnlJc0luWTRJaXdpY0dGeWMyVnlJaXdpYzJobFpYUnpJaXdpWm05eWJYTWlMQ0p5Wlc1a1pYSWlMQ0ptYjNKdGRXeGhJbDE5',
});
</script>

<button type="button" onclick="table.setMerge('A3', 2, 3);">Merge cell A3 (colspan: 2, rowspan: 3)</button>
<button type="button" onclick="table.removeMerge('A3');">Destroy merge from A3</button>
<button type="button" onclick="document.getElementById('console').innerHTML = JSON.stringify(table.getMerge());">Get all merged cells</button>
<button type="button" onclick="table.destroyMerge();">Destroy all merged</button>

</html>