Data Grid Advanced Comments

Spreadsheet Comments

The JSS advanced comments extension offers a user-friendly method for adding multiple comments to a specific cell within the JSS spreadsheet. It allows for the inclusion of user and date information with each comment, providing a simple and effective means of managing comments within the spreadsheet.

Documentation

Configuration

Setting Description
name?: String The user full name
image?: String Photo of the user
user_id?: Number User unique identification number.

Declaring the user in this session

You can identify which user is currently using the spreadsheet, enabling proper identification of any comments added to the cells.

// Declare the user information to the session
comments({
    user_id: 1,
    name: 'John Lennon',
    image: 'img/john.jpg',
})

Installation

Please choose one of the following options

Using NPM

Install the necessary dependencies

$ npm install @jspreadsheet/comments

Import the necessary CSS

import "@jsuites/css/dist/style.css";
import "@jspreadsheet/comments/dist/style.css";

Using a CDN

<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/comments/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jsuites/css/dist/style.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jspreadsheet/comments/dist/style.min.css" type="text/css" />

Examples

Multiple comments to a data grid

A new option is added to the context menu. Right-click above any cell and click in the Comments option.

<html>
<script src="https://jspreadsheet.com/v11/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v11/jspreadsheet.css" type="text/css" />
<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" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jsuites/css/dist/style.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jspreadsheet/comments/dist/style.min.css" type="text/css" />

<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/comments/dist/index.min.js"></script>

<div id='spreadsheet'></div>

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

// Advance comments add-on for the JSS data grid
jspreadsheet.setExtensions({ comments });

// Define the information about the user
jspreadsheet.comments({
    user_id: 1000,
    name: 'John Lennon',
    image: 'img/lennon.png'
});

// Create the spreadsheets
jspreadsheet(document.getElementById('spreadsheet'), {
    toolbar: true,
    worksheets: [
        {
            minDimensions: [6,8],
            comments: {
                // Advance comments receive an object
                A3: [
                    {
                         name: 'George Michael',
                         image: 'img/4.jpg',
                         date: '2022-04-28 12:00:21',
                         comments: 'Please can you try that one?',
                    },
                    {
                         name: 'Miguel Rodrigues',
                         image: 'img/7359.jpg',
                         date: '2022-05-01 00:00:21',
                         comments: 'Yes. Can you send more details about the calculations?',
                    }
                ],
                // Simple comments (notes)
                F1: 'test',
             }
        },
    ],
});
</script>
</html>

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

import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
import "@jsuites/css/dist/style.css";
import "@jspreadsheet/comments/dist/style.css";

// Set the data grid license
const license = 'MDQxNjU1ZmE2YjUzZTVlNjRhMDk2NzBkMGYxYjMwM2VkNTQ4MmMyNGZmZDk2NDBjNDViYmUwNmI5ZmEyMDUyYjM4ZTZkYzQzODVjMTFkOGViOTk3ODU5Mjg0YmZlZjBiYTc2MzM3NmJlMmNmMTRiZjk0ODYwOGYyNmFhM2I3MTYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNeU1qVTVPVFV4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

// Define the data grid extensions
const extensions = { comments };

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

    // Who is connected to the data grid
    comments({
        user_id: 1000,
        name: 'John Lennon',
        image: 'img/lennon.png'
    });

    // Comments
    const worksheetComments = {
        // Advance comments receive an object
        A3: [
            {
                 name: 'George Michael',
                 image: 'img/4.jpg',
                 date: '2022-04-28 12:00:21',
                 comments: 'Please can you try that one?',
            },
            {
                 name: 'Miguel Rodrigues',
                 image: 'img/7359.jpg',
                 date: '2022-05-01 00:00:21',
                 comments: 'Yes. Can you send more details about the calculations?',
            }
        ],
        // Simple comments (notes)
        F1: 'test',
     }

    // Render component
    return (
        <Spreadsheet ref={spreadsheet} license={license} extensions={extensions}>
            <Worksheet comments={worksheetComments} />
        </Spreadsheet>
    );
}

<template>
    <Spreadsheet ref="spreadsheet" :license="license" :extensions="extensions">
        <Worksheet :minDimensions="[10,10]" :comments="comments" />
    </Spreadsheet>
</template>

<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
import comments from "@jspreadsheet/comments";

import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
import "@jsuites/css/dist/style.css";
import "@jspreadsheet/comments/dist/style.css";

// Define the data grid license
const license = 'MDQxNjU1ZmE2YjUzZTVlNjRhMDk2NzBkMGYxYjMwM2VkNTQ4MmMyNGZmZDk2NDBjNDViYmUwNmI5ZmEyMDUyYjM4ZTZkYzQzODVjMTFkOGViOTk3ODU5Mjg0YmZlZjBiYTc2MzM3NmJlMmNmMTRiZjk0ODYwOGYyNmFhM2I3MTYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNeU1qVTVPVFV4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

// Define the data grid extensions
const extensions = { comments };

// Who is connected to the data grid
comments({
    user_id: 1000,
    name: "John Lennon",
    image: "https://upload.wikimedia.org/wikipedia/commons/8/85/John_Lennon_1969_%28cropped%29.jpg",
});

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    data() {
        // Comments
        const comments = {
            A3: [{
                name: "George Michael",
                image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQlNBvnyqH0ZPLUFNGhOpZ09m7C4e3PDzsHELj51FYdcu_jIU1z97Y-ucjrSnxr1H-S0TM&usqp=CAU",
                date: "2022-04-28 12:00:21",
                comments: "Please can you try that one?",
            }, ],
            // Simple comments (notes)
            F1: "test",
        }

        return {
            comments,
            license,
            extensions,
        };
    }
}
</script>

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

import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
import "@jsuites/css/dist/style.css";
import "@jspreadsheet/comments/dist/style.css";

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

// Extensions
jspreadsheet.setExtensions({
    comments
});

// Who is connected to the data grid
comments({
    user_id: 1000,
    name: "John Lennon",
    image: "https://upload.wikimedia.org/wikipedia/commons/8/85/John_Lennon_1969_%28cropped%29.jpg"
});

@Component({
    standalone: true,
    selector: "app-root",
    template: `<div #spreadsheet></div>`
})
export class AppComponent {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngAfterViewInit() {
        // Create spreadsheet
        jspreadsheet(this.spreadsheet.nativeElement, {
            worksheets: [{
                minDimensions: [10, 10],
                comments: {
                    A3: [{
                        name: "George Michael",
                        image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQlNBvnyqH0ZPLUFNGhOpZ09m7C4e3PDzsHELj51FYdcu_jIU1z97Y-ucjrSnxr1H-S0TM&usqp=CAU",
                        date: "2022-04-28 12:00:21",
                        comments: "Please can you try that one?"
                    }],
                    // Simple comments (notes)
                    F1: "test"
                }
            }]
        });
    }
}

Edit this page on GitHub