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.

 ABCDEFG
1A1B1C1D1E1F1G1
2A2B2C2D2E2F2G2
3A3B3C3D3E3F3G3
4A4B4C4D4E4F4G4
5A5B5C5D5E5F5G5
6A6B6C6D6E6F6G6
7A7B7C7D7E7F7G7
8A8B8C8D8E8F8G8
9A9B9C9D9E9F9G9
10A10B10C10D10E10F10G10
11A11B11C11D11E11F11G11
12A12B12C12D12E12F12G12
13A13B13C13D13E13F13G13
14A14B14C14D14E14F14G14
15A15B15C15D15E15F15G15

  • See this example in JavaScript
  • See this example in React
  • See this example in VueJS
  • See this example in Angular
<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>

<br/>
<input type="text" value="800px" style="width:60px" />
<input type="text" value="400px" style="width:60px" />
<input type="button" value="Set viewport" id="setviewport"/>
<input type="button" value="Set fullscreen" id="setfullscren"/>

<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MjZmNWEzNGRiMDQ1MWI3NWIyMzRiMTA4MzdkMzU4YjZlNjgwNThkMWU4ODg5MGMxYjBlYzc3YmIxYjg0ZjA5MWI1MjE3MGVhNmM5ZTc3ZGI5MzE0YTU1ZDM4MmVjMzNmNDdlYTMzY2E2YjA5NDA1ODQxYmE3YmRhODk2ZDU5YzMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRME1EY3pOREk0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

// Create the spreadsheet
let setViewport = function(o) {
    // First worksheet
    grid[0].setViewport(o.previousElementSibling.previousElementSibling.value, o.previousElementSibling.value);
}

let 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);
     }
}

let grid = jspreadsheet(document.getElementById('spreadsheet'), {
    toolbar: true,
    worksheets: [{
        data: data,
        tableOverflow: true,
        tableWidth: '600px',
        // Enable resize on both directions
        resize: 'both',
    }]
});

document.getElementById("setviewport").onclick = (e) => setViewport(e.target)
document.getElementById("setfullscren").onclick = () => grid[0].fullscreen(true)
</script>
</html>

import React, { useRef } from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react";

const license = 'MjZmNWEzNGRiMDQ1MWI3NWIyMzRiMTA4MzdkMzU4YjZlNjgwNThkMWU4ODg5MGMxYjBlYzc3YmIxYjg0ZjA5MWI1MjE3MGVhNmM5ZTc3ZGI5MzE0YTU1ZDM4MmVjMzNmNDdlYTMzY2E2YjA5NDA1ODQxYmE3YmRhODk2ZDU5YzMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRME1EY3pOREk0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

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)} />
        </>
    );
}

<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 = 'MjZmNWEzNGRiMDQ1MWI3NWIyMzRiMTA4MzdkMzU4YjZlNjgwNThkMWU4ODg5MGMxYjBlYzc3YmIxYjg0ZjA5MWI1MjE3MGVhNmM5ZTc3ZGI5MzE0YTU1ZDM4MmVjMzNmNDdlYTMzY2E2YjA5NDA1ODQxYmE3YmRhODk2ZDU5YzMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRME1EY3pOREk0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

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>

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('MjZmNWEzNGRiMDQ1MWI3NWIyMzRiMTA4MzdkMzU4YjZlNjgwNThkMWU4ODg5MGMxYjBlYzc3YmIxYjg0ZjA5MWI1MjE3MGVhNmM5ZTc3ZGI5MzE0YTU1ZDM4MmVjMzNmNDdlYTMzY2E2YjA5NDA1ODQxYmE3YmRhODk2ZDU5YzMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRME1EY3pOREk0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

// 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);
     }
}

@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
    ngAfterViewInit() {
        // 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.

 ABCDEF
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

  • See this example in JavaScript
  • See this example in React
  • See this example in VueJS
  • See this example in Angular
<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>

<br/>
<input type="button" value="Go to row number 500" id="goto500" />

<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MjZmNWEzNGRiMDQ1MWI3NWIyMzRiMTA4MzdkMzU4YjZlNjgwNThkMWU4ODg5MGMxYjBlYzc3YmIxYjg0ZjA5MWI1MjE3MGVhNmM5ZTc3ZGI5MzE0YTU1ZDM4MmVjMzNmNDdlYTMzY2E2YjA5NDA1ODQxYmE3YmRhODk2ZDU5YzMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRME1EY3pOREk0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

// Create the spreadsheet
let grid = jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        minDimensions: [6, 5000],
        tableOverflow: true,
        tableWidth: '600px',
    }]
});

document.getElementById("goto500").onclick = () => grid[0].goto(499);
</script>
</html>

import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";

const license = 'MjZmNWEzNGRiMDQ1MWI3NWIyMzRiMTA4MzdkMzU4YjZlNjgwNThkMWU4ODg5MGMxYjBlYzc3YmIxYjg0ZjA5MWI1MjE3MGVhNmM5ZTc3ZGI5MzE0YTU1ZDM4MmVjMzNmNDdlYTMzY2E2YjA5NDA1ODQxYmE3YmRhODk2ZDU5YzMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRME1EY3pOREk0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

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)} />
        </>
    );
}

<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 = 'MjZmNWEzNGRiMDQ1MWI3NWIyMzRiMTA4MzdkMzU4YjZlNjgwNThkMWU4ODg5MGMxYjBlYzc3YmIxYjg0ZjA5MWI1MjE3MGVhNmM5ZTc3ZGI5MzE0YTU1ZDM4MmVjMzNmNDdlYTMzY2E2YjA5NDA1ODQxYmE3YmRhODk2ZDU5YzMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRME1EY3pOREk0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    methods: {
        goto(row) {
            this.$refs.spreadsheet.current[0].goto(row);
        }
    },
    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('MjZmNWEzNGRiMDQ1MWI3NWIyMzRiMTA4MzdkMzU4YjZlNjgwNThkMWU4ODg5MGMxYjBlYzc3YmIxYjg0ZjA5MWI1MjE3MGVhNmM5ZTc3ZGI5MzE0YTU1ZDM4MmVjMzNmNDdlYTMzY2E2YjA5NDA1ODQxYmE3YmRhODk2ZDU5YzMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRME1EY3pOREk0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

@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
    ngAfterViewInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            worksheets: [{
                minDimensions: [6, 5000],
                tableOverflow: true,
                tableWidth: '600px',
            }]
        });
    }
}

Edit this page on GitHub