{"id":23712037,"url":"https://github.com/jspreadsheet/plugins","last_synced_at":"2025-06-16T03:11:32.706Z","repository":{"id":49114445,"uuid":"325625091","full_name":"jspreadsheet/plugins","owner":"jspreadsheet","description":null,"archived":false,"fork":false,"pushed_at":"2021-06-28T13:11:33.000Z","size":495,"stargazers_count":2,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-20T11:19:03.443Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jspreadsheet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-12-30T18:51:03.000Z","updated_at":"2024-04-15T16:40:42.000Z","dependencies_parsed_at":"2022-09-26T16:40:45.924Z","dependency_job_id":null,"html_url":"https://github.com/jspreadsheet/plugins","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jspreadsheet%2Fplugins","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jspreadsheet%2Fplugins/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jspreadsheet%2Fplugins/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jspreadsheet%2Fplugins/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jspreadsheet","download_url":"https://codeload.github.com/jspreadsheet/plugins/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231907801,"owners_count":18444187,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-30T19:56:43.550Z","updated_at":"2024-12-30T19:56:44.118Z","avatar_url":"https://github.com/jspreadsheet.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Plugins\n\nThe JSS plugins are the best way to enhance existing or create new features for your online spreadsheets. There are plenty of free or premium plugins already available, but you can build your custom plugins. You will find here official or third-party plugins.\n\n## Custom plugins\n\nYou can overwrite a few of the methods described below to create custom features. For instance, change the toolbar or context menu, or implement a server-side spreadsheet data persistence. You will have access to all components in your spreadsheet, and along with the available events, you would be able to create amazing things.  \n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eMethod\u003c/th\u003e\n\u003cth\u003eDescription\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003einit\u003c/td\u003e\n\u003ctd\u003eWhen a new worksheet is added.\u003cbr\u003e\u003ccode\u003einit(worksheet: Object) : void\u003c/code\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eonevent\u003c/td\u003e\n\u003ctd\u003eIt would receive a call for every spreadsheet event.\u003cbr\u003e\u003ccode\u003eonevent(event: String, a?: any, b?: any, c?: any, d?: any) : void\u003c/code\u003e\u003cbr\u003e\nThe number of arguments would vary depending on which event is being executed. The first argument is the event name.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003epersistence\u003c/td\u003e\n\u003ctd\u003eWhen the spreadsheet needs to save something in the server. The second argument depends on which method is being executed.\u003cbr\u003e\n\u003ccode\u003epersistence(method: String, args: Object) : void\u003c/code\u003e\u003cbr\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003econtextMenu\u003c/td\u003e\n\u003ctd\u003eWhen the user opens the context menu.\u003cbr\u003e\n\u003ccode\u003econtextMenu(instance: Object, x: Number, y: Number, e: MouseEvent, items: Array, section: String, a: any, b?: any) : void\u003c/code\u003e\u003cbr\u003e\n\u003cpre\u003e\n/**\n   * Run on the context menu\n   * @param instance Jexcel Spreadsheet Instance\n   * @param x coordinates from the clicked cell\n   * @param y coordinates from the clicked cell\n   * @param e click object\n   * @param items current items in the contextMenu\n   * @param section\n   * @param argument1 depends which section\n   * @param argument2 depends which section\n   */\n\u003cpre\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003etoolbar\u003c/td\u003e\n\u003ctd\u003eWhen the toolbar is create and clicked.\u003cbr\u003e\u003ccode\u003etoolbar(instance: Object, items: Array) : void\u003c/code\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n## Basic implementation\n\nThe following code is a basic implementation that can be used as a reference.  \n\n### Plugin implementation\n\n```Javascript\nvar newPlugin = (function() {\n    // Plugin object\n    var plugin = {};\n\n    /**\n     * It will be executed for every new worksheet\n     */\n    plugin.init = function(worksheet) {\n    }\n\n    /**\n     * Jspreadsheet events\n     */\n    plugin.onevent = function() {\n        // It would be executed in every single event and can be used to customize actions\n    }\n\n    /**\n     * Persistence: It would be call every single time persistence is required\n     * @param {string} method - action executed\n     * @param {object} args - depending on the action.\n     */\n    plugin.persistence = function(method, args) {\n        // Different options are used depending on the action performated. \n    }\n\n    /**\n     * Run on the context menu\n     * @param instance Jexcel Spreadsheet Instance\n     * @param x coordinates from the clicked cell\n     * @param y coordinates from the clicked cell\n     * @param e click object\n     * @param items current items in the contextMenu\n     */\n    plugin.contextMenu = function(instance, x, y, e, items) {\n        // Can be used to overwrite the contextMenu\n\n        return items;\n    }\n\n    /**\n     * Run on toolbar\n     * @param instance Jexcel Spreadsheet Instance\n     * @param items current items in the toolbar \n     */\n    plugin.toolbar = function(instance, items) {\n        // Can be used to overwrite the toolbar\n\n        return items;\n    }\n\n    // Any startup configuration goes here\n    // (...)\n\n    // Return the object\n    return plugin;\n});\n```\n\n### Loading the plugin\n\nConsidering the following example, you can use the following code to integrate the plugin into a spreadsheet.\n\n```HTML\n\u003chtml\u003e\n\u003cscript src=\"https://jspreadsheet.com/v7/jexcel.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://jspreadsheet.com/v7/jsuites.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"https://jspreadsheet.com/v7/jexcel.css\" type=\"text/css\" /\u003e\n\u003clink rel=\"stylesheet\" href=\"https://jspreadsheet.com/v7/jsuites.css\" type=\"text/css\" /\u003e\n\n\u003cscript src=\"/js/newPlugin.js\"\u003e\u003c/script\u003e\n\n\u003cdiv id='spreadsheet'\u003e\u003c/div\u003e\n\n\u003cscript\u003e\nvar spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {\n    worksheets: [\n        { minDimensions: [10, 10] },\n        { minDimensions: [10, 10] },\n    ],\n    plugins: { newPlugin }\n});\n\n// This method is used to load plugins after the spreadsheet initialization\nvar loadPlugins = function() {\n    spreadsheet.setPlugins({ otherPlugin });\n}\n\u003c/script\u003e\n\u003c/html\u003e\n```\n\n## \u003ca name=\"Loading-a-plugin-example\"\u003eExamples\u003c/a\u003e\n\nThe following code is a working example of a plugin in action.  \n\n## \u003ca name=\"spreadsheet-property-plugin\"\u003eSpreadsheet properties update\u003c/a\u003e\n\nThe properties plugin allow the user to change some of the spreadsheet settings, through a new option included in the context menu.  \n\n\u003cspan class=\"small\"\u003eTo test: right-click in any cell and choose the last option in the context mene.\u003c/span\u003e  \n\n### HTML\n\n```HTML\n\u003chtml\u003e\n\u003cscript src=\"https://jspreadsheet.com/v8/jspreadsheet.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://jsuites.net/v4/jsuites.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"https://jspreadsheet.com/v7/jspreadsheet.css\" type=\"text/css\" /\u003e\n\u003clink rel=\"stylesheet\" href=\"https://jsuites.net/v4/jsuites.css\" type=\"text/css\" /\u003e\n\n\u003cscript src=\"https://jspreadsheet.com/v8/plugins/properties.js\"\u003e\u003c/script\u003e\n\n\u003cdiv id='spreadsheet'\u003e\u003c/div\u003e\n\n\u003cscript\u003e\njspreadsheet(document.getElementById('spreadsheet'), {\n    worksheets: [\n        { minDimensions: [10, 10] },\n        { minDimensions: [10, 10] },\n    ],\n    plugins: { properties },\n});\n\u003c/script\u003e\n\u003c/html\u003e\n```\n\n### CDN\n\n```Javascript\n// Installation npm install @jspreadsheet/properties\nimport properties from '@jspreadsheet/properties';\n\n// Loading the plugin into the spreadsheet\njspreadsheet(document.getElementById('spreadsheet'), {\n    worksheets: [\n        { minDimensions: [10, 10] },\n        { minDimensions: [10, 10] },\n    ],\n    plugins: { properties },\n});\n```\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n## Plugins documentation\n\nMore about the JSS spreadsheet plugins.\n\n\u003ca href='https://jspreadsheet.com'\u003ehttps://jspreadsheet.com/plugins\u003c/a\u003e\n\n### \u003ca name=\"Publish-your-plugins\"\u003ePublish your plugins\u003c/a\u003e\n\nTo publish your plugins on our website. Please, clone this repository and send you PR.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjspreadsheet%2Fplugins","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjspreadsheet%2Fplugins","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjspreadsheet%2Fplugins/lists"}