Data grid performance

This section will discuss what to consider for optimizing the data grid performance when working with large datasets.

What's new

Jspreadsheet version 10 introduces significant improvements and optimizations that enhance the performance and user experience of the application. One of the significant advancements is eliminating duplicate information and using global CSS classes for styling. This approach streamlines the code, making it more efficient and easier to manage. The new version includes a better navigation system that leverages the viewport to load only the data visible to the user. This feature enhances the user experience by creating a seamless and speedy performance while minimizing the application's resource utilization.

Smart viewport

You can activate the smarter viewport by enabling pagination, table overflow, or full-screen properties. Overall, the improvements and optimizations in Jspreadsheet version 10 provide users with a more efficient and smoother experience.

tableOverflow: boolean

It defines the viewport width and height dimensions.

fullscreen: boolean

This property is handy for rendering as many cells as possible to fit the screen.

pagination: number

This property activates the pagination feature, which displays a fixed number of rows and creates a pagination bar..

Examples

A data grid with 5 million cells

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

 ABCDEFGHI
1A1B1C1D1E1F1G1H1I1
2A2B2C2D2E2F2G2H2I2
3A3B3C3D3E3F3G3H3I3
4A4B4C4D4E4F4G4H4I4
5A5B5C5D5E5F5G5H5I5
6A6B6C6D6E6F6G6H6I6
7A7B7C7D7E7F7G7H7I7
8A8B8C8D8E8F8G8H8I8
9A9B9C9D9E9F9G9H9I9
10A10B10C10D10E10F10G10H10I10
11A11B11C11D11E11F11G11H11I11
12A12B12C12D12E12F12G12H12I12
13A13B13C13D13E13F13G13H13I13
14A14B14C14D14E14F14G14H14I14
15A15B15C15D15E15F15G15H15I15

The table was created in: 563ms
  • See this example in JavaScript
  • See this example in React
  • See this example in VueJS
  • See this example in Angular
<html>
<script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v10/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>
<br/><div id="console"></div>

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

// Data
let data = [];

// Create the data
for (let j = 0; j < 50000; j++) {
    data[j] = [];
    for (let i = 0; i < 100; 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';
    }
})
</script>
</html>

import React, { useRef } from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react";

const license = 'MTg0ZWY0OTljNjBmZmQ1MDM4ZWFkYzkwM2E1Y2U4NDZiY2YxYmU4NDc0MmJkY2ZjNDk3ZjhjOTQ5NzIyZDE3NTZkMzZkMGE2MmUyZDEzODcyNmQxZGE3OTIxYWU2ZGEwZDhjYjRjNjE0Yjk5YTczMjFkMmEzOGE0MTBhYWI5MmUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRME1ESXlOek0zTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

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

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

    // 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 data={data} tableOverflow={true} tableWidth="800px" tableHeight="300px" />
            </Spreadsheet>
            <div ref={console}></div>
        </>
    );
}

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

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

const license = 'MTg0ZWY0OTljNjBmZmQ1MDM4ZWFkYzkwM2E1Y2U4NDZiY2YxYmU4NDc0MmJkY2ZjNDk3ZjhjOTQ5NzIyZDE3NTZkMzZkMGE2MmUyZDEzODcyNmQxZGE3OTIxYWU2ZGEwZDhjYjRjNjE0Yjk5YTczMjFkMmEzOGE0MTBhYWI5MmUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRME1ESXlOek0zTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

// Data
const data = [];

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

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 {
            license,
            data,
            onload,
            log,
        };
    }
}
</script>

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

import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"

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

// Data
const data = [];

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

// 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
    ngAfterViewInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
             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';
             }
        });
    }
}

Edit this page on GitHub