Column Headers

Configure and manage column headers in your spreadsheet. Headers can be customized during initialization or modified programmatically using JavaScript methods. Users can also edit header titles directly through the context menu or by long-pressing on column headers.

Documentation

Methods

Column headers can be updated programmatically using the following methods.

Method	Description
`getHeaders`	Get all headers as an array or comma-separated string. `getHeaders(getAsArray?: boolean) => string[] \| string`
`getHeader`	Get the header title by column number (zero-based). `getHeader(column: number) => string`
`setHeader`	Set a custom header title. Empty string resets to default. `setHeader(column: number, title?: string) => void`
`showHeaders`	Show the column headers. `showHeaders() => void`
`hideHeaders`	Hide the column headers. `hideHeaders() => void`

Configuration

Define column headers during spreadsheet initialization using the title and tooltip properties in the column configuration.

<script> jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [{ columns: [ { type: 'text', title: 'Country', tooltip: 'This is the country', width: '300px', } ] }] }); </script>

Events

Event	Description
`onchangeheader`	Triggered when changing the header title. `onchangeheader(worksheet: Object, column: Number, newValue: String, oldValue: String) : void`

Examples

Header Management

This example demonstrates programmatic header management with interactive controls for getting and setting column titles.

<html> <script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script> <script src="https://jsuites.net/v6/jsuites.js"></script> <link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" /> <link rel="stylesheet" href="https://jspreadsheet.com/v12/jspreadsheet.css" type="text/css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" /> <div id="spreadsheet"></div> <p><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' id="btn1" /> <input type='button' value='Get' id="btn2" /></p> <script> // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('MmU2NjJlYWMyOGJlOTk4OGU0M2JkNDA0ZDUxMTU2YmIyYjg5MDE1YzkyNjVjMTc2MGQwNTgwMGJjOTk1NmViNzNjY2ZlMDdmMGY3YzM5MmI4YjdkMTI1MTM0MTk5MGNhNmI0OTRjMTNhZDMzMDBjMTU1Mjg5NDJiMWM1YzlhMzksZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1qTXdNekUwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); // Create the spreadsheet let 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/1' }, { 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' }, ], }] }); document.getElementById("btn1").onclick = () => table[0].setHeader(document.getElementById('col').value) document.getElementById("btn2").onclick = () => alert(table[0].getHeader(document.getElementById('col').value)) </script> </html>

import React, {useRef} from "react"; import {Spreadsheet, Worksheet, jspreadsheet} from "@jspreadsheet/react"; import "jsuites/dist/jsuites.css"; import "jspreadsheet/dist/jspreadsheet.css"; // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('MmU2NjJlYWMyOGJlOTk4OGU0M2JkNDA0ZDUxMTU2YmIyYjg5MDE1YzkyNjVjMTc2MGQwNTgwMGJjOTk1NmViNzNjY2ZlMDdmMGY3YzM5MmI4YjdkMTI1MTM0MTk5MGNhNmI0OTRjMTNhZDMzMDBjMTU1Mjg5NDJiMWM1YzlhMzksZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1qTXdNekUwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); 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: 'https://jspreadsheet.com/jspreadsheet/countries/1' }, { 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}> <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)}/> </> ); }

<template> <Spreadsheet ref="spreadsheet"> <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="setHeader" /> <input type="button" value="Get" @click="getHeader" /> </template> <script> import { Spreadsheet, Worksheet, jspreadsheet } from '@jspreadsheet/vue'; import 'jsuites/dist/jsuites.css'; import 'jspreadsheet/dist/jspreadsheet.css'; // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('MmU2NjJlYWMyOGJlOTk4OGU0M2JkNDA0ZDUxMTU2YmIyYjg5MDE1YzkyNjVjMTc2MGQwNTgwMGJjOTk1NmViNzNjY2ZlMDdmMGY3YzM5MmI4YjdkMTI1MTM0MTk5MGNhNmI0OTRjMTNhZDMzMDBjMTU1Mjg5NDJiMWM1YzlhMzksZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1qTXdNekUwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); 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: 'https://jspreadsheet.com/jspreadsheet/countries/1', }, { 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 { columns, data }; }, methods: { setHeader() { const selectedValue = this.$refs.select.value; this.$refs.spreadsheet.current[0].setHeader(selectedValue); }, getHeader() { const selectedValue = this.$refs.select.value; alert(this.$refs.spreadsheet.current[0].getHeader(selectedValue)); }, }, }; </script>

import { Component, ViewChild, ElementRef, AfterViewInit } from "@angular/core"; import jspreadsheet from "jspreadsheet"; import 'jsuites/dist/jsuites.css'; import 'jspreadsheet/dist/jspreadsheet.css'; // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('MmU2NjJlYWMyOGJlOTk4OGU0M2JkNDA0ZDUxMTU2YmIyYjg5MDE1YzkyNjVjMTc2MGQwNTgwMGJjOTk1NmViNzNjY2ZlMDdmMGY3YzM5MmI4YjdkMTI1MTM0MTk5MGNhNmI0OTRjMTNhZDMzMDBjMTU1Mjg5NDJiMWM1YzlhMzksZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1qTXdNekUwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); @Component({ standalone: true, 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)="alert(this.worksheets[0].getHeader(this.col.nativeElement.value))" />` }) export class AppComponent implements AfterViewInit { @ViewChild("spreadsheet") spreadsheet: ElementRef; @ViewChild("col") col: ElementRef; // Worksheets worksheets: jspreadsheet.worksheetInstance[]; // Create a new data grid ngAfterViewInit() { // 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: 200, url: 'https://jspreadsheet.com/jspreadsheet/countries/1' }, { type: 'dropdown', title: 'Food', tooltip: 'Category of food', width: 100, source: ['Apples','Bananas','Carrots','Oranges','Cheese'] }, { type: 'checkbox', title: 'Stock', tooltip: 'Quantity on stock', width: 100 }, { type: 'number', title: 'Price', tooltip: 'Retail pricing', width: 100 }, ], }] }); } }