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>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('N2ZkMWRlY2Q2YzE4OGVlZGQ3Y2JlNDFlMDNiNWViYWRkNTU2NGM1NGZlYjgwMjZmYmYwODMyZWMxY2Y2ZDE4NGM0NGZmZjAxYWE1Y2VmNzA2OTE0MjAyYjY3ZDQ2OGQ3ZmVmMjgzNWQ2NGJhYmU0YWQ3NGIzMDcyNjkzOWYzNGUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNREE1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

// 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'
            },
            {
                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";

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('N2ZkMWRlY2Q2YzE4OGVlZGQ3Y2JlNDFlMDNiNWViYWRkNTU2NGM1NGZlYjgwMjZmYmYwODMyZWMxY2Y2ZDE4NGM0NGZmZjAxYWE1Y2VmNzA2OTE0MjAyYjY3ZDQ2OGQ3ZmVmMjgzNWQ2NGJhYmU0YWQ3NGIzMDcyNjkzOWYzNGUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNREE1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

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'
        },
        {
            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';

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('N2ZkMWRlY2Q2YzE4OGVlZGQ3Y2JlNDFlMDNiNWViYWRkNTU2NGM1NGZlYjgwMjZmYmYwODMyZWMxY2Y2ZDE4NGM0NGZmZjAxYWE1Y2VmNzA2OTE0MjAyYjY3ZDQ2OGQ3ZmVmMjgzNWQ2NGJhYmU0YWQ3NGIzMDcyNjkzOWYzNGUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNREE1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

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',
      },
      {
        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';

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('N2ZkMWRlY2Q2YzE4OGVlZGQ3Y2JlNDFlMDNiNWViYWRkNTU2NGM1NGZlYjgwMjZmYmYwODMyZWMxY2Y2ZDE4NGM0NGZmZjAxYWE1Y2VmNzA2OTE0MjAyYjY3ZDQ2OGQ3ZmVmMjgzNWQ2NGJhYmU0YWQ3NGIzMDcyNjkzOWYzNGUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNREE1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
@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'
                    },
                    {
                        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
                    },
                ],
            }]
        });
    }
}

Edit this page on GitHub