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

EventDescription
onchangeheaderWhen 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/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/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('YjZlMTc5MmM0MDcyMTY3ZTg2NTRkM2RjMGYwMDU4M2E4YjExMjcxMThkYzFjNzE1MjZlZjk5YWViYTNmN2QyMzZmMjg1NTYwMzE1M2M0NjQwNDI3MzkyZjExMzllNTg4ZmQzOTczOGZiNzdkNzJhMGM3MjUxZGFhMjMzNDZlMmUsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTNNRFkyTWpRd01Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpJaXdpYzJOdmNHVWlPbHNpZGpjaUxDSjJPQ0lzSW5ZNUlpd2lZMmhoY25Seklpd2labTl5YlhNaUxDSm1iM0p0ZFd4aElpd2ljR0Z5YzJWeUlpd2ljbVZ1WkdWeUlpd2lZMjl0YldWdWRITWlMQ0pwYlhCdmNuUWlMQ0ppWVhJaUxDSjJZV3hwWkdGMGFXOXVjeUlzSW5ObFlYSmphQ0pkTENKa1pXMXZJanAwY25WbGZRPT0=');

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



Create applications with spreadsheet-like controls