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(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
Related events.
Method Description
onresize onresize(worksheet: Object, w: number, h: number) => void
Example
Change the spreadsheet viewport dimensions
The following example changes the visible viewport area dynamically.
Source code
<html>
<script src="https://jspreadsheet.com/v9/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v9/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('N2Y4ZDk0YmEyMWY1ZGQ2ZmNmODU1NjEzNmI1MzA3NmFhYzI1OWEyNDZiMjljMWM5NmY5YTMzMmEwM2FhNWNmNDZiN2FhNWNlM2VmM2I2MGNlZGI1ZGU1NWFkMmE5YTkzN2Y0MTYzZWFkODc0NTk2NjUzMTNhMThiZTI3ZGM5YWIsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dNak0yT1RNMk1Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5');
// 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>
Goto
Move the viewport to a specified row or cell.
Source code
<html>
<script src="https://jspreadsheet.com/v9/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v9/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('N2Y4ZDk0YmEyMWY1ZGQ2ZmNmODU1NjEzNmI1MzA3NmFhYzI1OWEyNDZiMjljMWM5NmY5YTMzMmEwM2FhNWNmNDZiN2FhNWNlM2VmM2I2MGNlZGI1ZGU1NWFkMmE5YTkzN2Y0MTYzZWFkODc0NTk2NjUzMTNhMThiZTI3ZGM5YWIsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dNak0yT1RNMk1Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5');
// Create the spreadsheet
var grid = jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [{
minDimensions: [6, 5000],
tableOverflow: true,
tableWidth: '600px',
}]
});
</script>
</html>