Viewport
The viewport is a crucial feature in the JSS JavaScript grid, referring to the visible section of the table displayed on the user's screen. When enabled, the viewport option enhances JSS's performance, rendering only visible cells and boosting performance when dealing with massive data sets. There are two configurations available for enabling the viewport:
Fullscreen : This configuration sets the table dimensions to utilize the available screen area.
TableOverflow : This configuration enables the viewport along with the properties tableWidth and tableHeight, allowing developers to customize the viewport's width and height, respectively.
Pagination : This configuration defines the number of rows visible to the user and creates page navigation.
Developers can define these properties at the worksheet level, allowing them to set different viewport sizes for each worksheet. This capability enables developers to optimize data display for various devices or use cases.
Falar sobre a definicao do viewport via style.
Documentation
Methods
The following methods interact with the worksheets viewport programmatically.
Method Description
setViewport instance.setViewport(w: Number, h: Number) => void
fullscreen instance.fullscreen(state: Boolean) => void
goto instance.goto(y: Number, x?: Number) => void
left instance.left(shiftKey?: Boolean, ctrlKey?: Boolean, jump?: Boolean) => void
top instance.top(shiftKey?: Boolean, ctrlKey?: Boolean, jump?: Boolean) => void
right instance.right(shiftKey?: Boolean, ctrlKey?: Boolean, jump?: Boolean) => void
down instance.down(shiftKey?: Boolean, ctrlKey?: Boolean, jump?: Boolean) => void
last instance.last(shiftKey?: Boolean, ctrlKey?: Boolean) => void
first instance.first(shiftKey?: Boolean, ctrlKey?: Boolean) => void
Settings
Related settings.
Property Description
tableOverflow: boolean Enable the spreadsheet viewport.
tableWidth: number Spreadsheet viewport width.
tableHeight: number Spreadsheet Viewport height.
resize: string Enable resizable viewport.
fullscreen: boolean Fullscreen viewport.
virtualizationX: boolean Enable virtualization on the columns. Default true.
virtualizationY: boolean Enable virtualization on the rows. Default true.
Events
The following events are related to the viewport:
Method Description
onresize onresize(worksheet: Object, w: Number, h: Number) => void
Example
Change the spreadsheet viewport dimensions
This example demonstrates how to change the visible viewport area dynamically.
JavaScript example
<html>
<script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" />
<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://fonts.googleapis.com/css?family=Material+Icons" />
<div id="spreadsheet"></div>
<input type="text" value="800px" style="width:60px" />
<input type="text" value="400px" style="width:60px" />
<input type="button" value="Set viewport" onclick="setViewport(this)" />
<input type="button" value="Set fullscreen" onclick="grid[0].fullscreen(true)" />
<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MWZhYjliOWYzMTAzMTM2MzU2MzIxZWY5ODVhODJiZmJmNDUyZmRmNjMyMDkwNTFlN2RhYTY4MjM5NmQyMjJhNTFmMTFlZDI2NzdjNTAzYmEyNjFkNmE3M2E1MGE0MjcwMjcwMzFlNGIyOGZjOWZmYzY2NzJhYjc0YTFjMDM3OGQsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGd6T0RFd05Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');
// Create the spreadsheet
function setViewport = function(o) {
// First worksheet
grid[0].setViewport(o.previousElementSibling.previousElementSibling.value, o.previousElementSibling.value);
}
var data = [];
// Create the data
for (var j = 0; j < 500; j++) {
data[j] = [];
for (var i = 0; i < 20; i++) {
data[j][i] = jspreadsheet.helpers.getColumnNameFromCoords(i, j);
}
}
var grid = jspreadsheet(document.getElementById('spreadsheet'), {
toolbar: true,
worksheets: [{
data: data,
tableOverflow: true,
tableWidth: '600px',
// Enable resize on both directions
resize: 'both',
}]
});
</script>
</html>
React example
import React, { useRef } from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react";
const license = 'MWZhYjliOWYzMTAzMTM2MzU2MzIxZWY5ODVhODJiZmJmNDUyZmRmNjMyMDkwNTFlN2RhYTY4MjM5NmQyMjJhNTFmMTFlZDI2NzdjNTAzYmEyNjFkNmE3M2E1MGE0MjcwMjcwMzFlNGIyOGZjOWZmYzY2NzJhYjc0YTFjMDM3OGQsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGd6T0RFd05Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';
const getData = () => {
// Data
const data = [];
// Create the data
for (let j = 0; j < 500; j++) {
data[j] = [];
for (let i = 0; i < 20; i++) {
data[j][i] = jspreadsheet.helpers.getColumnNameFromCoords(i, j);
}
}
return data;
}
export default function App() {
// Spreadsheet array of worksheets
const spreadsheet = useRef();
const width = useRef();
const height = useRef();
// Data
const data = getData();
// Resize viewport
const setViewport = () => {
spreadsheet.current[0].setViewport(width.current, height.current);
}
// Render data grid component
return (
<>
<Spreadsheet ref={spreadsheet} license={license} toolbar>
<Worksheet data={data} tableOverflow tableWidth="600px" resize="both" />
</Spreadsheet>
<input type="text" value="800px" style={{ width: '60px' }} ref={width} />
<input type="text" value="400px" style={{ width: '60px' }} ref={height} />
<input type="button" value="Set viewport" onClick={() => setViewport()} />
<input type="button" value="Set fullscreen" onClick={() => spreadsheet.current[0].fullscreen(true)} />
</>
);
}
Vue example
<template>
<Spreadsheet ref="spreadsheet" :license="license">
<Worksheet :data="data" tableOverflow tableWidth="600px" resize="both" />
</Spreadsheet>
<input type="text" value="800px" style="width:60px" ref="width" />
<input type="text" value="400px" style="width:60px" ref="height" />
<input type="button" value="Set viewport" @click="setViewport" />
<input type="button" value="Set fullscreen" @click="fullScreen" />
</template>
<script>
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue";
const license = 'MWZhYjliOWYzMTAzMTM2MzU2MzIxZWY5ODVhODJiZmJmNDUyZmRmNjMyMDkwNTFlN2RhYTY4MjM5NmQyMjJhNTFmMTFlZDI2NzdjNTAzYmEyNjFkNmE3M2E1MGE0MjcwMjcwMzFlNGIyOGZjOWZmYzY2NzJhYjc0YTFjMDM3OGQsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGd6T0RFd05Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';
const getData = () => {
// Data
const data = [];
// Create the data
for (let j = 0; j < 500; j++) {
data[j] = [];
for (let i = 0; i < 20; i++) {
data[j][i] = jspreadsheet.helpers.getColumnNameFromCoords(i, j);
}
}
return data;
}
export default {
components: {
Spreadsheet,
Worksheet,
},
methods: {
setViewport() {
this.$refs.spreadsheet.current[0].setViewport(this.$refs.width.value.value, this.$refs.height.value.value);
},
fullScreen:() {
this.$refs.spreadsheet.current[0].setViewport.fullscreen(true);
}
},
data() {
return {
// License
license: license,
// Data
data: getData(),
};
}
}
</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('MWZhYjliOWYzMTAzMTM2MzU2MzIxZWY5ODVhODJiZmJmNDUyZmRmNjMyMDkwNTFlN2RhYTY4MjM5NmQyMjJhNTFmMTFlZDI2NzdjNTAzYmEyNjFkNmE3M2E1MGE0MjcwMjcwMzFlNGIyOGZjOWZmYzY2NzJhYjc0YTFjMDM3OGQsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGd6T0RFd05Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');
// Data
const data = [];
// Create the data
for (var j = 0; j < 500; j++) {
data[j] = [];
for (var i = 0; i < 20; i++) {
data[j][i] = jspreadsheet.helpers.getColumnNameFromCoords(i, j);
}
}
@Component({
selector: "app-root",
template: `<div #spreadsheet></div>
<input type="text" value="800px" style="width:60px" ref="width" />
<input type="text" value="400px" style="width:60px" ref="height" />
<input type="button" value="Set viewport" (click)="setViewport" />
<input type="button" value="Set fullscreen" (click)="fullScreen" />`;
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
@ViewChild("width") width: ElementRef;
@ViewChild("height") height: ElementRef;
// Worksheets
worksheets: jspreadsheet.worksheetInstance[];
// Create a new data grid
ngOnInit() {
// Create spreadsheet
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
toolbar: true,
worksheets: [{
data: data,
tableOverflow: true,
tableWidth: '600px',
// Enable resize on both directions
resize: 'both',
}]
});
}
setViewport() {
this.worksheets[0].setViewport(this.width.nativeElement.value, this.height.nativeElement.value);
},
fullScreen:() {
this.worksheets[0].setViewport.fullscreen(true);
}
}
Goto
Move the viewport to a specified row or cell.
JavaScript example
<html>
<script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" />
<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://fonts.googleapis.com/css?family=Material+Icons" />
<div id="spreadsheet"></div>
<input type="button" value="Goto row number 500" onclick="grid[0].goto(499)" />
<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MWZhYjliOWYzMTAzMTM2MzU2MzIxZWY5ODVhODJiZmJmNDUyZmRmNjMyMDkwNTFlN2RhYTY4MjM5NmQyMjJhNTFmMTFlZDI2NzdjNTAzYmEyNjFkNmE3M2E1MGE0MjcwMjcwMzFlNGIyOGZjOWZmYzY2NzJhYjc0YTFjMDM3OGQsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGd6T0RFd05Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');
// Create the spreadsheet
var grid = jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [{
minDimensions: [6, 5000],
tableOverflow: true,
tableWidth: '600px',
}]
});
</script>
</html>
React example
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
const license = 'MWZhYjliOWYzMTAzMTM2MzU2MzIxZWY5ODVhODJiZmJmNDUyZmRmNjMyMDkwNTFlN2RhYTY4MjM5NmQyMjJhNTFmMTFlZDI2NzdjNTAzYmEyNjFkNmE3M2E1MGE0MjcwMjcwMzFlNGIyOGZjOWZmYzY2NzJhYjc0YTFjMDM3OGQsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGd6T0RFd05Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';
export default function App() {
// Spreadsheet array of worksheets
const spreadsheet = useRef();
// Render data grid component
return (
<>
<Spreadsheet ref={spreadsheet} license={license}>
<Worksheet minDimensions={[6,5000]} tableOverflow tableWidth="600px" />
</Spreadsheet>
<input type="button" value="Goto row number 500" onClick={() => spreadsheet.current[0].goto(499)} />
</>
);
}
Vue example
<template>
<Spreadsheet ref="spreadsheet" :license="license">
<Worksheet :minDimensions="[6,5000]" tableOverflow tableWidth="600px" />
</Spreadsheet>
<input type="button" value="Goto row number 500" @click="goto(499)" />
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
const license = 'MWZhYjliOWYzMTAzMTM2MzU2MzIxZWY5ODVhODJiZmJmNDUyZmRmNjMyMDkwNTFlN2RhYTY4MjM5NmQyMjJhNTFmMTFlZDI2NzdjNTAzYmEyNjFkNmE3M2E1MGE0MjcwMjcwMzFlNGIyOGZjOWZmYzY2NzJhYjc0YTFjMDM3OGQsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGd6T0RFd05Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';
export default {
components: {
Spreadsheet,
Worksheet,
},
methods: {
goto(row) {
this.$refs.spreadsheet.current[0].goto(row);
}
},
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('MWZhYjliOWYzMTAzMTM2MzU2MzIxZWY5ODVhODJiZmJmNDUyZmRmNjMyMDkwNTFlN2RhYTY4MjM5NmQyMjJhNTFmMTFlZDI2NzdjNTAzYmEyNjFkNmE3M2E1MGE0MjcwMjcwMzFlNGIyOGZjOWZmYzY2NzJhYjc0YTFjMDM3OGQsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGd6T0RFd05Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');
@Component({
selector: "app-root",
template: `<div #spreadsheet></div>
<input type="button" value="Goto row number 500" (click)="this.worksheets[0].goto(499)" />`;
})
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: [6, 5000],
tableOverflow: true,
tableWidth: '600px',
}]
});
}
}