Headers
This section covers creating spreadsheets with custom headers and how to change them programmatically. By default, the user can change the header titles using the context menu or with a long click.Documentation
Methods
The following methods are available to update the headers programmatically.Method | Description |
---|---|
getHeader | Get the header title by column number.getHeader(column: Number) : void @Param {mixed} - get the header title by column number starting on zero. |
getHeaders | Get all headers as an Array of strings or a string separated by commas.getHeader(getAsArray: Boolean) : void @param {mixed} - get all headers a string or as an Array. |
setHeader | Set a custom header title.setHeader(colNumber: Number, newValue?: String) : void
@Param {number} - column number starting on zero @Param {string} - New title. Empty to reset the headers. |
Initial Settings
The header titles and tooltip can be defined through the attributes title and tooltip within the column settings as follow:jspreadsheet(document.getElementById('spreadsheet'), { workshets: [{ columns: [ { type: 'text', title: 'Country', tooltip: 'This is the country', width: '300px', } ] }] });
Available Events
Event | Description |
---|---|
onchangeheader | When changing the header title.onchangeheader(worksheet: Object, column: Number, newValue: String, oldValue: String) : void |
Examples
Updates to the headers
The following example starts the spreadsheet with basic headers with the option to update the titles programmatically.Change the headers programmatically
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> <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('NTY5YzA1MzMwZmRkMjQ1YzdlMTkxYzkxZmU3ZWRlODViNjE5YjM2OWY2YTc0NzM4NWRmMGY2MWI1Y2M1NTAxNWNkYzFlYzRjMGM4ZmZhYWZlZjAyYTE0OGQ1NTA3NjU1MDk2MDBjNjhjM2IzMjNmOTFiMjczYjBkY2MwYzNmMGEsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOalE1TnpJM01Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'); // Create the spreadsheet var table = jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [{ data: data, columns: [ { type: 'autocomplete', title: 'Country', tooltip: 'Country of origin', width: '200px', url: '/jspreadsheet/countries' }, { type: 'dropdown', title: 'Food', tooltip: 'Category of food', width: '100px', source: ['Apples','Bananas','Carrots','Oranges','Cheese'] }, { type: 'checkbox', title: 'Stock', tooltip: 'Quantity on stock', width: '100px' }, { type: 'number', title: 'Price', tooltip: 'Retail pricing', width: '100px' }, ], }] }); </script> <select id='col'> <option value="0">Column 0</option> <option value="1">Column 1</option> <option value="2">Column 2</option> <option value="3">Column 3</option> </select> <input type='button' value='Set' onclick="table[0].setHeader(document.getElementById('col').value)" /> <input type='button' value='Get' onclick="table[0].getHeader(document.getElementById('col').value)" /> </html>