Nested Headers
This section covers creating spreadsheets withnested 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 attributessetNestedCell(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 definitionsonchangenested(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.
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>