Defined Names

Defined names allow you to assign meaningful labels to cells or ranges, making formulas more readable and maintainable. Jspreadsheet implements this feature with Excel-compatible syntax, providing familiar named range functionality in JavaScript spreadsheets.

Important Notes:

  • Naming Convention: All defined names should use UPPERCASE letters
  • Scope: Defined names are created at the spreadsheet level and accessible across all worksheets
  • Reserved Names: Avoid using reserved names such as cell references, ranges, or function names

What's new with Version 13

  • Reload: a configuration saved with getConfig restores working defined names
  • Validation: setDefinedNames requires a valid string name per record and skips invalid entries; getDefinedNames is safe for unknown names; resetDefinedNames accepts plain names as well as descriptors

Documentation

Methods

The following methods allow programmatic management of the defined names in your spreadsheets.

Method Description
getDefinedNames Get the reference of one defined name, or every defined name as an object keyed by name when index is omitted. Names are upper case.
getDefinedNames(index?: string): string | object
setDefinedNames Create or update defined names. Each record has the name in index and the reference in value; a record without value removes the name. Returns false when the worksheet is not editable or no record could be applied.
setDefinedNames(names: { index: string, value?: string } | { index: string, value?: string }[]): void | false
resetDefinedNames Remove defined names, given as names or as records with index.
resetDefinedNames(names: string[] | { index: string }[]): void

Settings

Property Description
definedNames Object containing defined names

Examples

Basic Example

This example demonstrates how to use defined names to create more readable formulas with meaningful range labels.

<html>
<script src="https://jspreadsheet.com/v13/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v13/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" />

<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/formula-pro/dist/index.min.js"></script>

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

<p><input type="button" id="btn1" value="Create and Execute" /></p>

<script>
// You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox.
// The license is valid for one day, after which the spreadsheet will become read-only.
// For a longer trial period, you can create a free account and generate a demo license with an extended expiration date.
jspreadsheet.setLicense('MTBhYzJmYWY5MzZiNGYxMmZlODIyNjQxMjdjMjJmMThkNjBiZTY5MDc2NTk3ZThlMGNhN2YzMzdhMmU1NjdjNGZmNDJhZTZjM2E2ZDZmODQ4NDJiYzA3NzU0Mjc4MDkwMDJiMzAzY2E0Mjc4YTJmZWI4OTRmODg2NTRhY2VhZWEsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprek56QTBNVFU1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');

// Set the extension
jspreadsheet.setExtensions({ formula });

// Create a new spreadsheet
let worksheets = jspreadsheet(document.getElementById('spreadsheet'), {
    toolbar: true,
    worksheets: [{
        data: [
            [10, "=SUM(Summary)"],
            [20, "1"],
            [30, "2"],
            [40, "3"],
            [50, "4"]
        ],
        minDimensions: [6, 6],
    }],
    definedNames: {
        Summary: 'Sheet1!A1:A6',
    }
});

document.getElementById('btn1').addEventListener('click', () => {
    // Create the defined name. All defined names are going to be created on the spreadsheet level.
    worksheets[0].setDefinedNames([
        { index: 'TOTAL', value: 'Sheet1!B1:B6' }
    ]);
    // Update the value of C1 to process the total
    worksheets[0].setValue('C1', '=SUM(TOTAL)');
})

</script>
</html>
import React, {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";

// You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox.
// The license is valid for one day, after which the spreadsheet will become read-only.
// For a longer trial period, you can create a free account and generate a demo license with an extended expiration date.
jspreadsheet.setLicense('MTBhYzJmYWY5MzZiNGYxMmZlODIyNjQxMjdjMjJmMThkNjBiZTY5MDc2NTk3ZThlMGNhN2YzMzdhMmU1NjdjNGZmNDJhZTZjM2E2ZDZmODQ4NDJiYzA3NzU0Mjc4MDkwMDJiMzAzY2E0Mjc4YTJmZWI4OTRmODg2NTRhY2VhZWEsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprek56QTBNVFU1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');
// Set the extensions
jspreadsheet.setExtensions({formula});

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Data
    const data = [
        [10, "=SUM(Summary)"],
        [20, "1"],
        [30, "2"],
        [40, "3"],
        [50, "4"]
    ];
    // Defined names
    const definedNames = {
        Summary: 'Sheet1!A1:A6',
    }

    const handleCreate = function () {
        // Create the defined name. All defined names are going to be created on the spreadsheet level.
        spreadsheet.current[0].setDefinedNames([
            {index: 'TOTAL', value: 'Sheet1!B1:B6'}
        ]);
        // Update the value of C1 to process the total
        spreadsheet.current[0].setValue('C1', '=SUM(TOTAL)');
    }

    // Render component
    return (
        <>
            <Spreadsheet ref={spreadsheet} definedNames={definedNames}>
                <Worksheet data={data} minDimensions={[6, 6]}/>
            </Spreadsheet>
            <p><input type={"button"} value="Create and Execute" onClick={handleCreate}/></p>
        </>
    );
}
<template>
    <Spreadsheet ref="spreadsheet" :definedNames="definedNames">
        <Worksheet :data="data" />
    </Spreadsheet>
    <p><input type="button" value="Create and Execute" @click="handleCreate" /></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";

// You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox.
// The license is valid for one day, after which the spreadsheet will become read-only.
// For a longer trial period, you can create a free account and generate a demo license with an extended expiration date.
jspreadsheet.setLicense('MTBhYzJmYWY5MzZiNGYxMmZlODIyNjQxMjdjMjJmMThkNjBiZTY5MDc2NTk3ZThlMGNhN2YzMzdhMmU1NjdjNGZmNDJhZTZjM2E2ZDZmODQ4NDJiYzA3NzU0Mjc4MDkwMDJiMzAzY2E0Mjc4YTJmZWI4OTRmODg2NTRhY2VhZWEsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprek56QTBNVFU1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');
// Set the extensions
jspreadsheet.setExtensions({ formula });

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    data() {
        // Data
        const data = [
            [10, "=SUM(Summary)"],
            [20, "1"],
            [30, "2"],
            [40, "3"],
            [50, "4"]
        ];
        // Defined names
        const definedNames = {
            Summary: 'Sheet1!A1:A6',
        }

        return {
            data,
            definedNames
        };
    },
    methods: {
        handleCreate: function() {
            // Create the defined name. All defined names are going to be created on the spreadsheet level.
            this.$refs.spreadsheet[0].setDefinedNames([
                { index: 'TOTAL', value: 'Sheet1!B1:B6' }
            ]);
            // Update the value of C1 to process the total
            this.$refs.spreadsheet[0].setValue('C1', '=SUM(TOTAL)');
        }
    }
}
</script>
import { Component, ViewChild, ElementRef, AfterViewInit } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import formula from "@jspreadsheet/formula-pro";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

// You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox.
// The license is valid for one day, after which the spreadsheet will become read-only.
// For a longer trial period, you can create a free account and generate a demo license with an extended expiration date.
jspreadsheet.setLicense('MTBhYzJmYWY5MzZiNGYxMmZlODIyNjQxMjdjMjJmMThkNjBiZTY5MDc2NTk3ZThlMGNhN2YzMzdhMmU1NjdjNGZmNDJhZTZjM2E2ZDZmODQ4NDJiYzA3NzU0Mjc4MDkwMDJiMzAzY2E0Mjc4YTJmZWI4OTRmODg2NTRhY2VhZWEsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprek56QTBNVFU1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');
// Set the extensions
jspreadsheet.setExtensions({ formula });

// Create component
@Component({
    standalone: true,
    selector: "app-root",
    template: `
        <div #spreadsheet></div>
        <button (click)="handleCreate()">Create and Execute</button>
    `,
})
export class AppComponent implements AfterViewInit {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngAfterViewInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            toolbar: true,
            worksheets: [{
                data: [
                    [10, "=SUM(Summary)"],
                    [20, "1"],
                    [30, "2"],
                    [40, "3"],
                    [50, "4"]
                ],
                minDimensions: [6, 6],
            }],
            definedNames: {
                Summary: 'Sheet1!A1:A6',
            }
        });
    }

    handleCreate() {
            // Create the defined name. All defined names are going to be created on the spreadsheet level.
            this.worksheets[0].setDefinedNames([
                { index: 'TOTAL', value: 'Sheet1!B1:B6' }
            ]);
            // Update the value of C1 to process the total
            this.worksheets[0].setValue('C1', '=SUM(TOTAL)');
    }
}

External Constants

Define constants outside the spreadsheet that update formulas in real-time.

<html>
<script src="https://jspreadsheet.com/v13/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v13/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" />

<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/formula-pro/dist/index.min.js"></script>

AAA: <input type="number" id="btn1" data-id="AAA" value="0" />
BBB: <input type="number" id="btn2" data-id="BBB" value="0" />

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

<script>
// You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox.
// The license is valid for one day, after which the spreadsheet will become read-only.
// For a longer trial period, you can create a free account and generate a demo license with an extended expiration date.
jspreadsheet.setLicense('MTBhYzJmYWY5MzZiNGYxMmZlODIyNjQxMjdjMjJmMThkNjBiZTY5MDc2NTk3ZThlMGNhN2YzMzdhMmU1NjdjNGZmNDJhZTZjM2E2ZDZmODQ4NDJiYzA3NzU0Mjc4MDkwMDJiMzAzY2E0Mjc4YTJmZWI4OTRmODg2NTRhY2VhZWEsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprek56QTBNVFU1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');

// Set the extension
jspreadsheet.setExtensions({ formula });

// Create a new spreadsheet
let worksheets = jspreadsheet(document.getElementById('spreadsheet'), {
    toolbar: true,
    worksheets: [{
        data: [
            [ 'AAA', '=AAA', '=B1' ],
            [ 'BBB', '=BBB', '=B2' ],
            [ 'AAA*BBB', '=AAA*BBB', '=C1*C2'],
        ],
        minDimensions: [6, 6],
    }],
    definedNames: {
        'AAA': '0',
        'BBB': '0',
    }
});

// Updates
function update(e) {
    worksheets[0].setDefinedNames([
        {
            index: e.target.getAttribute('data-id'),
            value: e.target.value
        }
    ]);
}

document.getElementById('btn1').addEventListener('keyup', update)
document.getElementById('btn2').addEventListener('keyup', update)

</script>
</html>
import React, { useRef, useState } 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";

// You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox.
// The license is valid for one day, after which the spreadsheet will become read-only.
// For a longer trial period, you can create a free account and generate a demo license with an extended expiration date.
jspreadsheet.setLicense('MTBhYzJmYWY5MzZiNGYxMmZlODIyNjQxMjdjMjJmMThkNjBiZTY5MDc2NTk3ZThlMGNhN2YzMzdhMmU1NjdjNGZmNDJhZTZjM2E2ZDZmODQ4NDJiYzA3NzU0Mjc4MDkwMDJiMzAzY2E0Mjc4YTJmZWI4OTRmODg2NTRhY2VhZWEsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprek56QTBNVFU1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=')

// Set the extension
jspreadsheet.setExtensions({ formula })

export default function App() {
    // Create local state for inputs
    const [AAA, setAAA] = useState('0');
    const [BBB, setBBB] = useState('0');


    // Spreadsheet array of worksheets
    const spreadsheet = useRef();

    const data = [
        [ 'AAA', '=AAA', '=B1' ],
        [ 'BBB', '=BBB', '=B2' ],
        [ 'AAA*BBB', '=AAA*BBB', '=C1*C2'],
    ]

    const update = function(e) {
        spreadsheet.current[0].setDefinedNames([
            {
                index: e.target.getAttribute('data-id'),
                value: e.target.value
            }
        ])
    }

    // Render component
    return <>
        AAA: <input type="number" id="btn1" data-id="AAA" value={AAA} onChange={(e) => {
            setAAA(e.target.value)
            update(e)
        }} />
        BBB: <input type="number" id="btn2" data-id="BBB" value={BBB} onChange={(e) => {
            setBBB(e.target.value)
            update(e)
        }} /><br/>
        <Spreadsheet ref={spreadsheet} toolbar={true} definedNames={{ 'AAA': '0', 'BBB': '0'  }}>
            <Worksheet data={data} minDimensions={[6, 6]} />
        </Spreadsheet>
    </>;
}
<template>
    AAA: <input type="number" id="btn1" data-id="AAA" :value="AAA" @change="(e) => {
            this.AAA = e.target.value
            update(e)
        }" />
    BBB: <input type="number" id="btn2" data-id="BBB" :value="BBB" @change="(e) => {
            this.BBB = e.target.value
            update(e)
        }" /><br/>
    <Spreadsheet ref="spreadsheet" :toolbar="true" :definedNames="{ 'AAA': '0', 'BBB': '0' }">
        <Worksheet :data="data" :minDimensions="[6, 6]" />
    </Spreadsheet>
</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";

// You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox.
// The license is valid for one day, after which the spreadsheet will become read-only.
// For a longer trial period, you can create a free account and generate a demo license with an extended expiration date.
jspreadsheet.setLicense('MTBhYzJmYWY5MzZiNGYxMmZlODIyNjQxMjdjMjJmMThkNjBiZTY5MDc2NTk3ZThlMGNhN2YzMzdhMmU1NjdjNGZmNDJhZTZjM2E2ZDZmODQ4NDJiYzA3NzU0Mjc4MDkwMDJiMzAzY2E0Mjc4YTJmZWI4OTRmODg2NTRhY2VhZWEsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprek56QTBNVFU1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=')

// Set the extension
jspreadsheet.setExtensions({ formula })

export default {
    components: {
        Spreadsheet,
        Worksheet
    },
    data() {
        return {
            AAA: '0',
            BBB: '0',
            data: [
                [ 'AAA', '=AAA', '=B1' ],
                [ 'BBB', '=BBB', '=B2' ],
                [ 'AAA*BBB', '=AAA*BBB', '=C1*C2'],
            ]
        }
    },
    methods: {
        update: function(e) {
            this.$refs.spreadsheet[0].setDefinedNames([
                {
                    index: e.target.getAttribute('data-id'),
                    value: e.target.value
                }
            ])
        }
    }
}
</script>
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import jspreadsheet from 'jspreadsheet';
import formula from '@jspreadsheet/formula-pro';
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

jspreadsheet.setLicense('MTBhYzJmYWY5MzZiNGYxMmZlODIyNjQxMjdjMjJmMThkNjBiZTY5MDc2NTk3ZThlMGNhN2YzMzdhMmU1NjdjNGZmNDJhZTZjM2E2ZDZmODQ4NDJiYzA3NzU0Mjc4MDkwMDJiMzAzY2E0Mjc4YTJmZWI4OTRmODg2NTRhY2VhZWEsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprek56QTBNVFU1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');

jspreadsheet.setExtensions({ formula })

@Component({
    standalone: true,
    selector: 'app-root',
    template: `<div>
        AAA: <input type="number" id="btn1" data-id="AAA" value="0" (change)="onInputChange($event, 'AAA')" />
        BBB: <input type="number" id="btn2" data-id="BBB" value="0" (change)="onInputChange($event, 'BBB')" />
        <br/>
        <div #spreadsheet></div>
    </div>`,
})
export class AppComponent implements AfterViewInit {
    @ViewChild('spreadsheet') spreadsheet: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngAfterViewInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            toolbar: true,
            worksheets: [{
                data: [
                    [ 'AAA', '=AAA', '=B1' ],
                    [ 'BBB', '=BBB', '=B2' ],
                    [ 'AAA*BBB', '=AAA*BBB', '=C1*C2'],
                ],
                minDimensions: [6, 6],
            }],
            definedNames: {
                'AAA': '0',
                'BBB': '0',
            }
        });
    }

    onInputChange(e: Event, index: string) {
        this.worksheets[0].setDefinedNames([
            {
                index: index,
                value: (e.target as HTMLInputElement).value
            }
        ])
    }
}