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.

What's new with Version 13

Select then grab: a click on a header selects the column; a second press on the selected header followed by a movement drags the column. The invisible drag strip at the bottom of the header is gone

Selection states: a header touched by any selection keeps the light highlight; the header of a fully selected column carries the jss_full class and a slightly stronger colour, the same rule that shows the grab cursor

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/v13/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/v13/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('MmM4OWRkMjc0NDA3OTMxZjBjZDQ0OWM0ZDVjMzhmNTQ0NzNhMGI2MGM1MWQxYjM4NmQ5Y2FhZWQ5M2Y3NTcxMGQ0ODliZDA3NWFjMzIxMmViNTc0MDk4ZjhlNTc2YWMzYzVmNmM1OWU4NjRkNjlmNGI1YzhjYmE2MzYxYWQ1ZTUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprd01qRXlOak13TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');

// 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('MmM4OWRkMjc0NDA3OTMxZjBjZDQ0OWM0ZDVjMzhmNTQ0NzNhMGI2MGM1MWQxYjM4NmQ5Y2FhZWQ5M2Y3NTcxMGQ0ODliZDA3NWFjMzIxMmViNTc0MDk4ZjhlNTc2YWMzYzVmNmM1OWU4NjRkNjlmNGI1YzhjYmE2MzYxYWQ1ZTUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprd01qRXlOak13TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');

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('MmM4OWRkMjc0NDA3OTMxZjBjZDQ0OWM0ZDVjMzhmNTQ0NzNhMGI2MGM1MWQxYjM4NmQ5Y2FhZWQ5M2Y3NTcxMGQ0ODliZDA3NWFjMzIxMmViNTc0MDk4ZjhlNTc2YWMzYzVmNmM1OWU4NjRkNjlmNGI1YzhjYmE2MzYxYWQ1ZTUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprd01qRXlOak13TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');

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('MmM4OWRkMjc0NDA3OTMxZjBjZDQ0OWM0ZDVjMzhmNTQ0NzNhMGI2MGM1MWQxYjM4NmQ5Y2FhZWQ5M2Y3NTcxMGQ0ODliZDA3NWFjMzIxMmViNTc0MDk4ZjhlNTc2YWMzYzVmNmM1OWU4NjRkNjlmNGI1YzhjYmE2MzYxYWQ1ZTUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprd01qRXlOak13TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');
@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
                    },
                ],
            }]
        });
    }
}