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
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.
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="setRowGroup(0,3)" onclick="spreadsheet[0].setRowGroup(0,3)" />
<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('ODZmZjI0ODI2MDZkNmQzNjIyNGYwNzhkNjFhNDQyZWQwNjcwMWE1MzEzOTc4NWNhYWI2OWE2M2E4NTNjMmNiZTk5NmZlZDk4YWJjMDU5ZWQzYjJhYmIxNDk2ZjgxNjg2N2JiZGIzNGUyY2MyYTM4M2NkM2U2MGE5M2I4MWRjMTAsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGczTmprMU1Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');
// 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: 3 }},
}]
});
</script>
</html>
React example
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
import jspreadsheet from "jspreadsheet";
const license = 'ODZmZjI0ODI2MDZkNmQzNjIyNGYwNzhkNjFhNDQyZWQwNjcwMWE1MzEzOTc4NWNhYWI2OWE2M2E4NTNjMmNiZTk5NmZlZDk4YWJjMDU5ZWQzYjJhYmIxNDk2ZjgxNjg2N2JiZGIzNGUyY2MyYTM4M2NkM2U2MGE5M2I4MWRjMTAsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGczTmprMU1Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';
export default function App() {
// Spreadsheet array of worksheets
const spreadsheet = useRef();
// 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);
}
}
// 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)} />
</>
);
}