Back to the documentation

Spreadsheet 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
onmerge onmerge(worksheet: Object, newValue: Array, oldValue: Array) : void

Initial Settings

The initial merge cells spreadsheet properties.

Property Description
mergeCells: array Allow 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.

<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><br/>
<div id="log"></div><br/>

<input type="button" value="setMerge('A3', 2, 3)" id="setmerge" />
<input type="button" value="removeMerge('A3')" id="removemerge" />
<input type="button" value="Get all merged cells" id="getmerge" />
<input type="button" value="Destroy all merged" id="destroymerge" />

<script>
// Set the JSS spreadsheet license
jspreadsheet.setLicense('NDE2NjUwZGI1ZWM2YTY2NjkxZWNhYzdjODcxMzBiNWQyMTUwNGE0OWZlNmNkZGM2MWM4ZjY0MDNjNGExMTNjYmI3YzQ3NDk1YzM4YWI0ZTA4ZjhhNjYwYjJiYWI3ODNhOGQwOTc0NDE3ZDA0MjliZmM1MTBlOTliMDcxOWFjZWYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFNE9UWXpNRGt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
let 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'],
]

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

document.getElementById("setmerge").onclick = () => table[0].setMerge('A3', 2, 3);
document.getElementById("removemerge").onclick = () => table[0].removeMerge('A3');
document.getElementById("getmerge").onclick = () => {
    document.getElementById("log").innerHTML = JSON.stringify(table[0].getMerge());
}
document.getElementById("destroymerge").onclick = () => table[0].destroyMerge();
</script>

</html>