Collapsable Columns

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

Documentation

Methods

All methods related to row grouping.

Method	Description
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.

Property	Description
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.

Property	Description
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.

<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="setColumnGroup(0,3)" id="setgroup" />
<input type="button" value="resetColumnGroup(0)" id="resetgroup" />

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

// 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',
        columns: [{},{},{},{},{},{ group: 5, state: false }], // group 5 columns, collapsed
    }]
});

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

Edit this page on GitHub