Documentation
Back to the documentation

Merged cells

This section covers creating and managing merged cells in your online spreadsheets.

Documentation

Methods

The following methods help to deal with the merged cells programmatically.
Method Description
setMerge Set the defined merged cell 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 the merged cells 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 the merged cells by column name
param string columnName - Column name, such as A1.
removeMerge(cellName: String) : null
destroyMerge Destroy all merged cells destroyMerge();


Events

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


Initial Settings

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


Examples

A basic example of how to initiate and programmatically change the merged cells definitions.




The methods for merged cell management are: setMerge, getMerge, removeMerge and destroyMerge





Open the merged cells example on JSFiddle.

Source code

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

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

<script>
// Set the JSS spreadsheet license
jspreadsheet.setLicense('ODNlY2Y5MDI3NzExNzBmYzQ0ZDhmMDRmZDhjYmQ1ZTM4Y2ZmNjBkOTQxNDkyYzdhOTY2YWJmNDc0OWQ0OWFjYmY2Y2ViOTM3MmZiZmEzYjU5N2VkNzIwNDVjZTA4MTMyMWZjMmM4OTVlYzJjN2NlODI0NDc2MzEyODFjNWQxNjYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOalV3TXpBek9Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');

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

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

</html>