Headers
This section provides instructions for creating custom headers in spreadsheets and modifying them programmatically. The user can alter the header titles using the context menu or perform a long click on one of the headers.Documentation
Methods
You can update the headers programmatically using the following methods.Method | Description |
---|---|
getHeaders | Get all headers as an Array of strings or a string separated by commas.
@param {mixed} - get all headers a string or as an Array. getHeader(getAsArray: Boolean) : void |
showHeaders | Show the headers
showHeaders() : void |
hideHeaders | Hide the headers
hideHeaders() : void |
getHeader | Get the header title by column number.
@param {mixed} - get the header title by column number starting on zero. getHeader(column: Number) : void |
setHeader | Set a custom header title.
@param {number} - column number starting on zero @param {string} - New title. Empty to reset the headers. setHeader(colNumber: Number, newValue?: String) : void |
Initial Settings
To customize the headers, you can use the title and tooltip attributes in the column settings.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/v10/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/v10/jspreadsheet.css" type="text/css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" /> <div id="spreadsheet"></div> <script> // Set your JSS license key (The following key only works for one day) jspreadsheet.setLicense('NTA4ODM1MTA0NTAyYmNmMWU3MDdmZmZiYjVhZjZhZDk0MGU3NzI4NGY2NDA5NzJhNDY2OTAzY2VhNjhlY2RhYjQ0Zjg2MjE1MDc3MDA3ZmM0N2RjNzI3MGRjNDcyODA5NjkyODA1NDQ5NDg3ZjdlNTgxY2ZiZWIyYzIwZjNjNDQsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dNak0zTlRVNE1pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5'); // Create the spreadsheet var table = jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [{ data: [ ['BR', 'Cheese', 1], ['CA', 'Apples', 0], ['US', 'Carrots', 1], ['GB', 'Oranges', 0], ], 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>
React example
import React, { useRef } from "react"; import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react"; const license = 'NTA4ODM1MTA0NTAyYmNmMWU3MDdmZmZiYjVhZjZhZDk0MGU3NzI4NGY2NDA5NzJhNDY2OTAzY2VhNjhlY2RhYjQ0Zjg2MjE1MDc3MDA3ZmM0N2RjNzI3MGRjNDcyODA5NjkyODA1NDQ5NDg3ZjdlNTgxY2ZiZWIyYzIwZjNjNDQsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dNak0zTlRVNE1pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5'; export default function App() { // Spreadsheet array of worksheets const spreadsheet = useRef(); const select = useRef(); // Data const data = [ ['BR', 'Cheese', 1], ['CA', 'Apples', 0], ['US', 'Carrots', 1], ['GB', 'Oranges', 0], ] // Columns settings const 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' } ]; // Render component return ( <> <Spreadsheet ref={spreadsheet} license={license}> <Worksheet data={data} columns={columns} /> </Spreadsheet> <select ref={select}> <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={() => spreadsheet.current[0].setHeader(select.current.value)} /> <input type='button' value='Get' onClick={() => spreadsheet.current[0].getHeader(select.current.value)} /> </> ); }
Vue example
<template> <Spreadsheet ref="spreadsheet" :license="license"> <Worksheet :data="data" :columns="columns" /> </Spreadsheet> <select ref="select"> <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' @click="this.$refs.spreadsheet.current[0].setHeader(select.current.value)" /> <input type='button' value='Get' @click="this.$refs.spreadsheet.current[0].getHeader(select.current.value)" /> </template> <script> import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue"; const license = 'NTA4ODM1MTA0NTAyYmNmMWU3MDdmZmZiYjVhZjZhZDk0MGU3NzI4NGY2NDA5NzJhNDY2OTAzY2VhNjhlY2RhYjQ0Zjg2MjE1MDc3MDA3ZmM0N2RjNzI3MGRjNDcyODA5NjkyODA1NDQ5NDg3ZjdlNTgxY2ZiZWIyYzIwZjNjNDQsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dNak0zTlRVNE1pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5'; // Data let data = []; for (var j = 0; j < 50; j++) { data[j] = []; for (var i = 0; i < 50; i++) { data[j][i] = jspreadsheet.helpers.getColumnNameFromCoords(i, j); } } export default { components: { Spreadsheet, Worksheet, }, data() { // Data const data = [ ['BR', 'Cheese', 1], ['CA', 'Apples', 0], ['US', 'Carrots', 1], ['GB', 'Oranges', 0], ] // Columns settings const 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' } ]; return { data, options, license, }; } } </script>
Angular example
import { Component, ViewChild, ElementRef } from "@angular/core"; import * as jspreadsheet from "jspreadsheet"; // Set your JSS license key (The following key only works for one day) jspreadsheet.setLicense('NTA4ODM1MTA0NTAyYmNmMWU3MDdmZmZiYjVhZjZhZDk0MGU3NzI4NGY2NDA5NzJhNDY2OTAzY2VhNjhlY2RhYjQ0Zjg2MjE1MDc3MDA3ZmM0N2RjNzI3MGRjNDcyODA5NjkyODA1NDQ5NDg3ZjdlNTgxY2ZiZWIyYzIwZjNjNDQsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dNak0zTlRVNE1pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5'); // Data let data = []; for (var j = 0; j < 50; j++) { data[j] = []; for (var i = 0; i < 50; i++) { data[j][i] = jspreadsheet.helpers.getColumnNameFromCoords(i, j); } } @Component({ selector: "app-root", template: `<div #spreadsheet></div> <select #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' (click)="this.worksheets[0].setHeader(this.col.nativeElement.value)" /> <input type='button' value='Get' (click)="this.worksheets[0].getHeader(this.col.nativeElement.value)" />` }) export class AppComponent { @ViewChild("spreadsheet") spreadsheet: ElementRef; @ViewChild("col") col: ElementRef; // Worksheets worksheets: jspreadsheet.worksheetInstance[]; // Create a new data grid ngOnInit() { // Create spreadsheet this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, { worksheets: [{ data: [ ['BR', 'Cheese', 1], ['CA', 'Apples', 0], ['US', 'Carrots', 1], ['GB', 'Oranges', 0], ], 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' }, ], }] }); } }