Documentationkeyboard_arrow_rightComments

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 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 Triggered before comments are updated. Return false to cancel, an object to modify the comments, or void to proceed.
onbeforecomments(worksheet: Object, newValue: Object) => object | boolean | void
oncomments Triggered after comments are updated. Receives the worksheet instance, new comments, and previous comments.
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 the user's ability to add comments to cells.
comments: object Object with 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 predefined comments on specific cells. It also shows 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('ZjhmY2Q0ODUwMjIwN2YwZjA2OTg4NTA4MDA5OGFjZWFiMWU0MDNhY2MzMjNiOTJiODYzMWRmNTE0ZjJjZjUxMmUyMTE2ZjhkNThhZDgzMGVkMzRhZjQ0MDRhZTEzZjRjMmQ0YzM1MWQ1ZDRjOTAzYTIwMzcwZTczZDQyNmY0NmEsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpZek9EVTVOamd5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

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

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

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

@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 multiple cells simultaneously by passing an object as a parameter. This prevents 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('ZjhmY2Q0ODUwMjIwN2YwZjA2OTg4NTA4MDA5OGFjZWFiMWU0MDNhY2MzMjNiOTJiODYzMWRmNTE0ZjJjZjUxMmUyMTE2ZjhkNThhZDgzMGVkMzRhZjQ0MDRhZTEzZjRjMmQ0YzM1MWQ1ZDRjOTAzYTIwMzcwZTczZDQyNmY0NmEsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpZek9EVTVOamd5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

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

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

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

@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