Data Grid Performance

This section delves into key considerations for enhancing the performance of your data grid when handling extensive datasets.

Overview

There are significant improvements and performance optimizations on our latest version. A smart management only creates cell objects as needed making possible to create large datasets keeping the response on the navigation ultra smooth and fast.

The One Billion Cells Data Grid

The following example will create a new empty spreadsheet with one billion cells [10000 columns x 100000 rows]

<html>
<script src="https://jspreadsheet.com/v11/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v11/jspreadsheet.css" type="text/css" />
<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>

<p id="console"></p>

<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('ZWFiNDdkNjU5NmUwYjVlYjllMGYyYWY3NWJjZjE5MDZlMDBmNTE2ZmQyNDBkMGFkNGI3ZjMxNDIwMTA4NzRmOTYzN2UzZjhkMGE2M2YxNDNmYjVhNzdjYmJjZjJmMjAxYjgwMjdiZTY0ZmU1N2M3YTY4M2ExNjExNDY4YmMxMjksZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFMU1qUTBORGt3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

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

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

import React, { useRef } from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

const license = 'ZWFiNDdkNjU5NmUwYjVlYjllMGYyYWY3NWJjZjE5MDZlMDBmNTE2ZmQyNDBkMGFkNGI3ZjMxNDIwMTA4NzRmOTYzN2UzZjhkMGE2M2YxNDNmYjVhNzdjYmJjZjJmMjAxYjgwMjdiZTY0ZmU1N2M3YTY4M2ExNjExNDY4YmMxMjksZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFMU1qUTBORGt3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

// Create a new data grid
export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    const console = useRef();


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

    // When the data grid is ready
    const onload = () => {
        // Final time
        let e = Date.now();
        // Update console
        console.current.innerText = 'The table was created in: ' + (e - s) + 'ms';
    };

    // Render data grid component
    return (
        <>
            <Spreadsheet ref={spreadsheet} license={license} onload={onload}>
                <Worksheet tableOverflow={true} minDimensions={[10000,100000]} tableWidth="800px" tableHeight="300px" />
            </Spreadsheet>
            <div ref={console}></div>
        </>
    );
}

<template>
    <Spreadsheet :license="license">
        <Worksheet tableOverflow :minDimensions="minDimensions" tableWidth="800px" tableHeight="300px" />
    </Spreadsheet>
    <div ref="console"></div>
</template>

<script>
import { ref } from 'vue';
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

const license = 'ZWFiNDdkNjU5NmUwYjVlYjllMGYyYWY3NWJjZjE5MDZlMDBmNTE2ZmQyNDBkMGFkNGI3ZjMxNDIwMTA4NzRmOTYzN2UzZjhkMGE2M2YxNDNmYjVhNzdjYmJjZjJmMjAxYjgwMjdiZTY0ZmU1N2M3YTY4M2ExNjExNDY4YmMxMjksZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFMU1qUTBORGt3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

export default {
    components: {
        Spreadsheet,
        Worksheet
    },
    setup() {
        const log = ref(null);
        let s = Date.now();

        // When the data grid is ready
        const onload = () => {
            // Final time
            let e = Date.now();
            // Update console
            log.value.innerText = 'The table was created in: ' + (e - s) + 'ms';
        }

        return {
            minDimensions: [10000,100000],
            license,
            onload,
            log,
        };
    }
}
</script>

import { Component, ViewChild, ElementRef } from "@angular/core";
import * as jspreadsheet from "jspreadsheet";

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('ZWFiNDdkNjU5NmUwYjVlYjllMGYyYWY3NWJjZjE5MDZlMDBmNTE2ZmQyNDBkMGFkNGI3ZjMxNDIwMTA4NzRmOTYzN2UzZjhkMGE2M2YxNDNmYjVhNzdjYmJjZjJmMjAxYjgwMjdiZTY0ZmU1N2M3YTY4M2ExNjExNDY4YmMxMjksZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFMU1qUTBORGt3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

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

@Component({
    selector: "app-root",
    template: `<div #spreadsheet></div><div id="console"></div>`;
})
export class AppComponent {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngOnInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
             worksheets: [{
                 minDimensions: [10000,100000],
                 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';
             }
        });
    }
}

Smart Viewport Management

You can enable smart viewport management by pagination, setting table overflow, or activating full-screen mode.

Table Overflow

Activate tableOverflow: true to set the viewport's dimensions with tableWidth and tableHeight.

Fullscreen Mode

The fullscreen mode adjusts the grid to display as many cells as possible, utilizing the available screen space.

Pagination

The pagination limits the display to a set number of rows per page, enhancing performance for large datasets.

Browser Limitations

While Jspreadsheet supports extensive spreadsheets, browser constraints on DOM element sizes may impact performance. For datasets exceeding 320K rows or if you encounter rendering issues, pagination is advised.

Edit this page on GitHub