Nested Headers

This section covers more information about creating spreadsheets with nested headers and how to change those 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 JSS spreadsheet nested headers programmatically updates working example 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'