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

For translation

you can use jSuites dictionary for translate this plugin

Methods of plugin

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

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