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)

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

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