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.

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, frozen: Boolean }

Available Events

Event Description
onchangenested When changing the nested headers definitions
onchangenested(worksheet: Object, config: Object) : void
onchangenestedcell Update 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.

<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' id="setnested">

<script>
let 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('ZmQxZjkxYzQ1NzE2OTU0NmI3YjdmMTYxNGIxMTI4ODVhMWUwZjQ5MDkwOThiZDE4OWE1NDljODU5NWFlOWMwODRlYjBhYjg4MTM2NDRmNjJiMjUxN2JjYWRmOGRhMzhhZWZmZjcyNDcwY2NlMGVmN2Q5ZTEyZjQ0ZGZlOGM1MmMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNd09EYzFOVGswTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

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

document.getElementById("setnested").onclick = () => table[0].setNestedCell(0, 0, { title:'New title',tooltip:'New tooltip' })
</script>
</html>

Frozen nested headers

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

<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>

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

<script>
let 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('ZmQxZjkxYzQ1NzE2OTU0NmI3YjdmMTYxNGIxMTI4ODVhMWUwZjQ5MDkwOThiZDE4OWE1NDljODU5NWFlOWMwODRlYjBhYjg4MTM2NDRmNjJiMjUxN2JjYWRmOGRhMzhhZWZmZjcyNDcwY2NlMGVmN2Q5ZTEyZjQ0ZGZlOGM1MmMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNd09EYzFOVGswTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

// Create the data grid
let table = 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,
    }]
});

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