Column Groups

Column groups allow you to organize large spreadsheets by combining related columns into collapsible sections. This section explains how to define and configure groups, the programmatic methods available to manage them, and the events triggered when groups are expanded or collapsed.

Documentation

Methods

The following methods manage column groups programmatically.

Method	Description
`getColumnGroup`	Get all column groups. `getColumnGroup() : object`
`setColumnGroup`	Create a new collapsible group of columns. `setColumnGroup(columnNumber: Number, numOfItems: Number) : void`
`resetColumnGroup`	Reset the column group. `resetColumnGroup(columnNumber: Number) : void`
`openColumnGroup`	Open a group of columns. `openColumnGroup(columnNumber?: Number\|Number[]) : void`
`closeColumnGroup`	Close a group of columns. `closeColumnGroup(columnNumber?: Number\|Number[]) : void`

Events

Events triggered by column group actions.

Property	Description
`ongroupcolumn`	When the user creates, updates or resets a group of columns `ongroupcolumn?: (worksheet: Object, column: Number, numOfItems: Number) => void`
`onopencolumngroup`	When the user opens a group of columns `onopencolumngroup?: (worksheet: Object, column: Number) => void`
`onclosecolumngroup`	When the user closes a group of columns `onclosecolumngroup?: (worksheet: Object, column: Number) => void`

Initial Settings

Configure column groups during initialization using these column properties.

Property	Description
`group?: number`	Number of columns to include in this group
`state?: boolean`	Whether the group starts expanded. Default: false (collapsed)

Examples

Basic Collapsible Column Group

Create collapsible column groups in Jspreadsheet.

<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="setColumnGroup(0,3)" id="btn1" />
<input type="button" value="resetColumnGroup(0)" id="btn2" /></p>

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

let data = [];

for (let j = 0; j < 50; j++) {
    data[j] = [];
    for (let i = 0; i < 50; i++) {
        data[j][i] = jspreadsheet.helpers.getColumnNameFromCoords(i, j);
    }
}

// Create a new spreadsheet
let spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {
    tableOverflow: true,
    tableWidth: '700px',
    tableHeight: '400px',
    worksheets: [{
        data: data,
        columns: [{},{},{ group: 5, state: false }], // group 5 columns, collapsed
    }]
});

document.getElementById("btn1").onclick = () => spreadsheet[0].setColumnGroup(0,3)
document.getElementById("btn2").onclick = () => spreadsheet[0].resetColumnGroup(0)
</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('ODEzMGY1ODg1MGEyNTkwZmM1OWI5ZTEzMDQzMGFhM2ZmOTZjOTU5ZjU4Y2Q1Mzg3NGMyNTI2Njk5M2U5OGI4ZmQ0NjVmYzZhOGUzNTRmMmQ3ZjhkODY0ZThiOGE3MTYzNGU0ZDE3NmQxMDBjYWQ5YzMyN2M2NzZkZWZhZTZiODAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNREV3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

// Generate sample data
let data = [];
for (let j = 0; j < 50; j++) {
    data[j] = [];
    for (let i = 0; i < 50; i++) {
        data[j][i] = jspreadsheet.helpers.getColumnNameFromCoords(i, j);
    }
}

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();

    // Columns - group 5 columns, collapsed
    const columns = [{},{},{group: 5, state: false}];

    // Render component
    return (
        <>
            <Spreadsheet ref={spreadsheet} license={license} tableOverflow tableWidth="700px" tableHeight="400px">
                <Worksheet data={data} columns={columns}/>
            </Spreadsheet>
            <input type="button" value="setColumnGroup(0,3)"
                   onClick={() => spreadsheet.current[0].setColumnGroup(0, 3)}/>
            <input type="button" value="resetColumnGroup(0)"
                   onClick={() => spreadsheet.current[0].resetColumnGroup(0)}/>
        </>
    );
}

<template>
    <Spreadsheet ref="spreadsheet" tableOverflow tableWidth="700px" tableHeight="400px">
        <Worksheet :data="data" :columns="columns" />
    </Spreadsheet>
    <input type="button" value="setColumnGroup(0,3)" @click="setColumnGroup(0,3)" />
    <input type="button" value="resetColumnGroup(0)" @click="resetColumnGroup(0)" />
</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('ODEzMGY1ODg1MGEyNTkwZmM1OWI5ZTEzMDQzMGFhM2ZmOTZjOTU5ZjU4Y2Q1Mzg3NGMyNTI2Njk5M2U5OGI4ZmQ0NjVmYzZhOGUzNTRmMmQ3ZjhkODY0ZThiOGE3MTYzNGU0ZDE3NmQxMDBjYWQ5YzMyN2M2NzZkZWZhZTZiODAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNREV3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

// Data
let data = [];
for (let j = 0; j < 50; j++) {
    data[j] = [];
    for (let i = 0; i < 50; i++) {
        data[j][i] = jspreadsheet.helpers.getColumnNameFromCoords(i, j);
    }
}

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    methods: {
        setColumnGroup(column, numOfColumns) {
            this.$refs.spreadsheet.current[0].setColumnGroup(column, numOfColumns);
        },
        resetColumnGroup(column) {
            this.$refs.spreadsheet.current[0].resetColumnGroup(column);
        },
    },
    data() {
        return {
            // Worksheet data
            data: data,
            // Columns - group 5 columns, collapsed
            columns: [{},{},{ group: 5, state: false }]
        };
    }
}
</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('ODEzMGY1ODg1MGEyNTkwZmM1OWI5ZTEzMDQzMGFhM2ZmOTZjOTU5ZjU4Y2Q1Mzg3NGMyNTI2Njk5M2U5OGI4ZmQ0NjVmYzZhOGUzNTRmMmQ3ZjhkODY0ZThiOGE3MTYzNGU0ZDE3NmQxMDBjYWQ5YzMyN2M2NzZkZWZhZTZiODAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNREV3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

// Data
let data: any = [];
for (let j = 0; j < 50; j++) {
    data[j] = [];
    for (let i = 0; i < 50; i++) {
        data[j][i] = jspreadsheet.helpers.getColumnNameFromCoords(i, j);
    }
}

@Component({
    standalone: true,
    selector: "app-root",
    template: `
        <div #spreadsheet></div>
        <input type="button" value="setColumnGroup(0,3)" (click)="this.worksheets[0].setColumnGroup(0,3)" />
        <input type="button" value="resetColumnGroup(0)" (click)="this.worksheets[0].resetColumnGroup(0);" />`
})
export class AppComponent implements AfterViewInit {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngAfterViewInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            tableOverflow: true,
            tableWidth: '700px',
            tableHeight: '400px',
            worksheets: [
                {
                    data: data,
                    columns: [{},{},{ group: 5, state: false }],
                }
            ]
        });
    }
}

Edit this page on GitHub