Jspreadsheet Bundle

The Jspreadsheet Bundle provides a convenient all-in-one package that includes the core library and all available extensions. This simplifies setup by eliminating the need to install and configure each extension separately.

Installation

Download

Download the complete bundle package from: https://jspreadsheet.com/v12/bundle.zip

Extract the files and include them in your project:

<script src="./bundle/index.js"></script>
<link rel="stylesheet" href="./bundle/style.css">

NPM

Install the bundle using NPM:

npm install @jspreadsheet/bundle

Documentation

Available Packages

The bundle includes the following packages:

Package	Description
`jspreadsheet`	Core spreadsheet library
`bar`	Formula bar extension for cell editing
`comments`	Cell comments functionality
`format`	Number and cell formatting
`charts`	Chart integration for data visualization
`formula`	Formula Pro extension for advanced calculations
`parser`	Expression parser for formulas
`render`	Custom cell rendering extension
`search`	Advanced search and replace functionality
`shapes`	Shapes and drawing tools
`validations`	Cell validation rules

Basic Usage

After including the bundle, all packages are available through the global packages object:

// Extract the packages you need
const {
    jspreadsheet,
    bar,
    comments,
    format,
    charts,
    formula,
    parser,
    render,
    search,
    shapes,
    validations
} = packages;

// Set your license
jspreadsheet.setLicense('your-license-key');

// Register the extensions you want to use
jspreadsheet.setExtensions({ render, bar, formula, search });

// Create the spreadsheet
const worksheets = jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        minDimensions: [10, 10]
    }]
});

Examples

Basic Spreadsheet with Extensions

A basic example using the bundle with multiple extensions enabled.

<html>
<script src="./bundle/index.js"></script>
<link rel="stylesheet" href="./bundle/style.css" type="text/css" />

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

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

<script>
// Extract packages from the bundle
const { jspreadsheet, bar, formula, render, search, validations } = packages;

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

// Register extensions
jspreadsheet.setExtensions({ bar, formula, render, search, validations });

// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        data: [
            ['Product', 'Price', 'Quantity', 'Total'],
            ['Apple', 1.50, 10, '=B2*C2'],
            ['Orange', 2.00, 15, '=B3*C3'],
            ['Banana', 0.75, 20, '=B4*C4'],
            ['', '', 'Grand Total', '=SUM(D2:D4)'],
        ],
        columns: [
            { title: 'Product', width: 150 },
            { title: 'Price', width: 100 },
            { title: 'Quantity', width: 100 },
            { title: 'Total', width: 100 },
        ]
    }]
});
</script>
</html>

import React, { useRef, useEffect } from "react";

// Import the bundle
import { jspreadsheet, bar, formula, render, search, validations } from "@jspreadsheet/bundle";
import "@jspreadsheet/bundle/dist/style.css";

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

// Register extensions
jspreadsheet.setExtensions({ bar, formula, render, search, validations });

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

    useEffect(() => {
        if (!spreadsheetRef.current.jspreadsheet) {
            jspreadsheet(spreadsheetRef.current, {
                worksheets: [{
                    data: [
                        ['Product', 'Price', 'Quantity', 'Total'],
                        ['Apple', 1.50, 10, '=B2*C2'],
                        ['Orange', 2.00, 15, '=B3*C3'],
                        ['Banana', 0.75, 20, '=B4*C4'],
                        ['', '', 'Grand Total', '=SUM(D2:D4)'],
                    ],
                    columns: [
                        { title: 'Product', width: 150 },
                        { title: 'Price', width: 100 },
                        { title: 'Quantity', width: 100 },
                        { title: 'Total', width: 100 },
                    ]
                }]
            });
        }
    }, []);

    return <div ref={spreadsheetRef} />;
}

<template>
    <div ref="spreadsheet"></div>
</template>

<script>
// Import the bundle
import { jspreadsheet, bar, formula, render, search, validations } from "@jspreadsheet/bundle";
import "@jspreadsheet/bundle/dist/style.css";

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

// Register extensions
jspreadsheet.setExtensions({ bar, formula, render, search, validations });

export default {
    mounted() {
        jspreadsheet(this.$refs.spreadsheet, {
            worksheets: [{
                data: [
                    ['Product', 'Price', 'Quantity', 'Total'],
                    ['Apple', 1.50, 10, '=B2*C2'],
                    ['Orange', 2.00, 15, '=B3*C3'],
                    ['Banana', 0.75, 20, '=B4*C4'],
                    ['', '', 'Grand Total', '=SUM(D2:D4)'],
                ],
                columns: [
                    { title: 'Product', width: 150 },
                    { title: 'Price', width: 100 },
                    { title: 'Quantity', width: 100 },
                    { title: 'Total', width: 100 },
                ]
            }]
        });
    }
}
</script>

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

// Import the bundle
import { jspreadsheet, bar, formula, render, search, validations } from "@jspreadsheet/bundle";
import "@jspreadsheet/bundle/dist/style.css";

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

// Register extensions
jspreadsheet.setExtensions({ bar, formula, render, search, validations });

@Component({
    standalone: true,
    selector: "app-root",
    template: `<div #spreadsheet></div>`
})
export class AppComponent implements AfterViewInit {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    worksheets: jspreadsheet.worksheetInstance[];

    ngAfterViewInit() {
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            worksheets: [{
                data: [
                    ['Product', 'Price', 'Quantity', 'Total'],
                    ['Apple', 1.50, 10, '=B2*C2'],
                    ['Orange', 2.00, 15, '=B3*C3'],
                    ['Banana', 0.75, 20, '=B4*C4'],
                    ['', '', 'Grand Total', '=SUM(D2:D4)'],
                ],
                columns: [
                    { title: 'Product', width: 150 },
                    { title: 'Price', width: 100 },
                    { title: 'Quantity', width: 100 },
                    { title: 'Total', width: 100 },
                ]
            }]
        });
    }
}

Edit this page on GitHub