Back to the Documentation

Collapsable Rows

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

Changes from 9.5+ The group of rows now expect to receive a number of rows in the group and no longer an array of numbers.

Documentation

Methods

All methods related to row grouping.

Method Description
setRowGroup(number, numOfItems) 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 Settings

The following events related to row grouping.

Property Description
oncreaterowgroup When the user creates a group of rows
oncreaterowgroup?: (worksheet: object, row: number, numOfItems: number) => void
onresetrowgroup When the user destroys a group of rows
onresetrowgroup?: (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.

Property Description
group?: number The number of rows in this group.
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
13A13B13C13D13E13F13G13H13I13
14A14B14C14D14E14F14G14H14I14
15A15B15C15D15E15F15G15H15I15
16A16B16C16D16E16F16G16H16I16
17A17B17C17D17E17F17G17H17I17
18A18B18C18D18E18F18G18H18I18
19A19B19C19D19E19F19G19H19I19
20A20B20C20D20E20F20G20H20I20
21A21B21C21D21E21F21G21H21I21
22A22B22C22D22E22F22G22H22I22
23A23B23C23D23E23F23G23H23I23
24A24B24C24D24E24F24G24H24I24
25A25B25C25D25E25F25G25H25I25
<html>
<script src="https://jspreadsheet.com/v9/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/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,3)" id="setgroup"/>
<input type="button" value="resetRowGroup(0)" id="resetgroup"/>

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

// 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: 5 }},
    }]
});

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

Edit this page on GitHub