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('YzE4NTE2YjZhNzE1N2I0ZThiNzE3MjZiODlhYjg3YjhkYzllODdiOGFhNzU1NDliMzI4ZTg0OTAzNmExNzE5YzFiNTk1NTdiYTI3MjA0MTBjNDY5ZTI4ZTAyYmZlZTlmMWJlMWEwNjIwMzExMzY0YWM0MWU3OTgwZTUyZTBlNzAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTROVGd3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// 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 = 'YzE4NTE2YjZhNzE1N2I0ZThiNzE3MjZiODlhYjg3YjhkYzllODdiOGFhNzU1NDliMzI4ZTg0OTAzNmExNzE5YzFiNTk1NTdiYTI3MjA0MTBjNDY5ZTI4ZTAyYmZlZTlmMWJlMWEwNjIwMzExMzY0YWM0MWU3OTgwZTUyZTBlNzAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTROVGd3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
// 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 = 'YzE4NTE2YjZhNzE1N2I0ZThiNzE3MjZiODlhYjg3YjhkYzllODdiOGFhNzU1NDliMzI4ZTg0OTAzNmExNzE5YzFiNTk1NTdiYTI3MjA0MTBjNDY5ZTI4ZTAyYmZlZTlmMWJlMWEwNjIwMzExMzY0YWM0MWU3OTgwZTUyZTBlNzAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTROVGd3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
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 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('YzE4NTE2YjZhNzE1N2I0ZThiNzE3MjZiODlhYjg3YjhkYzllODdiOGFhNzU1NDliMzI4ZTg0OTAzNmExNzE5YzFiNTk1NTdiYTI3MjA0MTBjNDY5ZTI4ZTAyYmZlZTlmMWJlMWEwNjIwMzExMzY0YWM0MWU3OTgwZTUyZTBlNzAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTROVGd3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Initial time before creating the table
let s = Date.now();
@Component({
standalone: true,
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: [{
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.