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 |
Freeze the specified columns. Accepts a number or an array of consecutive numbers.setFreezeColumns(columns: Number|Number[]) : void |
resetFreezeColumns |
Remove all freeze columns.resetFreezeColumns() : void |
Initial Settings
The following properties are available during spreadsheet initialization.
Property | Description |
---|---|
freezeColumns: number|number[] |
Define the frozen columns on initialization. |
freezeColumnControl: boolean Enterprise |
Enable manual freeze column control. Default: false |
Events
Available events.
Event | Description |
---|---|
onfreezecolumns |
onfreezecolumns(worksheet: Object, columns: Number[]) : void |
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/v12/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://jspreadsheet.com/v12/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('MTI1ZjY2ZGZmMjIwYTk3N2NhOTM4ZTc5NzdkYjA4OGI2NDZkOWU2YjRkYjk1YWViYTUwZDI4NGIwNTg4OGU4NDQ0YzVjMWZjMDA4ZWU1ZTI5NTc1NTAyZGI0MTE4MDc3ZGJkZDZiNTRkYTQ0ZGQwMGRhMGYzNDU3MDZkMGU2MWUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNamt5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
// Create a new spreadsheet
let spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {
tableOverflow: true,
tableWidth: '800px',
worksheets: [{
minDimensions: [50,20],
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, jspreadsheet} from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MTI1ZjY2ZGZmMjIwYTk3N2NhOTM4ZTc5NzdkYjA4OGI2NDZkOWU2YjRkYjk1YWViYTUwZDI4NGIwNTg4OGU4NDQ0YzVjMWZjMDA4ZWU1ZTI5NTc1NTAyZGI0MTE4MDc3ZGJkZDZiNTRkYTQ0ZGQwMGRhMGYzNDU3MDZkMGU2MWUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNamt5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
export default function App() {
// Spreadsheet array of worksheets
const spreadsheet = useRef();
// Render component
return (
<>
<Spreadsheet ref={spreadsheet} tableOverflow={true} tableWidth="800">
<Worksheet minDimensions={[50, 20]} 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" :tableOverflow="true" tableWidth="800" >
<Worksheet :minDimensions="[50,20]" freezeColumns="1" />
</Spreadsheet>
<button @click="handleSetFreeze">setFreezeColumns(2)</button>
<button @click="handleReset">resetFreezeColumns()</button>
</template>
<script>
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MTI1ZjY2ZGZmMjIwYTk3N2NhOTM4ZTc5NzdkYjA4OGI2NDZkOWU2YjRkYjk1YWViYTUwZDI4NGIwNTg4OGU4NDQ0YzVjMWZjMDA4ZWU1ZTI5NTc1NTAyZGI0MTE4MDc3ZGJkZDZiNTRkYTQ0ZGQwMGRhMGYzNDU3MDZkMGU2MWUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNamt5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
export default {
components: {
Spreadsheet,
Worksheet,
},
methods: {
handleSetFreeze: function () {
this.$refs.spreadsheet[0].setFreezeColumns(2)
},
handleReset: function () {
this.$refs.spreadsheet[0].resetFreezeColumns()
}
},
}
</script>
import { Component, ViewChild, ElementRef, AfterViewInit } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MTI1ZjY2ZGZmMjIwYTk3N2NhOTM4ZTc5NzdkYjA4OGI2NDZkOWU2YjRkYjk1YWViYTUwZDI4NGIwNTg4OGU4NDQ0YzVjMWZjMDA4ZWU1ZTI5NTc1NTAyZGI0MTE4MDc3ZGJkZDZiNTRkYTQ0ZGQwMGRhMGYzNDU3MDZkMGU2MWUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNamt5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
@Component({
standalone: true,
selector: "app-root",
template: `
<div #spreadsheet></div>
<button (click)="handleSetFreeze()">setFreezeColumns(2)</button>
<button (click)="handleReset()">resetFreezeColumns()</button>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
// Worksheets
worksheets: jspreadsheet.worksheetInstance[];
// Create a new data grid
ngAfterViewInit() {
// Create spreadsheet
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
tableOverflow: true,
tableWidth: '800px',
worksheets: [{
minDimensions: [50,20],
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/v12/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://jspreadsheet.com/v12/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('MTI1ZjY2ZGZmMjIwYTk3N2NhOTM4ZTc5NzdkYjA4OGI2NDZkOWU2YjRkYjk1YWViYTUwZDI4NGIwNTg4OGU4NDQ0YzVjMWZjMDA4ZWU1ZTI5NTc1NTAyZGI0MTE4MDc3ZGJkZDZiNTRkYTQ0ZGQwMGRhMGYzNDU3MDZkMGU2MWUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNamt5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
jspreadsheet(document.getElementById('spreadsheet'), {
tableOverflow: true,
tableWidth: '800px',
worksheets: [{
minDimensions: [50,20],
freezeRowControl: true,
freezeColumnControl: true,
}]
});
</script>
</html>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MTI1ZjY2ZGZmMjIwYTk3N2NhOTM4ZTc5NzdkYjA4OGI2NDZkOWU2YjRkYjk1YWViYTUwZDI4NGIwNTg4OGU4NDQ0YzVjMWZjMDA4ZWU1ZTI5NTc1NTAyZGI0MTE4MDc3ZGJkZDZiNTRkYTQ0ZGQwMGRhMGYzNDU3MDZkMGU2MWUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNamt5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
export default function App() {
// Spreadsheet array of worksheets
const spreadsheet = useRef();
// Render component
return (
<Spreadsheet ref={spreadsheet} tableOverflow={true} tableWidth="800">
<Worksheet minDimensions={[50,20]} freezeRowControl={true} freezeColumnControl={true} />
</Spreadsheet>
);
}
<template>
<Spreadsheet ref="spreadsheet" :tableOverflow="true" tableWidth="800px">
<Worksheet :minDimensions="[50,20]" :freezeRowControl="true" :freezeColumnControl="true" />
</Spreadsheet>
</template>
<script>
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MTI1ZjY2ZGZmMjIwYTk3N2NhOTM4ZTc5NzdkYjA4OGI2NDZkOWU2YjRkYjk1YWViYTUwZDI4NGIwNTg4OGU4NDQ0YzVjMWZjMDA4ZWU1ZTI5NTc1NTAyZGI0MTE4MDc3ZGJkZDZiNTRkYTQ0ZGQwMGRhMGYzNDU3MDZkMGU2MWUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNamt5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
export default {
components: {
Spreadsheet,
Worksheet,
},
}
</script>
import { Component, ViewChild, ElementRef, AfterViewInit } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MTI1ZjY2ZGZmMjIwYTk3N2NhOTM4ZTc5NzdkYjA4OGI2NDZkOWU2YjRkYjk1YWViYTUwZDI4NGIwNTg4OGU4NDQ0YzVjMWZjMDA4ZWU1ZTI5NTc1NTAyZGI0MTE4MDc3ZGJkZDZiNTRkYTQ0ZGQwMGRhMGYzNDU3MDZkMGU2MWUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNamt5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
@Component({
standalone: true,
selector: "app-root",
template: `<div #spreadsheet></div>`
})
export class AppComponent implements AfterViewInit {
@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,
}]
});
}
}