Documentation
Back to the Documentation

Group columns

You can use this feature to create a collapsable group of columns.

Documentation


Methods

All methods related to row grouping.
MethodDescription
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 Settings

The following events related to row grouping.
PropertyDescription
oncreatecolumngroup When the user creates a group of columns
oncreatecolumngroup?: (worksheet: object, column: number, numOfItems: number) => void
onresetcolumngroup When the user destroys a group of columns
onresetcolumngroup?: (worksheet: object, column: 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, column: number) => void


Initial Settings

It is possible to initiate the data grid with one or more groups of columns available for the user. There are two related properties to be used to this purpose.
PropertyDescription
group?: number The number of columns in the group
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/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="setColumnGroup(0,5)" onclick="spreadsheet[0].setColumnGroup(0,5)" />
<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('MTJjOGZiZTUxMWMwMGI0YzBjZmM1MWJmNGQ4MGM2OGMxNDU0MWFkN2NlOWEzMzNiOTE5NTMyNDJjZGEyMzkwZGQ1ZDk5NjhmMTBhZjU5OTU2MWQxMDdlMGE5MmVhNWI3YTY0NDU2NjZlNmNiMTc3MzAzNzE2MmM2MjM5MTQ1M2MsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTRNRGsxTURBeE5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpJaXdpYzJOdmNHVWlPbHNpZGpjaUxDSjJPQ0lzSW5ZNUlpd2lZMmhoY25Seklpd2labTl5YlhNaUxDSm1iM0p0ZFd4aElpd2ljR0Z5YzJWeUlpd2ljbVZ1WkdWeUlpd2lZMjl0YldWdWRITWlMQ0pwYlhCdmNuUWlMQ0ppWVhJaUxDSjJZV3hwWkdGMGFXOXVjeUlzSW5ObFlYSmphQ0pkTENKa1pXMXZJanAwY25WbGZRPT0=');

// 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>



Create applications with spreadsheet-like controls