Group of Rows

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

Documentation

Methods

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

Method Description
getRowGroup() Get all row groups.
getRowGroup() : object
setRowGroup(number, number) Create a new collapsable group of rows.
setRowGroup(rowNumber: Number, numOfItems: Number) : void
resetRowGroup(number) Reset the row group.
resetRowGroup(rowNumber: Number) : void
openRowGroup(number) Open a group of rows.
openRowGroup(rowNumber: Number) : void
closeRowGroup(number) Close a group of rows.
closeRowGroup(rowNumber: Number) : void

Events

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

Property Description
ongrouprow When the user creates, updates or reset a group of rows
oncreaterowgroup?: (worksheet: Object, row: Number, numOfItems: Number) => void
onopenrowgroup When the user opens a group of rows
onopenrowgroup?: (worksheet: Object, row: Number) => void
oncloserowgroup When the user closes a group of rows
oncloserowgroup?: (worksheet: Object, row: Number) => void

Initial Settings

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

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

Examples

Basic collapsable row group.

How to create a data grid collapse rows on Jspreadsheet.

 ABCDEFGHI
1A1B1C1D1E1F1G1H1I1
2A2B2C2D2E2F2G2H2I2
3A3B3C3D3E3F3G3H3I3
4A4B4C4D4E4F4G4H4I4
5A5B5C5D5E5F5G5H5I5
6A6B6C6D6E6F6G6H6I6
7addA7B7C7D7E7F7G7H7I7
11A11B11C11D11E11F11G11H11I11
12A12B12C12D12E12F12G12H12I12
13A13B13C13D13E13F13G13H13I13
14A14B14C14D14E14F14G14H14I14
15A15B15C15D15E15F15G15H15I15
16A16B16C16D16E16F16G16H16I16
17A17B17C17D17E17F17G17H17I17
18A18B18C18D18E18F18G18H18I18
19A19B19C19D19E19F19G19H19I19
20A20B20C20D20E20F20G20H20I20
21A21B21C21D21E21F21G21H21I21
22A22B22C22D22E22F22G22H22I22
23A23B23C23D23E23F23G23H23I23

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

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

// 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',
        rows: { 6: { group: 3 }},
    }]
});

document.getElementById("btn1").onclick = () => spreadsheet[0].setRowGroup(0,3);
document.getElementById("btn2").onclick = () => spreadsheet[0].resetRowGroup(0);
</script>
</html>

import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
import jspreadsheet from "jspreadsheet";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

const license = 'OTQ5NzE2NmIyNzIxZDkxZGM5ZjJlMTk0MWRjZjQ2YjQwY2JhN2JmOWUzMmUyZDMxOWY2OWQ5YWVhYjI0MjdlNGVlOTVkYjEwMDkzZjBkZjc1MjI2YzE5MjI3MTI3NDQyN2UxNTAyNmYwZWJkMWVhOGY0ZDkxN2ZkM2ZmYjhhMDgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9ERXhOVGczTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // 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);
        }
    }
    // Rows settings
    const rows = { 6: { group: 3 }}

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

<template>
    <Spreadsheet ref="spreadsheet" :license="license">
        <Worksheet :data="data" :rows="rows" tableOverflow tableWidth="800px" tableHeight="400px" />
    </Spreadsheet>
    <input type="button" value="setRowGroup(0,3)" @click="setRowGroup(0,3)" />
    <input type="button" value="resetRowGroup(0)" @click="resetRowGroup(0);" />
</template>

<script>
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

const license = 'OTQ5NzE2NmIyNzIxZDkxZGM5ZjJlMTk0MWRjZjQ2YjQwY2JhN2JmOWUzMmUyZDMxOWY2OWQ5YWVhYjI0MjdlNGVlOTVkYjEwMDkzZjBkZjc1MjI2YzE5MjI3MTI3NDQyN2UxNTAyNmYwZWJkMWVhOGY0ZDkxN2ZkM2ZmYjhhMDgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9ERXhOVGczTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

// 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: {
        setRowGroup(row, numOfRows) {
            this.$refs.spreadsheet.current[0].setRowGroup(row, numOfRows);
        },
        resetRowGroup(row) {
            this.$refs.spreadsheet.current[0].resetRowGroup(row);
        },
    },
    data() {
        return {
            // Worksheet data
            data: data,
            // Rows
            rows: { 6: { group: 3 }},
            // 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('OTQ5NzE2NmIyNzIxZDkxZGM5ZjJlMTk0MWRjZjQ2YjQwY2JhN2JmOWUzMmUyZDMxOWY2OWQ5YWVhYjI0MjdlNGVlOTVkYjEwMDkzZjBkZjc1MjI2YzE5MjI3MTI3NDQyN2UxNTAyNmYwZWJkMWVhOGY0ZDkxN2ZkM2ZmYjhhMDgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9ERXhOVGczTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

// 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({
    standalone: true,
    selector: "app-root",
    template: `
        <div #spreadsheet></div>
        <input type="button" value="setRowGroup(0,3)" (click)="this.worksheets[0].setRowGroup(0,3)" />
        <input type="button" value="resetRowGroup(0)" (click)="this.worksheets[0].resetRowGroup(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,
                    tableOverflow: true,
                    tableWidth: '800px',
                    tableHeight: '400px',
                    rows: { 6: { group: 3 }},
                }
            ]
        });
    }
}

Edit this page on GitHub