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

The initial settings declare the information of the user session.

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 "/node_modules/@jsuites/css/dist/style.css";
import "/node_modules/@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.

JavaScript example

<html>
<script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v10/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 = 'MGYzNzA4MzhkMjU4MjE3YWYxNzYzYjk3MTdlMGY0MDNlODQ4MWZmODU4ZTM3ZWQxZGYyZWFhOWZkNTBlMDM1YmIxYmIzYjlkMmFkYTdhY2IwYzM2YWMyZDY0OGYyYmYwMmEyNDVjMzZjNzk1MjgyYTk2MjFjNzlkNTIxZjVkN2YsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6TlRRMk1Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';;

// 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: [8,10],
            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>

See this example on codesandbox

React example

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

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

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

// 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>
    );
}

See this example on Codesandbox

Vue example

<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 "/node_modules/@jsuites/css/dist/style.css";
import "/node_modules/@jspreadsheet/comments/dist/style.css";

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

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