Star
Back to Examples

Header updates

There are three ways to change a header title.

  • The user clicks in a selected header and hold the mouse for 2 seconds, a prompt will request the new title;
  • Via contextMenu. the user right clicks in the column and select the option Rename column
  • Using the method setHeader(colNumber, title) as example below:




Source code

<html>
<script src="https://bossanova.uk/jspreadsheet/v4/jexcel.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://bossanova.uk/jspreadsheet/v4/jexcel.css" type="text/css" />

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

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

table = jspreadsheet(document.getElementById('spreadsheet'), {
    data:data,
    columns: [
        {
            type: 'autocomplete',
            title: 'Country',
            width: '300',
            url: '/jspreadsheet/countries'
        },
        {
            type: 'dropdown',
            title: 'Food',
            width: '150',
            source: ['Apples','Bananas','Carrots','Oranges','Cheese']
        },
        {
            type: 'checkbox',
            title: 'Stock',
            width:'100'
        },
    ]
});
</script>

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

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

</html>