@jspreadsheet/topmenu

jSpreadsheet Plugin : Top menu

The topmenu plugin add a top menu bar on jSpreadsheet.

This plugin is Free

Features

• Add top menu bar
• Add function on instance for add top menu bar
• Load item top menu in other plugins
• Menu can use sub menu

What is jSpreadsheet ?

jSpreadsheet, a lightweight Vanilla JavaScript plugin, can help you create exceptional web-based interactive tables and spreadsheets. Compatible with most widely-used spreadsheet software, such as Excel or Google Spreadsheet, it offers users an unrivalled Excel-like user experience. It also works well with prominent modern frameworks and flexibly utilizes a large collection of events, extensions and configurations to meet different application requirements. Impress your clients with a better user experience and a great dynamic interactive data management tool.

• Download jSpreadsheet Pro

Documentation

Dependencies

• jSpreadsheet Pro v8 or
• jSpreadsheet Pro v9
• or
• jSpreadsheet Pro v10

Options of plugin

Option name	Description	Type	Default Value
menus	Define your menus	Object	Default menu

For translation

you can use jSuites dictionary for translate this plugin

Option name	Default Value
text_file	File
text_edit	Edit
text_view	View

Methods of plugin

Method	Description	Example
add(String title, *Optional* Array/Function items, *Optional* Int position) → Void	add new top menu. You can use directly instance.addTopmenu with same arguments	jspreadsheet.current.plugins.topmenu.add("Format");
refresh() → Void	Refresh top menu	jspreadsheet.current.plugins.topmenu.refresh();

Menus with function

You can use function for have dynamics items.

use this template :

function (element, instance, menuButton) {
   var items = [];

   /* you code for add dynamics items with condition */

   return items;
}

Example :

function (element, instance, menuButton) {
   var items = [];

   if(instance.options.about == true) { // show about item
       items.push({
            title:'About',
            onclick:function() {
                alert('My about text')
            }
        });
   }

   if(instance.selectedCell[0] == 0 && instance.selectedCell[1] == 0) {
       items.push({
            title:'You have selected A1',
            disable: true
            onclick:function() {  }
        });
   }

   return items;
}

Menu items properties

Item is based on contextmenu item. Use same items of contextmenu for build topmenu

Documentation available on Quick Reference Contextmenu jSuites.net

Property	Description
type: string	Context menu item type: line | divisor | default
icon: string	Context menu icon key. (Material icon key icon identification)
id: string	HTML id property of the item DOM element
disabled: boolean	The item is disabled
onclick: function	Specific onclick event for the element.
shortcut: string	A short description or instruction for the item. Normally a shortcut.
tooltip: string	Show this text when the user mouse over the element
submenu: Array of objects	Submenu items

Menu on plugin

On your plugin, add function on your object like contextMenu :

example :

function example_plugin_jss(instance, options) {
   var plugin = {};
   
   /* ... your code of your plugin ...*/
   
   plugin.topMenu = function(name, items, menuButton, shortcut_base) { 
       /*... your code for new items ...*/
       return items;
   }
   
   /* ... your code of your plugin ...*/
   
   return plugin;
}

this function is call when top menu is open

Arguments of topMenu:

• name : Name of top menu
• items : Array
• menuButton : Button in top menu
• shortcut_base = "CTRL +" or "⌘ +"

this function must return Array of items

Get started

Header on page

<script src="https://cdn.jsdelivr.net/npm/jspreadsheet/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jspreadsheet/dist/jspreadsheet.min.css" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/jsuites/dist/jsuites.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsuites/dist/jsuites.min.css" type="text/css" />

<script src="/path/to/topmenu.min.js"></script>
<link rel="stylesheet" href="/path/to/topmenu.min.css" type="text/css" />

Initialize plugin on jSpreadsheet

jspreadsheet(document.getElementById('spreadsheet'), {
	...
	plugins: [
      ...
      { name:'topmenu', plugin:jss_topmenu},
      ...  
    ],
    ...
});

CDN

You can use this CDN link

<script src="https://cdn.jsdelivr.net/gh/GBonnaire/jspreadsheet-plugins-and-editors@latest/plugins/JSSV8/dist/topmenu.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/GBonnaire/jspreadsheet-plugins-and-editors@latest/plugins/JSSV8/dist/topmenu.min.css" type="text/css" />

NPM

npm install @jspreadsheet/topmenu

import jss_topmenu from  '@jspreadsheet/topmenu';
import '@jspreadsheet/topmenu/style.css';

Copyright and license

Copyright GBonnaire.fr and Code released under the MIT License