Group of Columns

Jspreadsheet allows the creation of collapsible groups of columns, which can help manage the available space in the workspace and quickly show or hide the columns within the group. This feature can be helpful when dealing with large datasets or when you want to organize similar columns more compactly and efficiently.

Documentation

Methods

You can programmatically use one of the following methods to manage and interact with the group of columns feature.

Method Description
getColumnGroup() Get all column groups.
getColumnGroup() : object
setColumnGroup(number, number) Create a new collapsable group of columns.
setColumnGroup(columnNumber: Number, numOfItems: Number) : void
resetColumnGroup(number) Reset the column group.
resetColumnGroup(columnNumber: Number) : void
openColumnGroup(number) Open a group of columns.
openColumnGroup(columnNumber: Number) : void
closeColumnGroup(number) Close a group of columns.
closeColumnGroup(columnNumber: Number) : void

Events

The following are the available event methods related to the column grouping feature.

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

Initial Settings

You can use one of the following properties to configure the data grid to display specific sets of columns upon initialization.

Property Description
group?: number The number of columns.
state?: boolean Initial state of this group. Default: false (closed)

Examples

Basic collapsable column group

How to create a data grid collapse columns on Jspreadsheet.

 ABCDEFaddLMN
1A1B1C1D1E1F1L1M1N1
2A2B2C2D2E2F2L2M2N2
3A3B3C3D3E3F3L3M3N3
4A4B4C4D4E4F4L4M4N4
5A5B5C5D5E5F5L5M5N5
6A6B6C6D6E6F6L6M6N6
7A7B7C7D7E7F7L7M7N7
8A8B8C8D8E8F8L8M8N8
9A9B9C9D9E9F9L9M9N9
10A10B10C10D10E10F10L10M10N10
11A11B11C11D11E11F11L11M11N11
12A12B12C12D12E12F12L12M12N12
13A13B13C13D13E13F13L13M13N13
14A14B14C14D14E14F14L14M14N14
15A15B15C15D15E15F15L15M15N15
16A16B16C16D16E16F16L16M16N16
17A17B17C17D17E17F17L17M17N17
18A18B18C18D18E18F18L18M18N18
19A19B19C19D19E19F19L19M19N19
20A20B20C20D20E20F20L20M20N20
  • See this example in JavaScript
  • See this example in React
  • See this example in VueJS
  • See this example in Angular
<html>
<script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" />

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

<div id="spreadsheet"></div>

<input type="button" value="setColumnGroup(0,3)" id="setgroup" />
<input type="button" value="resetColumnGroup(0)" id="resetgroup" />

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

// Create the data
// 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);
    }
}

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

document.getElementById("setgroup").onclick = () => spreadsheet[0].setColumnGroup(0,3)
document.getElementById("resetgroup").onclick = () => spreadsheet[0].resetColumnGroup(0)
</script>
</html>

import React, { useRef } from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react";

const license = 'OGFjMDc4MGUyZGRiZDk5N2NjMGFjNzgzZTFjM2JkN2YwY2M2NDU4NGViZGQxODRmN2Q2NjA3MzU1OThkZWMwM2M2M2Y0NzUwZjhhNWM4OGZkYTgxZDRiNTZkYzgwYWRkOWVhM2Y1MjM1YjJjMzg2ZGU0OWMzMGE0YWI0ZTM4NTMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRME1EYzJOekUyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

// 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}>
            <Worksheet
                data={data}
                tableOverflow
                tableWidth="800px"
                tableHeight="400px"
                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" :license="license">
        <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 } from "@jspreadsheet/vue";

const license = 'OGFjMDc4MGUyZGRiZDk5N2NjMGFjNzgzZTFjM2JkN2YwY2M2NDU4NGViZGQxODRmN2Q2NjA3MzU1OThkZWMwM2M2M2Y0NzUwZjhhNWM4OGZkYTgxZDRiNTZkYzgwYWRkOWVhM2Y1MjM1YjJjMzg2ZGU0OWMzMGE0YWI0ZTM4NTMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRME1EYzJOekUyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

// 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 }],
            // License
            license: license,
        };
    }
}
</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('OGFjMDc4MGUyZGRiZDk5N2NjMGFjNzgzZTFjM2JkN2YwY2M2NDU4NGViZGQxODRmN2Q2NjA3MzU1OThkZWMwM2M2M2Y0NzUwZjhhNWM4OGZkYTgxZDRiNTZkYzgwYWRkOWVhM2Y1MjM1YjJjMzg2ZGU0OWMzMGE0YWI0ZTM4NTMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRME1EYzJOekUyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

// 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);
    }
}

@Component({
    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 {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngAfterViewInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            worksheets: [
                {
                    data: data,
                    columns: [{},{},{},{},{},{ group: 5, state: false }],
                }
            ]
        });
    }
}

Edit this page on GitHub