Back to the Documentation

Nested Headers

This section covers creating spreadsheets with nested headers and how to change them programmatically.



The following methods are available to update the nested headers programmatically.

Method Description
getNestedCell Get a nested header cell (DOM element).
getNestedCell(x: Number, y: Number) : DOMElement
setNestedCell Define the nested header cell attributes
setNestedCell(x: Number, y: Number, properties: Object) : void
@param {number} x - coordinate x
@param {number} y - coordinate y
@param {object} properties - Possible attributes: { title: String, colspan: Number, tooltip: String }
getNestedHeaders Return the nested header definitions.
getNestedHeaders() : Object
setNestedHeaders Set the nested header definitions.
setNestedHeaders(config: Object) : void

Initial Settings

How to create a new spreadsheet with nested headers.

Property Description
nestedHeaders: array of items Worksheet nested header definitions. Possible attributes: { title: String, colspan: Number, tooltip: String }

Available Events

Event Description
onchangenested When changing the nested headers definitions
onchangenested(worksheet: Object, config: Object) : void
onchangeheadercell Update the properties of a nested header cell.
onchangeheadercell(worksheet: Object, x: Number, y: Number, config: Object) : void


Nested header example

The following example starts the spreadsheet with a basic nested headers configuration.

See a working example of a JSS spreadsheet with nested headers that updates programmatically on JSFiddle.

<script src=""></script>
<script src=""></script>
<link rel="stylesheet" href="" type="text/css" />
<link rel="stylesheet" href="" type="text/css" />

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

<br/><input type='button' value='Update' id="updatebtn" />

let data = [
    ['BR', 'Cheese', 1],
    ['CA', 'Apples', 0],
    ['US', 'Carrots', 1],
    ['GB', 'Oranges', 0],

let table = jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        data: data,
        columns: [
                type: 'autocomplete',
                title: 'Country',
                width: '200px',
                url: '/jspreadsheet/countries'
                type: 'dropdown',
                title: 'Food',
                width: '100px',
                source: ['Apples','Bananas','Carrots','Oranges','Cheese']
                type: 'checkbox',
                title: 'Stock',
                width: '100px'
                type: 'number',
                title: 'Price',
                width: '100px'
        minDimensions: [8,4],
                    title: 'Supermarket information',
                    colspan: '8',
                    title: 'Location',
                    colspan: '1',
                    title: ' Other Information',
                    colspan: '2'
                    title: ' Costs',
                    colspan: '5'

document.getElementById('updatebtn').onclick = () => table[0].setNestedCell(0, 0, { title:'New title',tooltip:'New tooltip' });