Plugins

Plugins provide a powerful way to expand or create features for your data grid. Many free and premium plugins are already available, allowing you to build custom plugins tailored to meet specific needs.

Documentation

Methods

Add new features or enhance existing ones by creating custom plugins. Override the following methods to customize the toolbar, context menu, or server-side data persistence. Create tailored solutions with full access to all spreadsheet components and events.

Method	Description
`beforeinit`	Triggered before a new worksheet is added. `beforeinit(worksheet: Object, config: Object) : void \| object`
`init`	Triggered when a new worksheet is added. `init(worksheet: Object) : void`
`onevent`	Receives a call for every spreadsheet event. `onevent(event: String, a?: any, b?: any, c?: any, d?: any) : void` The number of arguments varies depending on the event being executed. The first argument is the event name.
`persistence`	Triggered when the spreadsheet needs to save data on the server. `persistence(worksheet: Object, method: String, args: Array) : void` The args depend on the method being executed.
`contextMenu`	Triggered when the user opens the context menu. `contextMenu(worksheet: Object, x: Number, y: Number, e: Object, items: [], section: String, a?: any, b?: any) : void`
`toolbar`	Triggered when the toolbar is created and clicked. `toolbar(worksheet: Object, items: Array) : void`

Worksheet options

Define custom options per worksheet using the pluginOptions property.

Basic implementation

The following code provides a basic implementation that can be used as a reference.

Plugin implementation

const newPlugin = (function() { // Plugin object let plugin = {}; /** * Executed for every new worksheet */ plugin.init = function(worksheet) { } /** * Spreadsheet events */ plugin.onevent = function() { // Executed for every spreadsheet event and can be used to customize actions } /** * Persistence: Called every time persistence is required * @param {object} worksheet - worksheet * @param {string} method - action executed * @param {object} args - depends on the action */ plugin.persistence = function(worksheet, method, args) { // Different options are used depending on the action performed. } /** * Run on the context menu * @param worksheet Worksheet instance * @param x coordinates from the clicked cell * @param y coordinates from the clicked cell * @param e click object * @param items current items in the context menu */ plugin.contextMenu = function(worksheet, x, y, e, items) { // Can be used to overwrite the context menu return items; } /** * Run on toolbar * @param worksheet Worksheet instance * @param items current items in the toolbar */ plugin.toolbar = function(worksheet, items) { // Can be used to overwrite the toolbar return items; } // Any startup configuration goes here // (...) // Return the object return plugin; })();

Loading a plugin

Use the following code to integrate the plugin into a spreadsheet.

<html> <script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script> <script src="https://jsuites.net/v6/jsuites.js"></script> <link rel="stylesheet" href="https://jspreadsheet.com/v12/jspreadsheet.css" type="text/css" /> <link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" /> <div id='spreadsheet'></div> <script> const newPlugin = (function() { let plugin = {}; return plugin; })(); // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('ZGY1N2VmYjUzMDZmMzdmY2Y0ZGJkN2VkZGQzM2FkZmU0NjYxOWRhZmI4Y2VhNDJhYTUyNjBlYWViMTFjYjgwMWFhYWU3NzE5MjkxNDVhZmM3NTc4MDA4ZWMwZTIxZDgxODdmYjI0M2NjNjg2ZjIwOTYxNGNhZTYwNWEyMTEwZGMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1UWTFNREkyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); // Create the spreadsheet let spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [ { minDimensions: [6, 6] }, { minDimensions: [6, 6] }, ], plugins: { newPlugin } }); </script> </html>

import React, {useRef} from "react"; import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react"; import newPlugin from "./js/newPlugin.js"; import "jsuites/dist/jsuites.css"; import "jspreadsheet/dist/jspreadsheet.css"; // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('ZGY1N2VmYjUzMDZmMzdmY2Y0ZGJkN2VkZGQzM2FkZmU0NjYxOWRhZmI4Y2VhNDJhYTUyNjBlYWViMTFjYjgwMWFhYWU3NzE5MjkxNDVhZmM3NTc4MDA4ZWMwZTIxZDgxODdmYjI0M2NjNjg2ZjIwOTYxNGNhZTYwNWEyMTEwZGMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1UWTFNREkyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); const plugins = {newPlugin}; export default function App() { const spreadsheet = useRef(); return ( <Spreadsheet ref={spreadsheet} plugins={plugins}> <Worksheet minDimensions={[10, 10]}/> <Worksheet minDimensions={[10, 10]}/> </Spreadsheet> ); }

<template> <Spreadsheet ref="spreadsheet" :plugins="plugins"> <Worksheet :minDimensions="[10,10]" /> <Worksheet :minDimensions="[10,10]" /> </Spreadsheet> </template> <script> import { Spreadsheet, Worksheet } from "@jspreadsheet/vue"; import newPlugin from "./js/newPlugin.js"; import "jsuites/dist/jsuites.css"; import "jspreadsheet/dist/jspreadsheet.css"; // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('ZGY1N2VmYjUzMDZmMzdmY2Y0ZGJkN2VkZGQzM2FkZmU0NjYxOWRhZmI4Y2VhNDJhYTUyNjBlYWViMTFjYjgwMWFhYWU3NzE5MjkxNDVhZmM3NTc4MDA4ZWMwZTIxZDgxODdmYjI0M2NjNjg2ZjIwOTYxNGNhZTYwNWEyMTEwZGMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1UWTFNREkyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); const plugins = { newPlugin }; export default { components: { Spreadsheet, Worksheet, }, data() { return { plugins }; } } </script>

import { Component, ViewChild, ElementRef } from "@angular/core"; import jspreadsheet from "jspreadsheet"; import "jspreadsheet/dist/jspreadsheet.css" import "jsuites/dist/jsuites.css" const newPlugin = (function() { let plugin = {}; return plugin; })(); // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('ZGY1N2VmYjUzMDZmMzdmY2Y0ZGJkN2VkZGQzM2FkZmU0NjYxOWRhZmI4Y2VhNDJhYTUyNjBlYWViMTFjYjgwMWFhYWU3NzE5MjkxNDVhZmM3NTc4MDA4ZWMwZTIxZDgxODdmYjI0M2NjNjg2ZjIwOTYxNGNhZTYwNWEyMTEwZGMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1UWTFNREkyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); // Loading data grid plugins const plugins = { newPlugin }; @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 this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, { worksheets: [ { minDimensions: [6, 6] }, { minDimensions: [6, 6] }, ], plugins: { newPlugin } }); } }

Loading a plugin programmatically

Load a plugin into a data grid programmatically.

<html> <script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script> <script src="https://jsuites.net/v6/jsuites.js"></script> <link rel="stylesheet" href="https://jspreadsheet.com/v12/jspreadsheet.css" type="text/css" /> <link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" /> <div id='spreadsheet'></div> <script> const otherPlugin = (function() { let plugin = {}; return plugin; })(); // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('ZGY1N2VmYjUzMDZmMzdmY2Y0ZGJkN2VkZGQzM2FkZmU0NjYxOWRhZmI4Y2VhNDJhYTUyNjBlYWViMTFjYjgwMWFhYWU3NzE5MjkxNDVhZmM3NTc4MDA4ZWMwZTIxZDgxODdmYjI0M2NjNjg2ZjIwOTYxNGNhZTYwNWEyMTEwZGMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1UWTFNREkyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); // Create the spreadsheet let worksheets = jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [ { minDimensions: [6, 6] }, { minDimensions: [6, 6] }, ] }); // This method is used to load plugins after the spreadsheet initialization worksheets[0].parent.setPlugins({ otherPlugin }); </script> </html>

import React, { useRef, useEffect } from "react"; import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react"; import otherPlugin from "./js/otherPlugin.js"; import "jsuites/dist/jsuites.css"; import "jspreadsheet/dist/jspreadsheet.css"; // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('ZGY1N2VmYjUzMDZmMzdmY2Y0ZGJkN2VkZGQzM2FkZmU0NjYxOWRhZmI4Y2VhNDJhYTUyNjBlYWViMTFjYjgwMWFhYWU3NzE5MjkxNDVhZmM3NTc4MDA4ZWMwZTIxZDgxODdmYjI0M2NjNjg2ZjIwOTYxNGNhZTYwNWEyMTEwZGMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1UWTFNREkyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); export default function App() { const spreadsheet = useRef(); useEffect(() => { spreadsheet.current[0].parent.setPlugins({ otherPlugin }) }, [spreadsheet]) return ( <Spreadsheet ref={spreadsheet}> <Worksheet minDimensions={[10,10]} /> <Worksheet minDimensions={[10,10]} /> </Spreadsheet> ); }

<template> <Spreadsheet ref="spreadsheet"> <Worksheet :minDimensions="[10,10]" /> <Worksheet :minDimensions="[10,10]" /> </Spreadsheet> </template> <script> import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue"; import otherPlugin from "./js/otherPlugin.js"; import "jsuites/dist/jsuites.css"; import "jspreadsheet/dist/jspreadsheet.css"; // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('ZGY1N2VmYjUzMDZmMzdmY2Y0ZGJkN2VkZGQzM2FkZmU0NjYxOWRhZmI4Y2VhNDJhYTUyNjBlYWViMTFjYjgwMWFhYWU3NzE5MjkxNDVhZmM3NTc4MDA4ZWMwZTIxZDgxODdmYjI0M2NjNjg2ZjIwOTYxNGNhZTYwNWEyMTEwZGMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1UWTFNREkyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); const plugins = { otherPlugin }; export default { components: { Spreadsheet, Worksheet, }, mounted: function() { this.$refs.spreadsheet.current[0].parent.setPlugins({ otherPlugin }) } } </script>

import { Component, ViewChild, ElementRef } from "@angular/core"; import jspreadsheet from "jspreadsheet"; import "jspreadsheet/dist/jspreadsheet.css" import "jsuites/dist/jsuites.css" const otherPlugin = (function() { let plugin = {}; return plugin; })(); // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('ZGY1N2VmYjUzMDZmMzdmY2Y0ZGJkN2VkZGQzM2FkZmU0NjYxOWRhZmI4Y2VhNDJhYTUyNjBlYWViMTFjYjgwMWFhYWU3NzE5MjkxNDVhZmM3NTc4MDA4ZWMwZTIxZDgxODdmYjI0M2NjNjg2ZjIwOTYxNGNhZTYwNWEyMTEwZGMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1UWTFNREkyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); // Loading data grid plugins const plugins = { otherPlugin }; @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 this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, { worksheets: [ { minDimensions: [6, 6] }, { minDimensions: [6, 6] }, ] }); // This method is used to load plugins after the spreadsheet initialization this.worksheets[0].parent.setPlugins({ otherPlugin }); } }

Examples

The following code provides a working example of a plugin in action.

Spreadsheet properties update

The properties plugin allows users to change spreadsheet settings through a new option in the context menu.

Right-click in any cell and choose the last option in the context menu.

<html> <script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script> <script src="https://jsuites.net/v6/jsuites.js"></script> <link rel="stylesheet" href="https://jspreadsheet.com/v12/jspreadsheet.css" type="text/css" /> <link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" /> <script src="https://jspreadsheet.com/v12/plugins/properties.js"></script> <div id='spreadsheet'></div> <script> // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('ZGY1N2VmYjUzMDZmMzdmY2Y0ZGJkN2VkZGQzM2FkZmU0NjYxOWRhZmI4Y2VhNDJhYTUyNjBlYWViMTFjYjgwMWFhYWU3NzE5MjkxNDVhZmM3NTc4MDA4ZWMwZTIxZDgxODdmYjI0M2NjNjg2ZjIwOTYxNGNhZTYwNWEyMTEwZGMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1UWTFNREkyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); // Create the spreadsheet jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [ { minDimensions: [6, 6] }, { minDimensions: [6, 6] }, ], plugins: { properties }, }); </script> </html>

import React, { useRef } from "react"; import { Spreadsheet, Worksheet } from "@jspreadsheet/react"; import properties from "@jspreadsheet/properties"; import "jsuites/dist/jsuites.css"; import "jspreadsheet/dist/jspreadsheet.css"; // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('ZGY1N2VmYjUzMDZmMzdmY2Y0ZGJkN2VkZGQzM2FkZmU0NjYxOWRhZmI4Y2VhNDJhYTUyNjBlYWViMTFjYjgwMWFhYWU3NzE5MjkxNDVhZmM3NTc4MDA4ZWMwZTIxZDgxODdmYjI0M2NjNjg2ZjIwOTYxNGNhZTYwNWEyMTEwZGMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1UWTFNREkyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); export default function App() { // Spreadsheet array of worksheets const spreadsheet = useRef(); // Render data grid component return ( <Spreadsheet ref={spreadsheet} plugins={{ properties }}> <Worksheet minDimensions={[6, 6]}/> <Worksheet minDimensions={[6, 6]}/> </Spreadsheet> ); }

<template> <Spreadsheet ref="spreadsheet" :plugins="plugins"> <Worksheet :minDimensions="[10,10]" /> <Worksheet :minDimensions="[10,10]" /> </Spreadsheet> </template> <script> import { Spreadsheet, Worksheet } from "@jspreadsheet/vue"; import properties from "@jspreadsheet/properties"; import "jsuites/dist/jsuites.css"; import "jspreadsheet/dist/jspreadsheet.css"; // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('ZGY1N2VmYjUzMDZmMzdmY2Y0ZGJkN2VkZGQzM2FkZmU0NjYxOWRhZmI4Y2VhNDJhYTUyNjBlYWViMTFjYjgwMWFhYWU3NzE5MjkxNDVhZmM3NTc4MDA4ZWMwZTIxZDgxODdmYjI0M2NjNjg2ZjIwOTYxNGNhZTYwNWEyMTEwZGMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1UWTFNREkyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); export default { components: { Spreadsheet, Worksheet, }, data() { return { plugins: { properties } }; } } </script>

import { Component, ViewChild, ElementRef } from "@angular/core"; import jspreadsheet from "jspreadsheet"; import properties from "@jspreadsheet/properties"; import "jsuites/dist/jsuites.css"; import "jspreadsheet/dist/jspreadsheet.css"; // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('ZGY1N2VmYjUzMDZmMzdmY2Y0ZGJkN2VkZGQzM2FkZmU0NjYxOWRhZmI4Y2VhNDJhYTUyNjBlYWViMTFjYjgwMWFhYWU3NzE5MjkxNDVhZmM3NTc4MDA4ZWMwZTIxZDgxODdmYjI0M2NjNjg2ZjIwOTYxNGNhZTYwNWEyMTEwZGMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1UWTFNREkyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); // Create component @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 this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, { worksheets: [ { minDimensions: [6, 6] }, // Worksheet 1 { minDimensions: [6, 6] }, // Worksheet 2 ], plugins: { properties } }); } }