
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.
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>
jspreadsheet.license = 'NzYxODFiZjQwM2Y1MTZkNjNlNTUwNjI0ZTFhYTQ5YmJhYmEyMmNmYWZkMjM5Y2M3MDZmMWU1NzQ4YjZmZDY3MzZmMjc5ZjgxZmM4NjM0OTQ4NmI2MGVhZGE0NWNkYWE2ZDVkMzQ2Y2UwYzdkZDc2N2MwZDIzZTcxNzEwNTY2N2YsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRMU16YzFOamt5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
jspreadsheet.setExtensions({ comments });
jspreadsheet.comments({
user_id: 1000,
name: 'John Lennon',
image: 'img/lennon.png'
});
jspreadsheet(document.getElementById('spreadsheet'), {
toolbar: true,
worksheets: [
{
minDimensions: [6,8],
comments: {
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?',
}
],
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";
const license = 'NzYxODFiZjQwM2Y1MTZkNjNlNTUwNjI0ZTFhYTQ5YmJhYmEyMmNmYWZkMjM5Y2M3MDZmMWU1NzQ4YjZmZDY3MzZmMjc5ZjgxZmM4NjM0OTQ4NmI2MGVhZGE0NWNkYWE2ZDVkMzQ2Y2UwYzdkZDc2N2MwZDIzZTcxNzEwNTY2N2YsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRMU16YzFOamt5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
const extensions = { comments };
export default function App() {
const spreadsheet = useRef();
comments({
user_id: 1000,
name: 'John Lennon',
image: 'img/lennon.png'
});
const worksheetComments = {
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?',
}
],
F1: 'test',
}
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";
const license = 'NzYxODFiZjQwM2Y1MTZkNjNlNTUwNjI0ZTFhYTQ5YmJhYmEyMmNmYWZkMjM5Y2M3MDZmMWU1NzQ4YjZmZDY3MzZmMjc5ZjgxZmM4NjM0OTQ4NmI2MGVhZGE0NWNkYWE2ZDVkMzQ2Y2UwYzdkZDc2N2MwZDIzZTcxNzEwNTY2N2YsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRMU16YzFOamt5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
const extensions = { comments };
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() {
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?",
}, ],
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";
jspreadsheet.setLicense('NzYxODFiZjQwM2Y1MTZkNjNlNTUwNjI0ZTFhYTQ5YmJhYmEyMmNmYWZkMjM5Y2M3MDZmMWU1NzQ4YjZmZDY3MzZmMjc5ZjgxZmM4NjM0OTQ4NmI2MGVhZGE0NWNkYWE2ZDVkMzQ2Y2UwYzdkZDc2N2MwZDIzZTcxNzEwNTY2N2YsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRMU16YzFOamt5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
jspreadsheet.setExtensions({
comments
});
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: jspreadsheet.worksheetInstance[];
ngAfterViewInit() {
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?"
}],
F1: "test"
}
}]
});
}
}