Freeze columns
The spreadsheet freeze columns property helps to sticky some columns floating left on the spreadsheet. The property can be defined programmatically as below:
Documentation
Methods
Define or reset the number of freeze columns programmatically.
| Method | Description |
|---|---|
| setFreezeColumns(number) | Set the freeze columns.setFreezeColumns(number: number) : void |
| resetFreezeColumns() | Reset the freeze columns.resetFreezeColumns() : void |
Initial Settings
The following property is available through the initialization of the online spreadsheet.
| Property | Description |
|---|---|
| freezeColumns: number | Define the number of freeze columns on initialization. |
| freezeColumnControl: boolean Premium | Enable freeze column manual control. Default: false |
Examples
Basic freeze column usage.
It is possible to define the viewport when using the freeze columns, as follow:
<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>
<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YmQyMjYwNzhmMzliZTI1NTY2ZDNmNWRhZDExYmJmMjg1ZTVlYjU2ZjM5OTQwNDljNDNhZTY2YzBmYjdiZTEzYzYyZmE0N2U2OTc1YmUxZjg1YzJjMmViMmYzYzE2Yzg3NTZhNmE1Y2Q4MWY2OTY1Mjc0M2MyN2QzYWJkZGQ1ZmEsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNMU1EZzROamMyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Create a new spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [{
minDimensions: [50,20],
tableOverflow: true,
tableWidth: '800px',
freezeColumns: 2
}]
});
</script>
</html>
Enable manual freeze controls Premium
Enable the interface controls for manual adjustments.
<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>
<script>
jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [{
minDimensions: [50,20],
tableOverflow: true,
tableWidth: '800px',
freezeRowControl: true,
freezeColumnControl: true,
}]
});
</script>
</html>