Freeze rows
Jspreadsheet's freeze rows property allows you to sticky the given rows at the top of the spreadsheet, even as you scroll down. This feature can be handy when working with large datasets, as it helps to keep important information in view at all times.
Documentation
Methods
Define or reset the number of freeze rows programmatically.
Method Description
setFreezeRows(number|number[])
Set the freeze rows.setFreezeRows(number: Number|Number[]) : void
resetFreezeRows()
Reset the freeze rows.resetFreezeRows() : void
Initial Settings
The following property is available through the initialization of the online spreadsheet.
Property Description
freezeRows: number|number[] Define the frozen rows on initialization. freezeRowControl: boolean Premium Enable freeze row manual control. Default: false
Examples
Basic freeze rows usage.
It is possible to define the viewport when using the freeze rows, as follow:
Source code
<html>
<script src="https://jspreadsheet.com/v10/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/v10/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="setFreezeRows(2)" onclick="spreadsheet[0].setFreezeRows(2);" />
<input type="button" value="resetFreezeRows()" onclick="spreadsheet[0].resetFreezeRows();" />
<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('ODA5MWMyZmQ4OGY5ZTU5N2NjMjBlNjBlMGNlMGJmM2YwMDIwNmRhZWYzODRhMzlkYzcwZDRhOWVhYjFiZjQ3OTllMGY3NmUwNjgyZjAyNmVlN2NjOGQ2ZTRlZjJjZjM4MjRhZWRhNzEyNGRkYjM0ODY5Mjg4ZGUzNDBjMjY5MWYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6TnpZM015d2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');
// Create a new spreadsheet
const spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [{
minDimensions: [50,20],
tableOverflow: true,
tableWidth: '800px',
freezeRows: 4,
}]
});
</script>
</html>
React example
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
const license = 'ODA5MWMyZmQ4OGY5ZTU5N2NjMjBlNjBlMGNlMGJmM2YwMDIwNmRhZWYzODRhMzlkYzcwZDRhOWVhYjFiZjQ3OTllMGY3NmUwNjgyZjAyNmVlN2NjOGQ2ZTRlZjJjZjM4MjRhZWRhNzEyNGRkYjM0ODY5Mjg4ZGUzNDBjMjY5MWYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6TnpZM015d2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';
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"
freezeRows="4" />
</Spreadsheet>
<input type="button" value="setFreezeRows(2)" onClick={() => spreadsheet.current[0].setFreezeRows(2)} />
<input type="button" value="resetFreezeRows()" onClick={() => spreadsheet.current[0].resetFreezeRows()} />
</>
);
}
Vue example
<template>
<Spreadsheet ref="spreadsheet" :license="license">
<Worksheet
:minDimensions="[50,20]"
:tableOverflow
tableWidth="800"
freezeRows="4" />
</Spreadsheet>
<input type="button" value="setFreezeRows(2)" @click="setFreezeRows(2)" />
<input type="button" value="resetFreezeRows()" @click="resetFreezeRows()" />
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
const license = 'ODA5MWMyZmQ4OGY5ZTU5N2NjMjBlNjBlMGNlMGJmM2YwMDIwNmRhZWYzODRhMzlkYzcwZDRhOWVhYjFiZjQ3OTllMGY3NmUwNjgyZjAyNmVlN2NjOGQ2ZTRlZjJjZjM4MjRhZWRhNzEyNGRkYjM0ODY5Mjg4ZGUzNDBjMjY5MWYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6TnpZM015d2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';
export default {
components: {
Spreadsheet,
Worksheet,
},
methods: {
setFreezeRows(number) {
alert(this.$refs.spreadsheet.current[0].setFreezeRows(number));
},
resetFreezeRows() {
this.$refs.spreadsheet.current[0].resetFreezeRows();
},
},
data() {
return {
// License
license: license,
};
}
}
</script>
Angular example
import { Component, ViewChild, ElementRef } from "@angular/core";
import * as jspreadsheet from "jspreadsheet";
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('ODA5MWMyZmQ4OGY5ZTU5N2NjMjBlNjBlMGNlMGJmM2YwMDIwNmRhZWYzODRhMzlkYzcwZDRhOWVhYjFiZjQ3OTllMGY3NmUwNjgyZjAyNmVlN2NjOGQ2ZTRlZjJjZjM4MjRhZWRhNzEyNGRkYjM0ODY5Mjg4ZGUzNDBjMjY5MWYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6TnpZM015d2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');
@Component({
selector: "app-root",
template: `
<div #spreadsheet></div>
<input type="button" value="setFreezeRows(2)" (click)="this.worksheets[0].setFreezeRows(2)" />
<input type="button" value="resetFreezeRows()" (click)="this.worksheets[0].resetFreezeRows()" />
`
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
// Worksheets
worksheets: jspreadsheet.worksheetInstance[];
// Create a new data grid
ngOnInit() {
// Create spreadsheet
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
worksheets: [
minDimensions: [50,20],
tableOverflow: true,
tableWidth: '800px',
freezeRows: 4,
}]
});
}
}
Enable manual freeze controls
Enable the interface controls for manual adjustments.
Source code
<html>
<script src="https://jspreadsheet.com/v10/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/v10/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('ODA5MWMyZmQ4OGY5ZTU5N2NjMjBlNjBlMGNlMGJmM2YwMDIwNmRhZWYzODRhMzlkYzcwZDRhOWVhYjFiZjQ3OTllMGY3NmUwNjgyZjAyNmVlN2NjOGQ2ZTRlZjJjZjM4MjRhZWRhNzEyNGRkYjM0ODY5Mjg4ZGUzNDBjMjY5MWYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6TnpZM015d2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');
// Create a new spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [{
minDimensions: [50,20],
tableOverflow: true,
tableWidth: '800px',
freezeRowControl: true,
freezeColumnControl: true,
}]
});
</script>
</html>
React example
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
const license = 'ODA5MWMyZmQ4OGY5ZTU5N2NjMjBlNjBlMGNlMGJmM2YwMDIwNmRhZWYzODRhMzlkYzcwZDRhOWVhYjFiZjQ3OTllMGY3NmUwNjgyZjAyNmVlN2NjOGQ2ZTRlZjJjZjM4MjRhZWRhNzEyNGRkYjM0ODY5Mjg4ZGUzNDBjMjY5MWYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6TnpZM015d2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';
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>
);
}
Vue example
<template>
<Spreadsheet ref="spreadsheet" :license="license">
<Worksheet
:minDimensions="[50,20]"
:tableOverflow
:tableWidth="800"
:freezeRowControl
:freezeColumnControl />
</Spreadsheet>
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
const license = 'ODA5MWMyZmQ4OGY5ZTU5N2NjMjBlNjBlMGNlMGJmM2YwMDIwNmRhZWYzODRhMzlkYzcwZDRhOWVhYjFiZjQ3OTllMGY3NmUwNjgyZjAyNmVlN2NjOGQ2ZTRlZjJjZjM4MjRhZWRhNzEyNGRkYjM0ODY5Mjg4ZGUzNDBjMjY5MWYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6TnpZM015d2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';
export default {
components: {
Spreadsheet,
Worksheet,
},
data() {
return {
license
}
}
}
<script>
Angular example
import { Component, ViewChild, ElementRef } from "@angular/core";
import * as jspreadsheet from "jspreadsheet";
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('ODA5MWMyZmQ4OGY5ZTU5N2NjMjBlNjBlMGNlMGJmM2YwMDIwNmRhZWYzODRhMzlkYzcwZDRhOWVhYjFiZjQ3OTllMGY3NmUwNjgyZjAyNmVlN2NjOGQ2ZTRlZjJjZjM4MjRhZWRhNzEyNGRkYjM0ODY5Mjg4ZGUzNDBjMjY5MWYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6TnpZM015d2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');
@Component({
selector: "app-root",
template: `<div #spreadsheet></div>`
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
// Worksheets
worksheets: jspreadsheet.worksheetInstance[];
// Create a new data grid
ngOnInit() {
// Create spreadsheet
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
worksheets: [
minDimensions: [50,20],
tableOverflow: true,
tableWidth: '800px',
freezeRowControl: true,
freezeColumnControl: true,
}]
});
}
}
