Group rows

You can create a group of rows on your data grid during the initialization or after that, as below.

Documentation

Methods

All methods related to row grouping.
MethodDescription
setRowGroup(number, elements) Create a new collapsable group of rows.
setRowGroup(rowNumber: number, elements: number|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 Settings

The following events related to row grouping.
PropertyDescription
oncreaterowgroup When the user creates a group of rows
oncreaterowgroup?: (worksheet: object, row: number, elements: number|number[]) => void
ondestroyrowgroup When the user destroys a group of rows
ondestroyrowgroup?: (worksheet: object, row: 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

It is possible to initiate the data grid with one or more groups of rows available for the user. There are two related properties to be used to this purpose.
PropertyDescription
group?: number|number[] The number of rows from the parent or an array with the row numbers to be grouped.
state?: boolean Initial state of this group. Default: false (closed)


Examples

Basic collapsable row group.

How to create a data grid collapse rows on Jspraedsheet.






Source code

<html>
<script src="https://jspreadsheet.com/v9/jspreadsheet.js"></script>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://jspreadsheet.com/v9/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="setRowGroup(0,5)" onclick="spreadsheet[0].setRowGroup(0,5)" />
<input type="button" value="resetRowGroup(0)" onclick="spreadsheet[0].resetRowGroup(0);" />

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

// 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',
        rows: { 6: { group: [7,8,9,10,11] }},
    }]
});
</script>
</html>



Create applications with spreadsheet-like controls