Freeze Columns
Freezing columns in a spreadsheet allows you to keep specific columns visible while scrolling through the sheet. This feature helps keep essential data in view, even when working with large amounts of data. You can enable this feature either during the initialization of the grid or programmatically using the setFreezeColumns
method.
Note Freeze columns feature only works when the
tableOverflow
orfullscreen
property is enabled.
Documentation
Methods
Define or reset the number of freeze columns programmatically.
Method | Description |
---|---|
setFreezeColumns(number|number[]) | Freeze the column numbers. It accepts a number or a array of consecutive numbers.setFreezeColumns(columns: Number|Number[]) : void |
resetFreezeColumns() | Remove all freeze columns.resetFreezeColumns() : void |
Initial Settings
The following property is available through the initialization of the online spreadsheet.
Property | Description |
---|---|
freezeColumns: number|number[] | Define the frozen columns on initialization. |
freezeColumnControl: boolean Enterprise | Enable the freeze column manual control. Default: false |
Examples
Basic Freeze Columns Example.
This example demonstrates how to initially set up two frozen columns in the spreadsheet and provides a method to adjust this setting via a button programmatically.
<html>
<script src="https://jspreadsheet.com/v11/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/v11/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<div id="spreadsheet"></div><br><br>
<input type="button" value="setFreezeColumns(2)" id="btn1" />
<input type="button" value="resetFreezeColumns()" id="btn2" />
<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MDc2Njk1NThiZjY2YWUxNWY1MzBjOGFhNDMxNjg2Y2FlOTE2NThjNTMxNjI0MDM0ODYxOTk1YTc5NDdhMzE4YWE0OGE3M2YxZDkzN2ZkNWMwM2EwZTc0NGM4MWI2MWZlMzY3MDJjZDM0Mzk5M2I0MmJiYTM3MmVkMWFjYzA5N2QsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUXlPVFV5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Create a new spreadsheet
let spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [{
minDimensions: [50,20],
tableOverflow: true,
tableWidth: '800px',
freezeColumns: 1
}]
});
document.getElementById("btn1").onclick = () => spreadsheet[0].setFreezeColumns(2)
document.getElementById("btn2").onclick = () => spreadsheet[0].resetFreezeColumns()
</script>
</html>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
const license = 'MDc2Njk1NThiZjY2YWUxNWY1MzBjOGFhNDMxNjg2Y2FlOTE2NThjNTMxNjI0MDM0ODYxOTk1YTc5NDdhMzE4YWE0OGE3M2YxZDkzN2ZkNWMwM2EwZTc0NGM4MWI2MWZlMzY3MDJjZDM0Mzk5M2I0MmJiYTM3MmVkMWFjYzA5N2QsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUXlPVFV5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
export default function App() {
// Spreadsheet array of worksheets
const spreadsheet = useRef();
// Render component
return (
<>
<Spreadsheet ref={spreadsheet} license={license}>
<Worksheet minDimensions={[50,20]} tableOverflow={true} tableWidth="800" freezeColumns="1" />
</Spreadsheet>
<button onClick={() => spreadsheet.current[0].setFreezeColumns(2)}>setFreezeColumns(2)</button>
<button onClick={() => spreadsheet.current[0].resetFreezeColumns()}>resetFreezeColumns()</button>
</>
);
}
<template>
<Spreadsheet ref="spreadsheet" :license="license">
<Worksheet :minDimensions="[50,20]" :tableOverflow="true" tableWidth="800" freezeColumns="1" />
</Spreadsheet>
<button @click="handleSetFreeze">setFreezeColumns(2)</button>
<button @click="handleReset">resetFreezeColumns()</button>
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
const license = 'MDc2Njk1NThiZjY2YWUxNWY1MzBjOGFhNDMxNjg2Y2FlOTE2NThjNTMxNjI0MDM0ODYxOTk1YTc5NDdhMzE4YWE0OGE3M2YxZDkzN2ZkNWMwM2EwZTc0NGM4MWI2MWZlMzY3MDJjZDM0Mzk5M2I0MmJiYTM3MmVkMWFjYzA5N2QsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUXlPVFV5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
export default {
components: {
Spreadsheet,
Worksheet,
},
methods: {
handleSetFreeze: function () {
this.$refs.spreadsheet.current[0].setFreezeColumns(2)
},
handleReset: function () {
this.$refs.spreadsheet.current[0].resetFreezeColumns()
}
},
data() {
return {
// License
license: license,
};
}
}
</script>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MDc2Njk1NThiZjY2YWUxNWY1MzBjOGFhNDMxNjg2Y2FlOTE2NThjNTMxNjI0MDM0ODYxOTk1YTc5NDdhMzE4YWE0OGE3M2YxZDkzN2ZkNWMwM2EwZTc0NGM4MWI2MWZlMzY3MDJjZDM0Mzk5M2I0MmJiYTM3MmVkMWFjYzA5N2QsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUXlPVFV5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
@Component({
standalone: true,
selector: "app-root",
template: `
<div #spreadsheet></div>
<button (click)="handleSetFreeze()">setFreezeColumns(2)</button>
<button (click)="handleReset()">resetFreezeColumns()</button>
`
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
// Worksheets
worksheets: jspreadsheet.worksheetInstance[];
// Create a new data grid
ngAfterViewInit() {
// Create spreadsheet
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
worksheets: [
minDimensions: [50,20],
tableOverflow: true,
tableWidth: '800px',
freezeColumns: 1
}]
});
}
handleSetFreeze() {
this.worksheets[0].setFreezeColumns(2)
}
handleReset() {
this.worksheets[0].resetFreezeColumns()
}
}
Manual Freeze Column Controls
Enable users to manually set the number of frozen columns through manual freeze controls.
<html>
<script src="https://jspreadsheet.com/v11/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/v11/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>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
const license = 'MDc2Njk1NThiZjY2YWUxNWY1MzBjOGFhNDMxNjg2Y2FlOTE2NThjNTMxNjI0MDM0ODYxOTk1YTc5NDdhMzE4YWE0OGE3M2YxZDkzN2ZkNWMwM2EwZTc0NGM4MWI2MWZlMzY3MDJjZDM0Mzk5M2I0MmJiYTM3MmVkMWFjYzA5N2QsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUXlPVFV5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
export default function App() {
// Spreadsheet array of worksheets
const spreadsheet = useRef();
// Render component
return (
<Spreadsheet ref={spreadsheet} license={license}>
<Worksheet
minDimensions={[50,20]}
tableOverflow
tableWidth="800"
freezeRowControl
freezeColumnControl />
</Spreadsheet>
);
}
<template>
<Spreadsheet ref="spreadsheet" :license="license">
<Worksheet
:minDimensions="[50,20]"
tableOverflow
tableWidth="800"
freezeRowControl
freezeColumnControl />
</Spreadsheet>
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
const license = 'MDc2Njk1NThiZjY2YWUxNWY1MzBjOGFhNDMxNjg2Y2FlOTE2NThjNTMxNjI0MDM0ODYxOTk1YTc5NDdhMzE4YWE0OGE3M2YxZDkzN2ZkNWMwM2EwZTc0NGM4MWI2MWZlMzY3MDJjZDM0Mzk5M2I0MmJiYTM3MmVkMWFjYzA5N2QsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUXlPVFV5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
export default {
components: {
Spreadsheet,
Worksheet,
},
data() {
return {
// License
license: license,
};
}
}
</script>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MDc2Njk1NThiZjY2YWUxNWY1MzBjOGFhNDMxNjg2Y2FlOTE2NThjNTMxNjI0MDM0ODYxOTk1YTc5NDdhMzE4YWE0OGE3M2YxZDkzN2ZkNWMwM2EwZTc0NGM4MWI2MWZlMzY3MDJjZDM0Mzk5M2I0MmJiYTM3MmVkMWFjYzA5N2QsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUXlPVFV5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
@Component({
standalone: true,
selector: "app-root",
template: `<div #spreadsheet></div>`
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
// Worksheets
worksheets: jspreadsheet.worksheetInstance[];
// Create a new data grid
ngAfterViewInit() {
// Create spreadsheet
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
worksheets: [
minDimensions: [50,20],
tableOverflow: true,
tableWidth: '800px',
freezeRowControl: true,
freezeColumnControl: true,
}]
});
}
}