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

Documentation

Methods

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

Method	Description
`getDefinedNames`	Get a defined name by index `getDefinedNames(index: string): object`
`setDefinedNames`	Create or update defined names `setDefinedNames(names: object[]): void`
`resetDefinedNames`	Remove defined names `resetDefinedNames(names: object[]): 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/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" />

<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>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('ZTNhZDkwYjQyMzdiY2JmYzIxMzc2YWFhMzVkMTQzYjE4NDJkYTY1YjNjMTFhZWIwNTkyZDcyYjdhY2FkMWM2Mzc5NTQwNjczNGM4NjIzN2YzNjkzNjRmNzdhOTE5YWYxM2Y0MjNlY2U0OWI0ZTgyNmUzMDAyOTA2ZWM3MjZkNjksZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpZek9ERXdOVFkxTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

// 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";

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('ZTNhZDkwYjQyMzdiY2JmYzIxMzc2YWFhMzVkMTQzYjE4NDJkYTY1YjNjMTFhZWIwNTkyZDcyYjdhY2FkMWM2Mzc5NTQwNjczNGM4NjIzN2YzNjkzNjRmNzdhOTE5YWYxM2Y0MjNlY2U0OWI0ZTgyNmUzMDAyOTA2ZWM3MjZkNjksZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpZek9ERXdOVFkxTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
// 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";

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('ZTNhZDkwYjQyMzdiY2JmYzIxMzc2YWFhMzVkMTQzYjE4NDJkYTY1YjNjMTFhZWIwNTkyZDcyYjdhY2FkMWM2Mzc5NTQwNjczNGM4NjIzN2YzNjkzNjRmNzdhOTE5YWYxM2Y0MjNlY2U0OWI0ZTgyNmUzMDAyOTA2ZWM3MjZkNjksZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpZek9ERXdOVFkxTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
// 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";

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('ZTNhZDkwYjQyMzdiY2JmYzIxMzc2YWFhMzVkMTQzYjE4NDJkYTY1YjNjMTFhZWIwNTkyZDcyYjdhY2FkMWM2Mzc5NTQwNjczNGM4NjIzN2YzNjkzNjRmNzdhOTE5YWYxM2Y0MjNlY2U0OWI0ZTgyNmUzMDAyOTA2ZWM3MjZkNjksZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpZek9ERXdOVFkxTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
// 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/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" />

<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>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('ZTNhZDkwYjQyMzdiY2JmYzIxMzc2YWFhMzVkMTQzYjE4NDJkYTY1YjNjMTFhZWIwNTkyZDcyYjdhY2FkMWM2Mzc5NTQwNjczNGM4NjIzN2YzNjkzNjRmNzdhOTE5YWYxM2Y0MjNlY2U0OWI0ZTgyNmUzMDAyOTA2ZWM3MjZkNjksZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpZek9ERXdOVFkxTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

// 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";

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

// 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";

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

// 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('ZTNhZDkwYjQyMzdiY2JmYzIxMzc2YWFhMzVkMTQzYjE4NDJkYTY1YjNjMTFhZWIwNTkyZDcyYjdhY2FkMWM2Mzc5NTQwNjczNGM4NjIzN2YzNjkzNjRmNzdhOTE5YWYxM2Y0MjNlY2U0OWI0ZTgyNmUzMDAyOTA2ZWM3MjZkNjksZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpZek9ERXdOVFkxTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

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
            }
        ])
    }
}

Edit this page on GitHub