Documentation
Back to the Documentation

Nested Headers

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

Documentation

Methods

The following methods are available to update the nested headers programmatically.
MethodDescription
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.
PropertyDescription
nestedHeaders: array of itemsWorksheet nested header definitions. Possible attributes: { title: String, colspan: Number, tooltip: String, frozen: Boolean }


Available Events

EventDescription
onchangenestedWhen changing the nested headers definitions
onchangenested(worksheet: Object, config: Object) : void
onchangenestedcellUpdate the properties of a nested header cell.
onchangenestedcell(worksheet: Object, x: Number, y: Number, config: Object) : void


Examples

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

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

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

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

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

<script>
var data = [
    ['BR', 'Cheese', 1],
    ['CA', 'Apples', 0],
    ['US', 'Carrots', 1],
    ['GB', 'Oranges', 0],
];
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NTIwMTc5YTExNmQ5ZjQyM2ZmM2ZkOTc1NTRlOTFjNDM5MmRhNzFjOWVjODRlYTJlZWVhMjgzODFhNTA1MzNlMWIyNDk4YzNhMGE1MjYzMjkxNDU3OTU1YjU1ZTE2YmY5MjQxMmYzYmZiMjNhMWU0NGU3MzE2MWY0ZTQ5MmFiZDcsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOalE1T0RNMU5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');

// Create the spreadsheet
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],
        nestedHeaders:[
            [
                {
                    title: 'Supermarket information',
                    colspan: '8',
                },
            ],
            [
                {
                    title: 'Location',
                    colspan: '1',
                },
                {
                    title: ' Other Information',
                    colspan: '2'
                },
                {
                    title: ' Costs',
                    colspan: '5'
                }
            ],
        ],
        columnDrag:true,
    }]
});
</script>
</html>

Frozen nested headers

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



Source code

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

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

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

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

<script>
var data = [
    ['BR', 'Cheese', 1],
    ['CA', 'Apples', 0],
    ['US', 'Carrots', 1],
    ['GB', 'Oranges', 0],
];
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NTIwMTc5YTExNmQ5ZjQyM2ZmM2ZkOTc1NTRlOTFjNDM5MmRhNzFjOWVjODRlYTJlZWVhMjgzODFhNTA1MzNlMWIyNDk4YzNhMGE1MjYzMjkxNDU3OTU1YjU1ZTE2YmY5MjQxMmYzYmZiMjNhMWU0NGU3MzE2MWY0ZTQ5MmFiZDcsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOalE1T0RNMU5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');

// Create the data grid
jspreadsheet(document.getElementById('spreadsheet'), {
    tabs: true,
    toolbar: true,
    worksheets: [{
        minDimensions: [22,10],
        freezeColumns: 2,
        tableOverflow: true,
        tableWidth: 600,
        nestedHeaders:[
            [
                {
                    title: 'Location',
                    colspan: 2,
                    frozen: true,
                },
                {
                    title: ' Information',
                    colspan: '10'
                },
                {
                    title: ' Another information',
                    colspan: '10'
                }
            ],
        ],
        columnDrag:true,
    }]
});
</script>
</html>