Headers

This section covers more information about creating spreadsheets with custom headers and how to change those 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 programatically.
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 comman.
getHeader(getAsArray: Boolean) : void
@param {mixed} - get all headers as string or as array.
setHeader Set a custom header title.
setHeader(colNumber: Number, newValue: String) : void
@Param {number} - column number starting on zero
@Param {string} - new title


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'), {
    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 a basic headers with option to programmatically title updates.



Change the headers title programmatically



Source code

<html>
<script src="https://jspreadsheet.com/v8/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/v8/jspreadsheet.css" type="text/css" />

<div id="spreadsheet"></div>

<script>
var data = [
    ['BR', 'Cheese', 1],
    ['CA', 'Apples', 0],
    ['US', 'Carrots', 1],
    ['GB', 'Oranges', 0],
];

var table = jspreadsheet(document.getElementById('spreadsheet'), {
    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'
        },
    ],
    ],
    license: 'MWEzMTE4MGFkNWY5YzQzNjE4NjZiNmE1NThhM2M0Yjc1NmUyNGM2N2YzZjU2NDQ5ZjM1MGFiYWNmOTFkNTkwODFiYmYwNDE1YjhhM2ViNGUyMzM2YjYzY2Q4NTcyMWE4MGQ4YjVjNjI2NWY4NWYyMTBjMWU5M2ZmNTU4OGI1MDQsZXlKdVlXMWxJam9pY0dGMWJDNW9iMlJsYkNJc0ltUmhkR1VpT2pFMk5UZzVOakk0TURBc0ltUnZiV0ZwYmlJNld5SnFjM0J5WldGa2MyaGxaWFF1WTI5dElpd2lZM05pTG1Gd2NDSXNJbXB6YUdWc2JDNXVaWFFpTENKc2IyTmhiR2h2YzNRaVhTd2ljR3hoYmlJNklqSWlMQ0p6WTI5d1pTSTZXeUoyTnlJc0luWTRJaXdpY0dGeWMyVnlJaXdpYzJobFpYUnpJaXdpWm05eWJYTWlMQ0p5Wlc1a1pYSWlMQ0ptYjNKdGRXeGhJbDE5',
});
</script>

<select id='col'>
<option value="0">Column 0</option>
<option value="1">Column 1</option>
<option value="2">Column 2</option>
</select>

<input type='button' value='Set' onclick="table.setHeader(document.getElementById('col').value)" />
<input type='button' value='Get' onclick="table.getHeader(document.getElementById('col').value)" />

</html>