Nested Headers

Create hierarchical column headers with multiple levels to organize and structure your spreadsheet data presentation.

Documentation

Methods

The following methods provide programmatic control over nested headers:

Method	Description
`getNestedCell`	Get a nested header cell (DOM element). `getNestedCell(x: number, y: number) => DOMElement`
`setNestedCell`	Define the nested header cell attributes. `setNestedCell(x: number, y: number, properties: Object) => void`
`setNestedCell`	Define multiple nested header cell attributes. `setNestedCell(updates: Object[]) => void`
`getNestedHeaders`	Return the nested header definitions. `getNestedHeaders() => Object[]`
`setNestedHeaders`	Set the nested header definitions. `setNestedHeaders(config: Object[][]) => void`
`resetNestedHeaders`	Reset the nested header definitions. `resetNestedHeaders() => void`

Initial Settings

Configure nested headers during spreadsheet initialization:

Property	Description
`nestedHeaders?: Object[][]`	Worksheet nested header definitions. Possible attributes: { title: String, colspan: Number, tooltip: String, frozen: Boolean }

Available Events

Event	Description
`onchangenested`	Triggered when nested header definitions change. `onchangenested(worksheet: Object, config: Object) => void`
`onchangeheadercell`	Triggered when nested header cell properties are updated. `onchangeheadercell(worksheet: Object, positionXOrArrayOfUpdates: number\|Object[], positionY?: number, config?: Object) => void`

Examples

Nested header example

This example demonstrates basic nested header configuration with programmatic updates. See a working example of a spreadsheet with nested headers on JSFiddle.

<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><input type='button' value='Update' id="btn1"></p>

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

// 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',
                width: '200px'
            },
            {
                type: 'dropdown',
                title: 'Food',
                width: '100px',
                source: ['Apples','Bananas','Carrots','Oranges','Cheese']
            },
            {
                type: 'checkbox',
                title: 'Stock',
                width: '100px'
            },
            {
                type: 'number',
                title: 'Price',
                width: '100px'
            },
        ],
        minDimensions: [6,4],
        nestedHeaders:[
            [
                {
                    title: 'Supermarket information',
                    colspan: 6,
                },
            ],
            [
                {
                    title: 'Location',
                    colspan: 1,
                },
                {
                    title: 'Other Information',
                    colspan: 2
                },
                {
                    title: 'Costs',
                    colspan: 3
                }
            ],
        ]
    }]
});

document.getElementById("btn1").onclick = () => table[0].setNestedCell(0, 0, { title:'New title',tooltip:'New tooltip' })
</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('OWJmNDljY2NjN2JmMTc2MzQxYTViYTkwMDgzOWFhNDM5M2NlNjBlNTBmMjljZDU2ZmY3NzI2YTBjM2JhMWU4NzYzMmRiMmFiODA3NWFmMjRkNTBlYWVhMWYyNWUzMGIzOTA3YmYyMGFiZjUwZmJiOTFiZGE1ODc1MDcyYzA0ZWQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azFPREkwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Data
    const data = [
        ['BR', 'Cheese', 1],
        ['CA', 'Apples', 0],
        ['US', 'Carrots', 1],
        ['GB', 'Oranges', 0],
    ];
    // Columns
    const columns = [
        {
            type: 'autocomplete',
            title: 'Country',
            width: '200px'
        },
        {
            type: 'dropdown',
            title: 'Food',
            width: '100px',
            source: ['Apples', 'Bananas', 'Carrots', 'Oranges', 'Cheese']
        },
        {
            type: 'checkbox',
            title: 'Stock',
            width: '100px'
        },
        {
            type: 'number',
            title: 'Price',
            width: '100px'
        },
    ];
    // Nested headers
    const nestedHeaders = [
        [
            {
                title: 'Supermarket information',
                colspan: 8,
            },
        ],
        [
            {
                title: 'Location',
                colspan: 1,
            },
            {
                title: 'Other Information',
                colspan: 2
            },
            {
                title: 'Costs',
                colspan: 5
            }
        ],
    ];
    // Render component
    return (
        <>
            <Spreadsheet ref={spreadsheet}>
                <Worksheet data={data} columns={columns} nestedHeaders={nestedHeaders} minDimensions={[6, 4]}/>
            </Spreadsheet>
            <input type='button' value='Update'
                   onClick={() => spreadsheet.current[0].setNestedCell(0, 0, {title: 'New', tooltip: 'Tooltip'})}/>
        </>
    );
}

<template>
    <Spreadsheet ref="spreadsheet">
        <Worksheet :data="data" :columns="columns" :nestedHeaders="nestedHeaders" :minDimensions="[6,4]" />
    </Spreadsheet>
    <input type='button' value='Update' @click="update" />
</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('OWJmNDljY2NjN2JmMTc2MzQxYTViYTkwMDgzOWFhNDM5M2NlNjBlNTBmMjljZDU2ZmY3NzI2YTBjM2JhMWU4NzYzMmRiMmFiODA3NWFmMjRkNTBlYWVhMWYyNWUzMGIzOTA3YmYyMGFiZjUwZmJiOTFiZGE1ODc1MDcyYzA0ZWQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azFPREkwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    data() {
        // Data
        const data = [
            ['BR', 'Cheese', 1],
            ['CA', 'Apples', 0],
            ['US', 'Carrots', 1],
            ['GB', 'Oranges', 0],
        ];
        // Columns
        const columns = [
            {
                type: 'autocomplete',
                title: 'Country',
                width: '200px'
            },
            {
                type: 'dropdown',
                title: 'Food',
                width: '100px',
                source: ['Apples','Bananas','Carrots','Oranges','Cheese']
            },
            {
                type: 'checkbox',
                title: 'Stock',
                width: '100px'
            },
            {
                type: 'number',
                title: 'Price',
                width: '100px'
            },
        ];
        // Nested headers
        const nestedHeaders = [
            [
                {
                    title: 'Supermarket information',
                    colspan: 8,
                },
            ],
            [
                {
                    title: 'Location',
                    colspan: 1,
                },
                {
                    title: 'Other Information',
                    colspan: 2
                },
                {
                    title: 'Costs',
                    colspan: 5
                }
            ],
        ];

        return {
            data,
            columns,
            nestedHeaders,
        };
    },
    methods: {
        update() {
            this.$refs.spreadsheet.current[0].setNestedCell(0, 0, { title:'New', tooltip:'Tooltip' })
        }
    }
}
</script>

import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jspreadsheet/dist/jspreadsheet.css";
import "jsuites/dist/jsuites.css";

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

// Create component
@Component({
    standalone: true,
    selector: "app-root",
    template: `
        <div #spreadsheet></div>
        <input type='button' value='Update' (click)="this.worksheets[0].setNestedCell(0, 0, { title:'New title',tooltip:'New tooltip' })">
    `,
})
export class AppComponent {
    @ViewChild("spreadsheet") spreadsheet: 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',
                    },
                    {
                        type: 'dropdown',
                        title: 'Food',
                        source: ['Apples','Bananas','Carrots','Oranges','Cheese']
                    },
                    {
                        type: 'checkbox',
                        title: 'Stock',
                    },
                    {
                        type: 'number',
                        title: 'Price',
                    },
                ],
                minDimensions: [6,4],
                nestedHeaders:[
                    [
                        {
                            title: 'Supermarket information',
                            colspan: 6,
                        },
                    ],
                    [
                        {
                            title: 'Location',
                            colspan: 1,
                        },
                        {
                            title: 'Other Information',
                            colspan: 2
                        },
                        {
                            title: 'Costs',
                            colspan: 3
                        }
                    ],
                ]
            }]
        });
    }
}

Frozen nested headers

This example demonstrates frozen nested headers functionality with multi-level header structure.

<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>

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

// Create the data grid
let table = jspreadsheet(document.getElementById('spreadsheet'), {
    tabs: true,
    toolbar: true,
    tableOverflow: true,
    tableWidth: 600,
    worksheets: [{
        minDimensions: [22,10],
        freezeColumns: 2,
        nestedHeaders:[
            [
                {
                    title: 'Location',
                    colspan: 2,
                    frozen: true,
                },
                {
                    title: 'Information',
                    colspan: 10
                },
                {
                    title: 'Another information',
                    colspan: 10
                }
            ],
        ]
    }]
});
</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('OWJmNDljY2NjN2JmMTc2MzQxYTViYTkwMDgzOWFhNDM5M2NlNjBlNTBmMjljZDU2ZmY3NzI2YTBjM2JhMWU4NzYzMmRiMmFiODA3NWFmMjRkNTBlYWVhMWYyNWUzMGIzOTA3YmYyMGFiZjUwZmJiOTFiZGE1ODc1MDcyYzA0ZWQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azFPREkwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Nested headers
    const nestedHeaders = [
        [
            {
                title: 'Location',
                colspan: 2,
                frozen: true,
            },
            {
                title: 'Information',
                colspan: 10
            },
            {
                title: 'Another information',
                colspan: 10
            }
        ],
    ];
    // Render component
    return (
        <Spreadsheet ref={spreadsheet} toolbar tabs tableOverflow tableWidth="600">
            <Worksheet nestedHeaders={nestedHeaders} minDimensions={[22,10]} freezeColumns="2" />
        </Spreadsheet>
    );
}

<template>
    <Spreadsheet ref="spreadsheet" toolbar tabs tableOverflow tableWidth="600">
        <Worksheet :nestedHeaders="nestedHeaders" :minDimensions="[22,10]" freezeColumns="2" />
    </Spreadsheet>
</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('OWJmNDljY2NjN2JmMTc2MzQxYTViYTkwMDgzOWFhNDM5M2NlNjBlNTBmMjljZDU2ZmY3NzI2YTBjM2JhMWU4NzYzMmRiMmFiODA3NWFmMjRkNTBlYWVhMWYyNWUzMGIzOTA3YmYyMGFiZjUwZmJiOTFiZGE1ODc1MDcyYzA0ZWQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azFPREkwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    data() {
        // Nested headers
        const nestedHeaders = [
            [
                {
                    title: 'Location',
                    colspan: 2,
                    frozen: true,
                },
                {
                    title: 'Information',
                    colspan: 10
                },
                {
                    title: 'Another information',
                    colspan: 10
                }
            ],
        ];

        return {
            nestedHeaders,
        };
    }
}
</script>

import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";

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

// Create component
@Component({
    standalone: true,
    selector: "app-root",
    template: `<div #spreadsheet></div>`,
})
export class AppComponent {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngAfterViewInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            tabs: true,
            toolbar: true,
            tableOverflow: true,
            tableWidth: 600,
            worksheets: [{
                minDimensions: [22,10],
                freezeColumns: 2,
                nestedHeaders:[
                    [
                        {
                            title: 'Location',
                            colspan: 2,
                            frozen: true,
                        },
                        {
                            title: 'Information',
                            colspan: 10
                        },
                        {
                            title: 'Another information',
                            colspan: 10
                        }
                    ],
                ]
            }]
        });
    }
}

Edit this page on GitHub