Data Grid Cell Caching

Overview

The cache feature allows a formula's result to be stored, accelerating the loading time of a new spreadsheet.

Documentation

Methods

The following methods can be used to get or set comments in one or multiple data grid cells.

Method	Description
getCache	Get the cache for a cell. `worksheetInstance.getCache(cellName: String)`
setCache	Set the cache for one or more cells. @param {string\|object} cellName - Identification of a cell or an object with multiple definitions @param {string?} value `worksheetInstance.setCache(cellName: String \| object, value?: String)`

Initial Settings

The following properties are available through the initialization of the online spreadsheet.

Property	Description
cache: object	Object with the initial cache values. Example: `{ A1: 'test', B1: 'another test' }`

Examples

Loading formula values from cache

To optimize formula value caching in Jspreadsheet, initialize the spreadsheet with the configuration set to use cached data for formulas. This approach speeds up the loading of pre-calculated values, improving performance and user experience, particularly in data-heavy scenarios.

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

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

// Create the spreadsheet
let worksheets = jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        minDimensions: [10,10],
        data: [
            [10,'=SUM(A1)*10'],
        ],
        cache: { B1: 100 },
    }],
});
</script>
</html>

import React, { useRef, useEffect } from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react";
import * as formula from "@jspreadsheet/formula-pro";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";


// Set the license
jspreadsheet.setLicense('OGRjNzhlMTU0Mzc3NmNlOGE0NTQwNTU1NGQwNjQ5NTQyYzI2NjQ2N2VmYTE3MTQyNTQ1MmZjNjY1MDg4YTM4ZTRhOTM2ZWUyMTQzODg3YzEyNTYwODVlNTljNzVjMDVmOWIyMmEwMjFiMGQ1OTA2MTNjNDQ1NmJlNTk5YTA1ZjMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EWTROek0zTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

// Create the component
export default function App() {

    const spreadsheet = useRef();

    const data = [
        [10,'=SUM(A1)*10'],
    ]

    // Create spreadsheets
    return (
        <Spreadsheet ref={spreadsheet}>
            <Worksheet data={data} minDimensions={[10, 10]} cache={{ B1: 100 }} />
        </Spreadsheet>
    );
}

<template>
    <Spreadsheet ref="spreadsheet">
        <Worksheet :data="data" :minDimensions="[10, 10]" :cache="cache" />
    </Spreadsheet>
</template>

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

// Set the license
jspreadsheet.setLicense('OGRjNzhlMTU0Mzc3NmNlOGE0NTQwNTU1NGQwNjQ5NTQyYzI2NjQ2N2VmYTE3MTQyNTQ1MmZjNjY1MDg4YTM4ZTRhOTM2ZWUyMTQzODg3YzEyNTYwODVlNTljNzVjMDVmOWIyMmEwMjFiMGQ1OTA2MTNjNDQ1NmJlNTk5YTA1ZjMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EWTROek0zTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

// Create components
export default {
    components: {
        Spreadsheet, 
        Worksheet
    },
    data() {

        const data = [
            [10,'=SUM(A1)*10'],
        ]

        const cache = {
            B1: 100
        }

        return {
            data,
            cache
        };
    }
}
</script>

import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

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

// Create the data grid component
@Component({
    standalone: true,
    selector: "app-root",
    template: `
        <div #spreadsheet></div>
    `,
})
export class AppComponent {
    @ViewChild("spreadsheet") summary: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngAfterViewInit() {
        // Create spreadsheet
        jspreadsheet(this.spreadsheet.nativeElement, {
            worksheets: [{
                minDimensions: [10,10],
                data: [
                    [10,'=SUM(A1)*10'],
                ],
                cache: { B1: 100 },
            }],
        });
    }
}

Edit this page on GitHub