Back to the Documentation

Spreadsheet Viewport

The viewport delimits the area of the visible cells in the JavaScript grid. When the viewport is enabled, JSS will render only the necessary visible cells. That means viewport is the most important configuration when dealing with a large amount of data. tableOverflow: true will 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. That means the developer can choose different viewport sizes for each worksheet.

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(x: Number, y: Number) => void

Example

Change the spreadsheet viewport dimensions

The following example changes the visible viewport area dynamically.

undo
redo
save
format_bold
format_color_text
format_color_fill
fullscreen
search
ABCDEF
1A1B1C1D1E1F1
2A2B2C2D2E2F2
3A3B3C3D3E3F3
4A4B4C4D4E4F4
5A5B5C5D5E5F5
6A6B6C6D6E6F6
7A7B7C7D7E7F7
8A8B8C8D8E8F8
9A9B9C9D9E9F9
10A10B10C10D10E10F10
11A11B11C11D11E11F11
12A12B12C12D12E12F12
13A13B13C13D13E13F13
14A14B14C14D14E14F14
15A15B15C15D15E15F15

<html>
<script src="https://jspreadsheet.com/v8/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v8/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" />

<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 the JSS spreadsheet license
jspreadsheet.setLicense('ZmRhZjJiZDRjYjZkODQ0ZTlkZTliYmIyYzNlNjU5Zjg3ZWQyNTQwZjFlYWY2MWNmNzc1OGQ3NTUxNDRmMWUwZTVmNzJiM2UwZWI1MzhlMjNlZDg1NDg4MTA1MWMxNzJmMWFlYjM2Y2Y3ZjY4MzMxNDJiZDc1ZTNhMWY5YjBiNTYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRME1qUTBPRE01TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

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

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

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

<html>
<script src="https://jspreadsheet.com/v8/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v8/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" />

<div id="spreadsheet"></div>

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

<script>
// Set the JSS spreadsheet license
jspreadsheet.setLicense('ZmRhZjJiZDRjYjZkODQ0ZTlkZTliYmIyYzNlNjU5Zjg3ZWQyNTQwZjFlYWY2MWNmNzc1OGQ3NTUxNDRmMWUwZTVmNzJiM2UwZWI1MzhlMjNlZDg1NDg4MTA1MWMxNzJmMWFlYjM2Y2Y3ZjY4MzMxNDJiZDc1ZTNhMWY5YjBiNTYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRME1qUTBPRE01TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

// 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>

Edit this page on GitHub