The viewport delimits the area of the visible cells in the javascript grid. When the viewport is enabled JSS will handle the data rendering only the necessary visible cells. That means viewport is the most important configuration when dealing with a large amount of data.

The tableOverflow: true would enable the viewport along the properties tableWidth and tableHeight to define the viewport width and height respectively. It is also possible to use fullscreen: true to make sure all available screen area is used for cell rendering.

Those properties are defined at the worksheet level. It means the developer can choose different viewport sizes for each worksheet.



The following methods interact with the worksheets viewport programmatically.
setViewportinstance.setViewport(w: Number, h: number) => void
fullscreeninstance.fullscreen(state: Boolean) => void


The follow example helps to change the viewport visible area dinamically.

Source code

<script src=""></script>
<link rel="stylesheet" href="" type="text/css" />
<script src=""></script>
<link rel="stylesheet" href="" type="text/css" />

<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)" class="jbutton dark" />
<input type="button" value="Set fullscreen" onclick="grid[0].fullscreen(true)" />

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',