Group 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.
MethodDescription
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.
PropertyDescription
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.
PropertyDescription
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.






Source code

<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)" onclick="spreadsheet[0].setColumnGroup(0,3)" />
<input type="button" value="resetColumnGroup(0)" onclick="spreadsheet[0].resetColumnGroup(0);" />

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

// Create the data
// Data
var data = [];

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

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

React example

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

const license = 'NGY1ZGVhNGE4ZDk2YWRlYzQ1NjAzZWEwOGU3Y2U1ZmRjNGE3OGQ4MGQ5MzUxYjQ2NjRkZmIzYTgwZjAzODk4ZjJlZDk3ZTlkODZkZDNhN2M5MjllOThmMTIwNDQwMWJhODliY2Q2NDZlZjM3Y2YzNzZmYWI3MzhkNmFjZDllODYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dNak0zTkRNNU5Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5';

// Data
let data = [];
for (var j = 0; j < 50; j++) {
    data[j] = [];
    for (var 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)} />
        </>
    );
}

Vue example

<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 = 'NGY1ZGVhNGE4ZDk2YWRlYzQ1NjAzZWEwOGU3Y2U1ZmRjNGE3OGQ4MGQ5MzUxYjQ2NjRkZmIzYTgwZjAzODk4ZjJlZDk3ZTlkODZkZDNhN2M5MjllOThmMTIwNDQwMWJhODliY2Q2NDZlZjM3Y2YzNzZmYWI3MzhkNmFjZDllODYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dNak0zTkRNNU5Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5';

// Data
let data = [];
for (var j = 0; j < 50; j++) {
    data[j] = [];
    for (var 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>

Angular example

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

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

// Data
let data = [];
for (var j = 0; j < 50; j++) {
    data[j] = [];
    for (var 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
    ngOnInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            worksheets: [
                {
                    data: data,
                    columns: [{},{},{},{},{},{ group: 5, state: false }],
                }
            ]
        });
    }
}