jSpreadsheet Plugin : Contextmenu shortcut
ContextMenu Shortcut is a plugin to improve the contextMenu of jSpreadsheet Pro. It allows you to change the base of shortcuts depending on whether you are on a Mac or a Windows. It also allows you to add icons for each menu item.
This plugin is Free
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.
Documentation
Dependencies
-
With default options of plugin, you should use Material Design icons. But, if you want, you can use fontawesome with editing all icons
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
Options of plugin
Option name | Description | Type | Default Value |
---|---|---|---|
icon_changeColumnType |
Icon for "Change column type" | String |
ballot |
icon_insertANewColumnBefore |
Icon for "Insert a new column before" | String |
add |
icon_insertANewColumnAfter |
Icon for "Insert a new column after" | String |
add |
icon_deleteSelectedColumns |
Icon for "Delete selected columns" | String |
delete |
icon_renameThisColumn |
Icon for "Rename this column" | String |
create |
icon_orderAscending |
Icon for "Order ascending" | String |
sort |
icon_orderDescending |
Icon for "Order descending" | String |
sort |
icon_insertANewRowBefore |
Icon for "Insert a new row before" | String |
add |
icon_insertANewRowAfter |
Icon for "Insert a new row after" | String |
add |
icon_deleteSelectedRows |
Icon for "Delete Selected Rows" | String |
delete |
icon_addComments |
Icon for "Add comment" | String |
insert_comment |
icon_clearComments |
Icon for "Clear comments" | String |
clear |
icon_cut |
Icon for "Cut" | String |
content_cut |
icon_copy |
Icon for "Copy" | String |
content_copy |
icon_paste |
Icon for "Paste" | String |
content_paste |
icon_saveAs |
Icon for "Save As" | String |
save |
icon_about |
Icon for "About" | String |
info |
isIconHTML |
Flag for defined is icon value is HTML or not (to use only is use an other library of icons i.e. <i class='fa fa-icons'>></i>
|
Boolean |
false |
Get started
Header on page
<script src="https://jspreadsheet.com/v7/jspreadsheet.js"></script>
<script src="https://jspreadsheet.com/v7/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v7/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://jspreadsheet.com/v7/jspreadsheet.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
<script src="/path/to/contextmenu_shortcut.min.js"></script>
Initialize plugin on jSpreadsheet
jSpreadsheet(document.getElementById('spreadsheet'), {
...
plugins: [
...
{ name:'shortcut', plugin:jss_contextmenu_shortcut},
...
],
...
});
Example with options
Use this way for defined icon of FontAwesome
Header on page
<script src="https://jspreadsheet.com/v7/jspreadsheet.js"></script>
<script src="https://jspreadsheet.com/v7/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v7/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://jspreadsheet.com/v7/jspreadsheet.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
<script src="/path/to/contextmenu_shortcut.min.js"></script>
Initialize plugin on jSpreadsheet
jSpreadsheet(document.getElementById('spreadsheet'), {
...
plugins: [
...
{ name:'shortcut', plugin:jss_contextmenu_shortcut, options:{
icon_addComments: 'add',
}},
...
],
...
});
CDN
You can use this CDN link
<script src="https://cdn.jsdelivr.net/gh/GBonnaire/jspreadsheet-plugins-and-editors@latest/plugins/dist/contextmenu_shortcut.min.js"></script>
NPM
Coming soon (2021) npm install @jspreadsheet/contextmenu_shortcut
import jss_contextmenu_shortcut from '@jspreadsheet/contextmenu_shortcut';
Copyright and license
Copyright GBonnaire.fr and Code released under the MIT License