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('YTQyZDYwMTFlZTlhZDVlMzc3NmZkNmUxZjAzMzAzNTZjN2EwMDkwMGFhOGZhZjAzY2FhNjVlM2RlZTJkMjI2MDA4NmY4YTUwNWZjYzRlOGE0MzIyNjQzYzgzZDcwNjM2M2RhNmYyNjVmZDhiZmUyY2UxODZjYWQ5ZTQ0NmQ1YWUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFek5qQTJOakE0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

// 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('YTQyZDYwMTFlZTlhZDVlMzc3NmZkNmUxZjAzMzAzNTZjN2EwMDkwMGFhOGZhZjAzY2FhNjVlM2RlZTJkMjI2MDA4NmY4YTUwNWZjYzRlOGE0MzIyNjQzYzgzZDcwNjM2M2RhNmYyNjVmZDhiZmUyY2UxODZjYWQ5ZTQ0NmQ1YWUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFek5qQTJOakE0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

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

Edit this page on GitHub