Back to Documentation

Spreadsheet performance

In this section, we will cover some important considerations about spreadsheet performance when dealing with large datasets.

What's new

There are significant changes with Engine 8, which is the base for the new Jspreadsheet Pro (Base or Premium edition). The lazy loading has been replaced by internal DOM management, that will create the DOM elements on-demand as the user navigates in the viewport. The viewport is now automatically enabled when the pagination, tableOverflow, or full screen properties are in use.

The spreadsheet viewport

The following properties will enable your viewport and activate the smart DOM management.

tableOverflow: boolean

This works along with the tableWidth and tableHeight properties to define a fixed viewport width and height dimensions.

fullscreen: boolean

This renders as many cells as will fit to fill the screen.

pagination: number

This creates the pagination based on the number defined.

Formulas

The formula handler has been decoupled from Jspreadsheet and it has been moved to an extension. This allows us to optimize and improve how JSS parses the formulas. This results in amazing performance and more options for the developers.

Example

The following example will create a table from an array with 20 columns x 50000 rows (one million cells)

ABCDEFGH
1A1B1C1D1E1F1G1H1
2A2B2C2D2E2F2G2H2
3A3B3C3D3E3F3G3H3
4A4B4C4D4E4F4G4H4
5A5B5C5D5E5F5G5H5
6A6B6C6D6E6F6G6H6
7A7B7C7D7E7F7G7H7
8A8B8C8D8E8F8G8H8
9A9B9C9D9E9F9G9H9
10A10B10C10D10E10F10G10H10
11A11B11C11D11E11F11G11H11
12A12B12C12D12E12F12G12H12
13A13B13C13D13E13F13G13H13
14A14B14C14D14E14F14G14H14
15A15B15C15D15E15F15G15H15
The table was created in: 160ms
<html>
<script src="https://jspreadsheet.com/v8/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v8/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />

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

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

// Data
let data = [];

// Create the data
for (let j = 0; j < 50000; j++) {
    data[j] = [];
    for (let i = 0; i < 20; i++) {
        data[j][i] = jspreadsheet.helpers.getColumnNameFromCoords(i, j);
    }
}

// Initial time before creating the table
let s = Date.now();

// Create the table
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        data: data,
        tableOverflow: true,
        tableWidth: '800px',
        tableHeight: '300px',
    }],
    onload: function() {
        // Final time 
        let e = Date.now();
        // Update console
        document.getElementById('console').innerText = 'The table was created in: ' + (e - s) + 'ms';
    },
    parseFormulas: false,
})
</script>
</html>

Edit this page on GitHub