Data grid comments

JSS data grid offers the ability to add comments to cells using the context menu, similar to Excel or Google Sheets. Additionally, it provides various methods and events for further customization.

Documentation

Methods

The following methods can be used to get or set comments in one or multiple data grid cells.
MethodDescription
getComments Get comments from a cell or from the whole table.
@Param mixed - cell identification or null for the whole table.
worksheetInstance.getComments(cellName: String | null)
setComments Add or change the comments for one or multiple cells.
@param {string|object} cellName - Identification of a cell or an object with multiple definitions
@param {string?} comments - Comments for the cell
worksheetInstance.setComments(cellName: String | object, comments?: String)


Events

The onbeforecomments can be used to intercept, change or cancel the user action when adding a new comment.
EventDescription
onbeforecommentsonbeforecomments(worksheet: Object, newValue: Object) => object | boolean | void

Accepted returns for this event:
  • object
  • An object with the cell names and the comments for each cell. Example: { A1: 'test' }
  • boolean
  • Return false to cancel the user action
  • void
  • To accept the user changes
oncommentsoncomments(worksheet: Object, newValue: Object, oldValue: Object) => void


Initial Settings

The following properties are available through the initialization of the online spreadsheet.
PropertyDescription
allowComments: booleanEnable or disable the user to enter new comments on cells.
comments: objectObject with the initial comments. Example: { A1: 'test', B1: 'another test' }



Examples

Basic data grid with comments

How to create a data grid or spreadsheet with a few initial comments.



Interact with the cell comments programmatically
To apply comments via JavaScript, you can use the methods setComments or getComments, as follow:




JavaScript example

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

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

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

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

// Create the spreadsheet
let 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);
    }
});
</script>

<button type="button" onclick="worksheets[0].setComments('A1', 'Test');">Set A1 comments</button>
<button type="button" onclick="alert(worksheets[0].getComments('A1'));">Get A1 comments</button>
<button type="button" onclick="worksheets[0].setComments('A1', '');">Reset A1 comments</button>

</html>

React example

import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";

const license = 'M2RiNDc1ODNhNmY0YzZlMzk0MDZmZTMwNDgwMzI0NmMyZGFhMDYwMDBhNjczNDIwMjE5NmIzNzQ0NDVkMGY3MjkwMWU0MmE0Mzc3MmVlZGY0YjMwMGI4MGJlZGUxZGU5ZTk2YmQ0MzljMTIzNDg5N2UxYTY1ODMwOWZjNjBhMmIsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dPVEkyTlRnM01pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5';

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'],
    ]
    const columns: [
        { width: '300px' },
        { width: '200px' },
        { width: '200px' },
    ]
    const comments: {
        B1: 'Initial comments on B1',
        C1: 'Initial comments on C1'
    }
    const oncomments = () => {
        console.log(arguments);
    }

    // Render component
    return (
        <>
            <Spreadsheet ref={spreadsheet} license={license} 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', '')} />
        </>
    );
}
See this example on Codesandbox

Vue example

<template>
    <Spreadsheet ref="spreadsheet" :license="license" :oncomments="oncomments">
        <Worksheet :data="data" :columns="columns" :comments="comments" />
    </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 } from "@jspreadsheet/vue";

const license = 'M2RiNDc1ODNhNmY0YzZlMzk0MDZmZTMwNDgwMzI0NmMyZGFhMDYwMDBhNjczNDIwMjE5NmIzNzQ0NDVkMGY3MjkwMWU0MmE0Mzc3MmVlZGY0YjMwMGI4MGJlZGUxZGU5ZTk2YmQ0MzljMTIzNDg5N2UxYTY1ODMwOWZjNjBhMmIsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dPVEkyTlRnM01pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5';

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    methods: {
        getComments(cell) {
            alert(this.$refs.spreadsheet.current[0].getComments(cell));
        },
        setComments(cell, title) {
            this.$refs.spreadsheet.current[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",
            },
            // License
            license: license,
        };
    }
}
</script>

Angular example

import { Component, ViewChild, ElementRef } from "@angular/core";
import * as jspreadsheet from "jspreadsheet";

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

@Component({
    selector: "app-root",
    template: `
        <div #spreadsheet></div>
        <button type="button" (click)="this.worksheets[0].setComments('A1', 'Test');">Set A1 comments</button>
        <button type="button" (click)="alert(this.worksheets[0].getComments('A1'));">Get A1 comments</button>
        <button type="button" (click)="this.worksheets[0].setComments('A1', '');">Reset A1 comments</button>
    `
})
export class AppComponent {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngOnInit() {
        // 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: '300px' },
                        { width: '200px' },
                        { width: '200px' },
                    ],
                    allowComments: true,
                    comments: {
                        B1: 'Initial comments on B1',
                        C1: 'Initial comments on C1'
                    },
                }
            ],
            oncomments: function() {
                console.log(arguments);
            }
        });
    }
}


Update the comments of multiple cells

The setComment method allows adding comments to various cells simultaneously by passing an object as a parameter. That helps to prevent multiple undesirable entries in the spreadsheet history.
// Create the spreadsheet
let worksheets = jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        minDimensions: [10,10]
        allowComments: true,
    }],
});

worksheets[0].setComments({ A1: 'Comment on A1', B1: 'Comments on B1' });


Enterprise Extensions

Multiple comments in the same grid cell

JSS Enterprise offers an extension that enables multiple comments within a single grid cell.



More information about the Advance Comments extension