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',
            }]
        });
    }
}

Viewport

Documentation

Methods

Settings

Events

Example

Change the spreadsheet viewport dimensions

JavaScript example

React example

Vue example

Angular example

Goto

JavaScript example

React example

Vue example

Angular example

Create applications with spreadsheet-like controls