Spreadsheet Namespaces

Jspreadsheet namespaces group and isolate multiple spreadsheet instances under a defined context. They enable cross-spreadsheet calculations without naming conflicts, allowing different spreadsheets to use identical worksheet names. Namespaces let you run formulas across related spreadsheets while keeping unrelated instances fully isolated.

Documentation

Namespaces are essential when using the @jspreadsheet/server extension, enabling servers to manage hundreds of worksheets with identical names. Each namespace should be unique; if undefined, Jspreadsheet automatically generates a random GUID for each new spreadsheet.

Practical Use Cases

Namespaces are particularly useful in the following scenarios:

Multi-tenant applications: Isolate data for different clients or organizations
Dashboard systems: Separate data sources while maintaining consistent naming
Server-side management: Organize hundreds of worksheets without naming conflicts
Modular applications: Create independent calculation contexts for different features

Settings

Configure namespaces using the following property:

Property	Description
`namespace?: string`	Define the namespace scope of a spreadsheet. Default: Random GUID

Examples

Cross-Namespace Calculations

This example demonstrates how namespaces enable cross-spreadsheet calculations while preventing naming conflicts. The second spreadsheet references data from the first spreadsheet within the same namespace, while the third spreadsheet with identical worksheet names operates in complete isolation.

<html>
<script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v12/jspreadsheet.css" type="text/css" />
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />

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

<div id="spreadsheet1"></div><br/>
<div id="spreadsheet2"></div><br/>
<div id="spreadsheet3"></div><br/>

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

const namespace1 = 'sales-data-2024';
const namespace2 = 'inventory-system';

// First spreadsheet - Sales data
jspreadsheet(document.getElementById('spreadsheet1'), {
    worksheets: [{
        data: [
            ['Mazda', 2001, 2000],
            ['Peugeot', 2010, 5000],
        ],
        worksheetName: 'Sheet1',
        columns: [
            { title: 'Brand' },
            { title: 'Year' },
            { title: 'Price' }
        ]
    }],
    namespace: namespace1,
});

// Second spreadsheet - Tax calculation (same namespace)
jspreadsheet(document.getElementById('spreadsheet2'), {
    worksheets: [{
        data: [
            ['Total Tax', '=SUM(Sheet1!C1:C2)*0.2', ''],
        ],
        worksheetName: 'TaxSheet',
        columns: [
            { title: 'Description' },
            { title: 'Amount' }
        ]
    }],
    namespace: namespace1,
});

// Third spreadsheet - Different namespace (isolated)
jspreadsheet(document.getElementById('spreadsheet3'), {
    worksheets: [
        {
            data: [
                ['Honda', 2020, 15000],
            ],
            worksheetName: 'Sheet1',
            columns: [
                { title: 'Brand' },
                { title: 'Year' },
                { title: 'Price' }
            ]
        }
    ],
    namespace: namespace2,
});
</script>
</html>

import React, {useRef} from "react";
import {Spreadsheet, Worksheet, jspreadsheet} from "@jspreadsheet/react";
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('NTM5YjEwZjFjMTQwZTY1OWRlODU2ZjhkN2NhYzk4NTZjZTg5NjhjZTZmODY1ODRiMDg3ODUyYTQ2OGU3NTMzZmFkNjRlNzA3OTMzY2RhYTQxZDc3Yjg2ZTY3YzZlNWZiMDAzYzlhYmVlZTkzODU5YjhlZDM3Yzc0YTQyNGQ4M2UsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azFPRGt5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default function App() {
    // Spreadsheet references
    const spreadsheet1 = useRef();
    const spreadsheet2 = useRef();
    const spreadsheet3 = useRef();

    const namespace1 = 'sales-data-2024';
    const namespace2 = 'inventory-system';

    // Sales data
    const salesData = [
        ['Mazda', 2001, 2000],
        ['Peugeot', 2010, 5000],
    ];

    // Tax calculation data
    const taxData = [
        ['Total Tax', '=SUM(Sheet1!C1:C2)*0.2', ''],
    ];

    // Inventory data
    const inventoryData = [
        ['Honda', 2020, 15000],
    ];

    // Column configurations
    const salesColumns = [
        { title: 'Brand', },
        { title: 'Year', },
        { title: 'Price', }
    ];

    const taxColumns = [
        { title: 'Description' },
        { title: 'Amount' }
    ];

    // Render components
    return (
        <div>
            <h3>Sales Data (Namespace: {namespace1})</h3>
            <Spreadsheet ref={spreadsheet1} namespace={namespace1}>
                <Worksheet data={salesData} columns={salesColumns} worksheetName="Sheet1" />
            </Spreadsheet>

            <h3>Tax Calculation (Same Namespace: {namespace1})</h3>
            <Spreadsheet ref={spreadsheet2} namespace={namespace1}>
                <Worksheet data={taxData} columns={taxColumns} worksheetName="TaxSheet" />
            </Spreadsheet>

            <h3>Inventory (Different Namespace: {namespace2})</h3>
            <Spreadsheet ref={spreadsheet3} namespace={namespace2}>
                <Worksheet data={inventoryData} columns={salesColumns} worksheetName="Sheet1" />
            </Spreadsheet>
        </div>
    );
}

<template>
    <div>
        <h3>Sales Data (Namespace: {{ namespace1 }})</h3>
        <Spreadsheet ref="spreadsheet1" :namespace="namespace1">
            <Worksheet :data="salesData" :columns="salesColumns" worksheetName="Sheet1" />
        </Spreadsheet>

        <h3>Tax Calculation (Same Namespace: {{ namespace1 }})</h3>
        <Spreadsheet ref="spreadsheet2" :namespace="namespace1">
            <Worksheet :data="taxData" :columns="taxColumns" worksheetName="TaxSheet" />
        </Spreadsheet>

        <h3>Inventory (Different Namespace: {{ namespace2 }})</h3>
        <Spreadsheet ref="spreadsheet3" :namespace="namespace2">
            <Worksheet :data="inventoryData" :columns="salesColumns" worksheetName="Sheet1" />
        </Spreadsheet>
    </div>
</template>

<script>
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue";
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('NTM5YjEwZjFjMTQwZTY1OWRlODU2ZjhkN2NhYzk4NTZjZTg5NjhjZTZmODY1ODRiMDg3ODUyYTQ2OGU3NTMzZmFkNjRlNzA3OTMzY2RhYTQxZDc3Yjg2ZTY3YzZlNWZiMDAzYzlhYmVlZTkzODU5YjhlZDM3Yzc0YTQyNGQ4M2UsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azFPRGt5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    data() {
        const namespace1 = 'sales-data-2024';
        const namespace2 = 'inventory-system';

        // Sales data
        const salesData = [
            ['Mazda', 2001, 2000],
            ['Peugeot', 2010, 5000],
        ];

        // Tax calculation data
        const taxData = [
            ['Total Tax', '=SUM(Sheet1!C1:C2)*0.2', ''],
        ];

        // Inventory data
        const inventoryData = [
            ['Honda', 2020, 15000],
        ];

        // Column configurations
        const salesColumns = [
            { title: 'Brand' },
            { title: 'Year' },
            { title: 'Price' }
        ];

        const taxColumns = [
            { title: 'Description' },
            { title: 'Amount' }
        ];

        return {
            namespace1,
            namespace2,
            salesData,
            taxData,
            inventoryData,
            salesColumns,
            taxColumns
        };
    }
}
</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('NTM5YjEwZjFjMTQwZTY1OWRlODU2ZjhkN2NhYzk4NTZjZTg5NjhjZTZmODY1ODRiMDg3ODUyYTQ2OGU3NTMzZmFkNjRlNzA3OTMzY2RhYTQxZDc3Yjg2ZTY3YzZlNWZiMDAzYzlhYmVlZTkzODU5YjhlZDM3Yzc0YTQyNGQ4M2UsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azFPRGt5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

@Component({
    standalone: true,
    selector: "app-root",
    template: `
        <div>
            <h3>Sales Data (Namespace: {{namespace1}})</h3>
            <div #spreadsheet1></div>

            <h3>Tax Calculation (Same Namespace: {{namespace1}})</h3>
            <div #spreadsheet2></div>

            <h3>Inventory (Different Namespace: {{namespace2}})</h3>
            <div #spreadsheet3></div>
        </div>`
})
export class AppComponent {
    @ViewChild("spreadsheet1") spreadsheet1: ElementRef;
    @ViewChild("spreadsheet2") spreadsheet2: ElementRef;
    @ViewChild("spreadsheet3") spreadsheet3: ElementRef;

    // Worksheets
    worksheets1: jspreadsheet.worksheetInstance[];
    worksheets2: jspreadsheet.worksheetInstance[];
    worksheets3: jspreadsheet.worksheetInstance[];

    namespace1 = 'sales-data-2024';
    namespace2 = 'inventory-system';

    // Create spreadsheets
    ngAfterViewInit() {
        // First spreadsheet - Sales data
        this.worksheets1 = jspreadsheet(this.spreadsheet1.nativeElement, {
            worksheets: [{
                data: [
                    ['Mazda', 2001, 2000],
                    ['Peugeot', 2010, 5000],
                ],
                worksheetName: 'Sheet1',
                columns: [
                    { title: 'Brand' },
                    { title: 'Year' },
                    { title: 'Price' }
                ]
            }],
            namespace: this.namespace1,
        });

        // Second spreadsheet - Tax calculation (same namespace)
        this.worksheets2 = jspreadsheet(this.spreadsheet2.nativeElement, {
            worksheets: [{
                data: [
                    ['Total Tax', '=SUM(Sheet1!C1:C2)*0.2', ''],
                ],
                worksheetName: 'TaxSheet',
                columns: [
                    { title: 'Description' },
                    { title: 'Amount' }
                ]
            }],
            namespace: this.namespace1,
        });

        // Third spreadsheet - Different namespace (isolated)
        this.worksheets3 = jspreadsheet(this.spreadsheet3.nativeElement, {
            worksheets: [{
                data: [
                    ['Honda', 2020, 15000],
                ],
                worksheetName: 'Sheet1',
                columns: [
                    { title: 'Brand' },
                    { title: 'Year' },
                    { title: 'Price' }
                ]
            }],
            namespace: this.namespace2,
        });
    }
}

Edit this page on GitHub