Data Grid Cell Comments

Overview

Jspreadsheet allows users to add comments to cells, similar to Excel or Google Sheets. Comments can be added programmatically or through the context menu, enabling annotations and additional information for cell contents.

Documentation

Methods

The following methods can be used to get or set comments in one or multiple data grid cells.

Method	Description
`getComments`	Get comments from a cell or from the whole table. `worksheetInstance.getComments(cellName: String \| null)`
`setComments`	Add or change the comments for one or multiple cells. `worksheetInstance.setComments(cellName: String \| object, comments?: String)`

Events

The onbeforecomments event can be used to intercept, change, or cancel the user action when adding a new comment.

Event	Description
`onbeforecomments`	Accepted returns for this event: * object An object with the cell names and the comments for each cell. `onbeforecomments(worksheet: Object, newValue: Object) => object \| boolean \| void`
`oncomments`	`oncomments(worksheet: Object, newValue: Object, oldValue: Object) => void`

Initial Settings

The following properties are available during spreadsheet initialization.

Property	Description
`allowComments: boolean`	Enable or disable user ability to add new comments on cells.
`comments: object`	Object with the initial comments. Example: `{ A1: 'test', B1: 'another test' }`

Examples

A Basic Data Grid with Comments

This example demonstrates how to initialize a Jspreadsheet data grid with a few predefined comments on specific cells. It also illustrates how to interact with these comments programmatically using the setComments and getComments methods.

<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="spreadsheet"></div><br/><br/>

<input type="button" id="bt1" value="Set A1 comments" />
<input type="button" id="bt2" value="Get A1 comments" />
<input type="button" id="bt3" value="Reset A1 comments" />

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

// Create the spreadsheet
const worksheets = jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [
        {
            data: [
                ['US', 'Cheese', '2019-02-12'],
                ['CA', 'Apples', '2019-03-01'],
                ['CA', 'Carrots', '2018-11-10'],
                ['BR', 'Oranges', '2019-01-12'],
            ],
            columns: [
                { width: '300px' },
                { width: '200px' },
                { width: '200px' },
            ],
            allowComments: true,
            comments: {
                B1: 'Initial comments on B1',
                C1: 'Initial comments on C1'
            },
        }
    ],
    oncomments: function() {
        console.log(arguments);
    }
});

document.getElementById('bt1').onclick = function() {
    worksheets[0].setComments('A1', 'Test');
}
document.getElementById('bt2').onclick = function() {
    alert(worksheets[0].getComments('A1'));
}
document.getElementById('bt3').onclick = function() {
    worksheets[0].setComments('A1', '');
}
</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('OWNmMjA2YzllYjU3NWY1MDc1YTYyMWRlN2UxMzFhYjBjNzA4OWM5YTFiMGRhNTNiN2RkZWFkYzBhYTBlMmVjMzk1NzIyZGRlYmI5NzIxNDgyZDk0ZTQzZDlmY2UyYmJkNWZhNTE4MzY3N2ZlZjNhNmU5NjYxY2IzNzFkZGJkZmMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNVFl5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();

    // Data
    const data = [
        ['US', 'Cheese', '2019-02-12'],
        ['CA', 'Apples', '2019-03-01'],
        ['CA', 'Carrots', '2018-11-10'],
        ['BR', 'Oranges', '2019-01-12'],
    ];
    // Column definitions
    const columns = [
        {width: '300px'},
        {width: '200px'},
        {width: '200px'},
    ];
    // Initial data grid cell comments
    const comments = {
        B1: 'Initial comments on B1',
        C1: 'Initial comments on C1'
    };
    // Event on comments
    const oncomments = () => {
        console.log(arguments);
    }

    // Render component
    return (
        <>
            <Spreadsheet ref={spreadsheet} oncomments={oncomments}>
                <Worksheet data={data} columns={columns} comments={comments} allowComments/>
            </Spreadsheet>
            <input type="button" value="Set A1 comments"
                   onClick={() => spreadsheet.current[0].setComments('A1', 'Test')}/>
            <input type="button" value="Get A1 comments"
                   onClick={() => alert(spreadsheet.current[0].getComments('A1'))}/>
            <input type="button" value="Reset A1 comments"
                   onClick={() => spreadsheet.current[0].setComments('A1', '')}/>
        </>
    );
}

<template>
    <Spreadsheet ref="spreadsheet" :oncomments="oncomments">
        <Worksheet :data="data" :columns="columns" :comments="comments" allowComments />
    </Spreadsheet>
    <input type="button" value="Set A1 comments" @click="setComments('A1', 'Test')" />
    <input type="button" value="Get A1 comments" @click="getComments('A1')" />
    <input type="button" value="Reset A1 comments" @click="setComments('A1','')"  />
</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('OWNmMjA2YzllYjU3NWY1MDc1YTYyMWRlN2UxMzFhYjBjNzA4OWM5YTFiMGRhNTNiN2RkZWFkYzBhYTBlMmVjMzk1NzIyZGRlYmI5NzIxNDgyZDk0ZTQzZDlmY2UyYmJkNWZhNTE4MzY3N2ZlZjNhNmU5NjYxY2IzNzFkZGJkZmMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNVFl5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    methods: {
        getComments(cell) {
            alert(this.$refs.spreadsheet[0].getComments(cell));
        },
        setComments(cell, title) {
            this.$refs.spreadsheet[0].setComments(cell, title);
        },
        oncomments(worksheet) {
            console.log(worksheet);
        },
    },
    data() {
        return {
            // Worksheet data
            data: [
                ["US", "Cheese", "2019-02-12"],
                ["CA", "Apples", "2019-03-01"],
                ["CA", "Carrots", "2018-11-10"],
                ["BR", "Oranges", "2019-01-12"],
            ],
            // Columns
            columns: [
                { width: "300px" },
                { width: "200px" },
                { width: "200px" }
            ],
            // Comments
            comments: {
                B1: "Initial comments on B1",
                C1: "Initial comments on C1",
            }
        };
    }
}
</script>

import { Component, ViewChild, ElementRef, AfterViewInit } 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('OWNmMjA2YzllYjU3NWY1MDc1YTYyMWRlN2UxMzFhYjBjNzA4OWM5YTFiMGRhNTNiN2RkZWFkYzBhYTBlMmVjMzk1NzIyZGRlYmI5NzIxNDgyZDk0ZTQzZDlmY2UyYmJkNWZhNTE4MzY3N2ZlZjNhNmU5NjYxY2IzNzFkZGJkZmMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNVFl5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

@Component({
    standalone: true,
    selector: "app-root",
    template: `
        <div #spreadsheet></div>
        <input type="button" id="bt1" value="Set A1 comments" 
            (click)="this.worksheets[0].setComments('A1', 'Test');" />
        <input type="button" id="bt2" value="Get A1 comments" 
            (click)="alertComments()" />
        <input type="button" id="bt3" value="Reset A1 comments" 
            (click)="this.worksheets[0].setComments('A1', '');" />`
})
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, {
            worksheets: [
                {
                    data: [
                        ['US', 'Cheese', '2019-02-12'],
                        ['CA', 'Apples', '2019-03-01'],
                        ['CA', 'Carrots', '2018-11-10'],
                        ['BR', 'Oranges', '2019-01-12'],
                    ],
                    columns: [
                        { width: 300 },
                        { width: 200 },
                        { width: 200 },
                    ],
                    allowComments: true,
                    comments: {
                        B1: 'Initial comments on B1',
                        C1: 'Initial comments on C1'
                    },
                }
            ],
            oncomments: function() {
                console.log(arguments);
            }
        });
    }

    alertComments() {
        alert(this.worksheets[0].getComments('A1'));
    }
}

Batch Update for Multiple Cells

The setComments method allows adding comments to various cells simultaneously by passing an object as a parameter. This helps prevent multiple undesirable entries in the spreadsheet history.

<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="spreadsheet"></div><br/><br/>

<input type="button" id="batch" value="Add Batch Comments" />
<input type="button" id="clear" value="Clear All Comments" />

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

// Create the spreadsheet
const worksheets = jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        minDimensions: [6,6],
        allowComments: true,
    }],
    oncomments: function() {
        console.log('Comments updated:', arguments);
    }
});

document.getElementById('batch').onclick = function() {
    worksheets[0].setComments({
        A1: 'Comment on A1',
        B1: 'Comment on B1',
        C1: 'Comment on C1',
        A2: 'Another comment'
    });
}

document.getElementById('clear').onclick = function() {
    worksheets[0].setComments({
        A1: '', B1: '', C1: '', A2: ''
    });
}
</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('OWNmMjA2YzllYjU3NWY1MDc1YTYyMWRlN2UxMzFhYjBjNzA4OWM5YTFiMGRhNTNiN2RkZWFkYzBhYTBlMmVjMzk1NzIyZGRlYmI5NzIxNDgyZDk0ZTQzZDlmY2UyYmJkNWZhNTE4MzY3N2ZlZjNhNmU5NjYxY2IzNzFkZGJkZmMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNVFl5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();

    // Event on comments
    const oncomments = () => {
        console.log('Comments updated:', arguments);
    }

    const addBatchComments = () => {
        spreadsheet.current[0].setComments({
            A1: 'Comment on A1',
            B1: 'Comment on B1',
            C1: 'Comment on C1',
            A2: 'Another comment'
        });
    }

    const clearAllComments = () => {
        spreadsheet.current[0].setComments({
            A1: '', B1: '', C1: '', A2: ''
        });
    }

    // Render component
    return (
        <>
            <Spreadsheet ref={spreadsheet} oncomments={oncomments}>
                <Worksheet minDimensions={[6, 6]} allowComments />
            </Spreadsheet>
            <input type="button" value="Add Batch Comments" onClick={addBatchComments} />
            <input type="button" value="Clear All Comments" onClick={clearAllComments} />
        </>
    );
}

<template>
    <Spreadsheet ref="spreadsheet" :oncomments="oncomments">
        <Worksheet :minDimensions="[6, 6]" allowComments />
    </Spreadsheet>
    <input type="button" value="Add Batch Comments" @click="addBatchComments" />
    <input type="button" value="Clear All Comments" @click="clearAllComments" />
</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('OWNmMjA2YzllYjU3NWY1MDc1YTYyMWRlN2UxMzFhYjBjNzA4OWM5YTFiMGRhNTNiN2RkZWFkYzBhYTBlMmVjMzk1NzIyZGRlYmI5NzIxNDgyZDk0ZTQzZDlmY2UyYmJkNWZhNTE4MzY3N2ZlZjNhNmU5NjYxY2IzNzFkZGJkZmMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNVFl5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    methods: {
        addBatchComments() {
            this.$refs.spreadsheet[0].setComments({
                A1: 'Comment on A1',
                B1: 'Comment on B1',
                C1: 'Comment on C1',
                A2: 'Another comment'
            });
        },
        clearAllComments() {
            this.$refs.spreadsheet[0].setComments({
                A1: '', B1: '', C1: '', A2: ''
            });
        },
        oncomments(worksheet) {
            console.log('Comments updated:', worksheet);
        },
    },
}
</script>

import { Component, ViewChild, ElementRef, AfterViewInit } 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('OWNmMjA2YzllYjU3NWY1MDc1YTYyMWRlN2UxMzFhYjBjNzA4OWM5YTFiMGRhNTNiN2RkZWFkYzBhYTBlMmVjMzk1NzIyZGRlYmI5NzIxNDgyZDk0ZTQzZDlmY2UyYmJkNWZhNTE4MzY3N2ZlZjNhNmU5NjYxY2IzNzFkZGJkZmMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNVFl5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

@Component({
    standalone: true,
    selector: "app-root",
    template: `
        <div #spreadsheet></div>
        <input type="button" value="Add Batch Comments" (click)="addBatchComments()" />
        <input type="button" value="Clear All Comments" (click)="clearAllComments()" />`
})
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, {
            worksheets: [{
                minDimensions: [6,6],
                allowComments: true,
            }],
            oncomments: function() {
                console.log('Comments updated:', arguments);
            }
        });
    }

    addBatchComments() {
        this.worksheets[0].setComments({
            A1: 'Comment on A1',
            B1: 'Comment on B1',
            C1: 'Comment on C1',
            A2: 'Another comment'
        });
    }

    clearAllComments() {
        this.worksheets[0].setComments({
            A1: '', B1: '', C1: '', A2: ''
        });
    }
}

Enterprise Extensions

Multiple Comments

Jspreadsheet Enterprise offers an extension that allows multiple comments within a single data grid cell.

Learn more about the Advanced Comments Extension

Edit this page on GitHub