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 optionsUsing 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 = 'NjZlZjdiN2FjNzQ3ZjFhNDc4MTk4YjViOTA1OWQ5MzJhYzc4NDg3MDM1Yzc4MGI1Yjg5NTE5ZGM2M2VmNjExMGZjNDlmNzBkNzE2YmEzZTM2ZjEyNmRjMzA4NWU4MzgyZTkzY2ViZjliODc4OTU1MWJlOTlkNjMzNDYzM2JkZWIsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dNak0zTWpZMU15d2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5';; // 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 = 'NjZlZjdiN2FjNzQ3ZjFhNDc4MTk4YjViOTA1OWQ5MzJhYzc4NDg3MDM1Yzc4MGI1Yjg5NTE5ZGM2M2VmNjExMGZjNDlmNzBkNzE2YmEzZTM2ZjEyNmRjMzA4NWU4MzgyZTkzY2ViZjliODc4OTU1MWJlOTlkNjMzNDYzM2JkZWIsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dNak0zTWpZMU15d2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5'; // 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 = 'NjZlZjdiN2FjNzQ3ZjFhNDc4MTk4YjViOTA1OWQ5MzJhYzc4NDg3MDM1Yzc4MGI1Yjg5NTE5ZGM2M2VmNjExMGZjNDlmNzBkNzE2YmEzZTM2ZjEyNmRjMzA4NWU4MzgyZTkzY2ViZjliODc4OTU1MWJlOTlkNjMzNDYzM2JkZWIsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dNak0zTWpZMU15d2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5'; // 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>
See this example on Codesandbox
Angular example
import { Component, ViewChild, ElementRef } from "@angular/core"; import * as jspreadsheet from "jspreadsheet"; import * as comments from "@jspreadsheet/comments"; import "/node_modules/jsuites/dist/jsuites.css"; import "/node_modules/@jsuites/css/dist/style.css"; import "/node_modules/jspreadsheet/dist/jspreadsheet.css"; import "/node_modules/@jspreadsheet/comments/dist/style.css"; // Set your JSS license key (The following key only works for one day) jspreadsheet.setLicense(''); // 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({ 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" } }] }); } }