Performance

Performance demo that highlights the rendering speed and scalability of Jspreadsheet by initializing a table with 10,000 columns and 100,000 rows in under 200 milliseconds. It showcases the engine’s ability to handle large datasets while maintaining a responsive UI, ideal for high-volume data applications.

<html>
<script src="https://jspreadsheet.com/v11/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v11/jspreadsheet.css" type="text/css" />
<script src="https://jsuites.net/v5/jsuites.js"></script>
<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" />
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/formula-pro/dist/index.min.js"></script>

<div id="spreadsheet"></div>
<p id="log"></p>

<script>
jspreadsheet.setLicense('Zjc1MjhiMmEwYzM4ODQxNTA5MWY2YzFmNjI0YmFhYzBjMTM5NjlmNGI5NzhhZjAyYmE4YWRkODQ1NTljZThkMjA3YTY2NGIxNDQ3NTJhMmYxYWI2MmMzNWM5MTQ5ZmUxMWEyNzQyNzAzNWQxYjQ0MjlkMzcwZjc2NDRlY2M0YjMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNE5UQTBOVFk1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

jspreadsheet.setExtensions({ formula });

const s = Date.now();

const log = document.getElementById('log');

 jspreadsheet(document.getElementById('spreadsheet'), {
      toolbar: true,
      worksheets: [
        {
          data: [[1, "=SUM(A1:A3)"], [2], [3]],
          minDimensions: [10000, 100000],
          tableOverflow: true,
          tableWidth: 1300,
          tableHeight: 320,
          resize: "both",
          columns: [],
          worksheetName: "Sheet1",
          worksheetId: "dad25d0e-07f5-41f2-bab4-bb58c41d6899",
          rows: [],
          meta: {},
          comments: {},
          cells: {},
          cache: {},
          mergeCells: {}
        }
      ],

      onload: function () {
        const e = Date.now();
        self.log.innerText = 'This table has 10000 columns x 100000 rows and it was created in: ' + (e - s) + 'ms.';
      }
    });
  </script>

import React, { useEffect ,useRef } from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react";
import formula from "@jspreadsheet/formula-pro";

import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
import './App.css';

// Set your JSS license key (The following key only works for one day)
const license = 'Zjc1MjhiMmEwYzM4ODQxNTA5MWY2YzFmNjI0YmFhYzBjMTM5NjlmNGI5NzhhZjAyYmE4YWRkODQ1NTljZThkMjA3YTY2NGIxNDQ3NTJhMmYxYWI2MmMzNWM5MTQ5ZmUxMWEyNzQyNzAzNWQxYjQ0MjlkMzcwZjc2NDRlY2M0YjMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNE5UQTBOVFk1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5';

export default function App() {
  const spreadsheetRef = useRef(null);

  const s = Date.now();

  const log = document.getElementById('log');

  useEffect(() => {
    jspreadsheet.setLicense(license);
    jspreadsheet.setExtensions({ formula });

    const instance = jspreadsheet(spreadsheetRef.current, {
      toolbar: true,
      worksheets: [
        {
          data: [[1, "=SUM(A1:A3)"], [2], [3]],
          minDimensions: [10000, 100000],
          tableOverflow: true,
          tableWidth: 1300,
          tableHeight: 320,
          resize: "both",
          columns: [],
          worksheetName: "Sheet1",
          worksheetId: "dad25d0e-07f5-41f2-bab4-bb58c41d6899",
          rows: [],
          meta: {},
          comments: {},
          cells: {},
          cache: {},
          mergeCells: {}
        }
      ],

      onload: function () {
        const e = Date.now();
        self.log.innerText = 'This table has 10000 columns x 100000 rows and it was created in: ' + (e - s) + 'ms.';
      }
    });

    return () => {
      instance?.destroy?.();
    };
  }, []);

  return <>
        <div ref={spreadsheetRef}></div>
        <p id="log"></p>
    </>;
}

<template>
  <Spreadsheet
    ref="spreadsheet"
    :license="license"
    :worksheets="worksheets"
    :styles="globalStyle"
    toolbar="true">
  </Spreadsheet>
  <p id="log"></p>
</template>

<script>
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue";
import formula from "@jspreadsheet/formula-pro";

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

jspreadsheet.setLicense('Zjc1MjhiMmEwYzM4ODQxNTA5MWY2YzFmNjI0YmFhYzBjMTM5NjlmNGI5NzhhZjAyYmE4YWRkODQ1NTljZThkMjA3YTY2NGIxNDQ3NTJhMmYxYWI2MmMzNWM5MTQ5ZmUxMWEyNzQyNzAzNWQxYjQ0MjlkMzcwZjc2NDRlY2M0YjMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNE5UQTBOVFk1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
jspreadsheet.setExtensions({ formula });

export default {
  components: { Spreadsheet, Worksheet },
  data() {
    return {
      start: Date.now(),
      toolbar: true,
      worksheets: [
        {
          data: [[1, "=SUM(A1:A3)"], [2], [3]],
          minDimensions: [10000, 100000],
          tableOverflow: true,
          tableWidth: 1300,
          tableHeight: 320,
          resize: "both",
          columns: [],
          worksheetName: "Sheet1",
          worksheetId: "dad25d0e-07f5-41f2-bab4-bb58c41d6899",
          rows: [],
          meta: {},
          comments: {},
          cells: {},
          cache: {},
          mergeCells: {}
        }
      ]
    };
  },
  methods: {
    handleLoad() {
      const end = Date.now();
      this.$refs.log.innerText =
        `This table has 10000 columns x 100000 rows and was created in ${end - this.start} ms.`;
    },
  },
};
</script>

import { Component, ElementRef, ViewChild } from '@angular/core';
import jspreadsheet from 'jspreadsheet';
import formula from '@jspreadsheet/formula-pro';

jspreadsheet.setLicense('Zjc1MjhiMmEwYzM4ODQxNTA5MWY2YzFmNjI0YmFhYzBjMTM5NjlmNGI5NzhhZjAyYmE4YWRkODQ1NTljZThkMjA3YTY2NGIxNDQ3NTJhMmYxYWI2MmMzNWM5MTQ5ZmUxMWEyNzQyNzAzNWQxYjQ0MjlkMzcwZjc2NDRlY2M0YjMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNE5UQTBOVFk1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
jspreadsheet.setExtensions({ formula });

@Component({
  standalone: true,
  selector: 'app-root',
  template: `
    <div #spreadsheet></div>
    <p #log></p>
  `,
})
export class AppComponent {
  @ViewChild('spreadsheet', { static: true }) spreadsheet!: ElementRef<HTMLDivElement>;
  @ViewChild('log', { static: true }) log!: ElementRef<HTMLParagraphElement>;

  private startTime = Date.now();

  ngAfterViewInit() {
    const logEl = this.log.nativeElement;
    const s = this.startTime;

    jspreadsheet(this.spreadsheet.nativeElement, {
      toolbar: true,
      worksheets: [
        {
          data: [[1, '=SUM(A1:A3)'], [2], [3]],
          minDimensions: [10000, 100000],
          tableOverflow: true,
          tableWidth: '800px',
          tableHeight: '300px',
          columns: [],
          worksheetName: 'Sheet1',
          worksheetId: 'dad25d0e-07f5-41f2-bab4-bb58c41d6899',
          rows: [],
          meta: {},
          comments: {},
          cells: {},
          cache: {},
          mergeCells: {}
        }
      ],
      onload: () => {
        const e = Date.now();
        logEl.innerText = 
          `This table has 10000 columns x 100000 rows and was created in: ${e - s} ms.`;
      }
    });
  }
}

Edit this page on GitHub