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.
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.
nestedHeaders: array of itemsWorksheet nested header definitions. Possible attributes: { title: String, colspan: Number, tooltip: String }

Available Events

onchangenestedWhen changing the nested headers definitions
onchangenested(worksheet: Object, config: Object) : void
onchangeheadercellUpdate 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.

Source code

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

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

<input type='button' value='Update'
    onclick="table[0].setNestedCell(0, 0, { title:'New title',tooltip:'New tooltip' })">

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

var table = 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'