Top Menu Extension
Jspreadsheet version 12 brings a native feature via the topmenu property, allowing you to implement a menu bar to your spreadsheet with configurable items and actions. This feature is available natively and does not require extensions.
Documentation
Configuration
| Property | Description |
|---|---|
topmenu: MenuOption[] |
Array of menu configuration objects |
Menu Option Properties
| Property | Description |
|---|---|
title?: string |
Menu item text |
submenu?: MenuItem[] |
Array of submenu items |
onclick?: function |
Click handler function |
disabled?: boolean |
Disable menu item |
icon?: string |
Material icon name |
shortcut?: string |
Keyboard shortcut display |
type?: string |
Item type: 'line' for separator |
Examples
Basic Usage
Configure menu items with actions:
Advanced Topmenu Configuration
A complete example demonstrating customization and integration in a more realistic use case.
<html>
<script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v12/jspreadsheet.css" type="text/css" />
<script src="https://jsuites.net/v6/jsuites.js"></script>
<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" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/studio/dist/style.min.css" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/studio/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/topmenu/dist/index.min.js"></script>
<div id="spreadsheet"></div>
<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NmMwN2M1ZjUwNmUyMTQwYmQ1ZTgwZTA1MmUxOTQ1YzRkYzgwZmJjMjYzNzNkYTEzNGE0MmVlMWM3MzA1OGI1ZTgzY2U1ZmMxYmEzZmIxZTdhNTIwZTA2M2Q2ZTBiNWQ2ZWE2YzAwM2IxMGE0NTAyOTczM2FkYWQ2OGQ4YjRhYmQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpZeU16SXhNVFUxTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
const getActive = function () {
if (jspreadsheet.current) {
return jspreadsheet.current;
}
}
const setStyleForSelected = function (style, value) {
const s = getActive();
const selected = s.getSelected();
for (let i = 0; i < selected.length; i++) {
const { x, y } = selected[i];
const cellName = s.helpers.getCellNameFromCoords(x, y);
s.setStyle(cellName, style, value);
}
}
const options = [
{
title: 'File',
submenu: [
{
title: 'New Spreadsheet',
disabled: true,
icon: 'add_box',
onclick: function () {
}
},
{
title: 'Open',
icon: 'folder',
disabled: true,
onclick: function () {
},
},
{
type: 'line'
},
{
title: 'Share',
disabled: true,
icon: 'share',
onclick: function () {
},
},
{
title: 'Download',
icon: 'file_download',
submenu: [
{
title: 'Microsoft Excel',
onclick: function () {
let s = getActive();
if (s) {
s.download();
}
},
},
{
title: 'CSV',
onclick: function () {
let s = getActive();
if (s) {
s.downloadCSV(false, true, ",");
}
},
},
{
title: 'TSV',
onclick: function () {
let s = getActive();
if (s) {
s.downloadCSV(false, true, "\t");
}
},
},
]
},
{
title: 'Print',
icon: 'print',
onclick: function () {
getActive(self).parent.tools.exportPdf(true);
},
},
{
type: 'line'
},
{
title: 'Rename',
disabled: true,
icon: 'drive_file_rename_outline',
onclick: function () {
},
},
{
title: 'Move to trash',
disabled: true,
icon: 'delete',
onclick: function () {
},
},
{
type: 'line'
},
{
title: 'History',
disabled: true,
icon: 'history',
onclick: function () {
},
restricted: true,
}
]
},
{
title: 'Edit',
submenu: [
{
title: 'Undo',
icon: 'undo',
onclick: function () {
const s = getActive();
if (s) {
s.undo()
}
},
shortcut: 'Ctrl+Z',
},
{
title: 'Redo',
icon: 'redo',
onclick: function () {
const s = getActive();
if (s) {
s.redo()
}
},
shortcut: 'Ctrl+Y',
},
{
type: 'line'
},
{
title: 'Cut',
icon: 'content_cut',
onclick: function () {
const s = getActive();
if (s) {
s.cut()
}
},
shortcut: 'Ctrl+X',
},
{
title: ('Copy'),
icon: 'content_copy',
onclick: function () {
const s = getActive();
if (s) {
s.copy()
}
},
shortcut: 'Ctrl+C',
},
{
title: ('Paste'),
icon: 'content_paste',
onclick: function () {
navigator.clipboard.readText().then(data => {
const s = getActive();
if (s) {
const [{ x, y }] = s.getSelected();
s.paste(x, y, data)
}
})
},
shortcut: 'Ctrl+V',
},
{
type: 'line'
},
{
title: 'Delete',
icon: 'delete',
submenu: [
{
title: 'Selected rows',
onclick: function () {
const s = getActive();
const rows = s.getSelectedRows();
s.deleteRow(rows, rows.length);
},
},
{
title: 'Selected columns',
onclick: function () {
const s = getActive();
const cols = s.getSelectedColumns();
s.deleteColumn(cols, cols.length);
},
},
]
},
{
title: 'Find and replace',
disabled: true,
icon: 'find_replace',
onclick: function () {
},
shortcut: 'Ctrl+F',
},
]
},
{
title: 'Insert',
submenu: [
{
title: 'Rows',
icon: 'table_rows',
submenu: [
{
title: 'Add a new line before',
onclick: function () {
const s = getActive();
const [{ x, y }] = s.getSelected();
if (s) {
s.insertRow(1, y, true);
}
},
},
{
title: ('Add a new line after'),
onclick: function () {
const s = getActive();
const [{ x, y }] = s.getSelected();
if (s) {
s.insertRow(1, y, false);
}
},
}
],
},
{
title: 'Columns',
icon: 'view_column',
submenu: [
{
title: 'Add a new column before',
onclick: function () {
const s = getActive();
const [{ x, y }] = s.getSelected();
if (s) {
s.insertColumn(1, x, true);
}
},
},
{
title: 'Add a new column after',
onclick: function () {
const s = getActive();
const [{ x, y }] = s.getSelected();
if (s) {
s.insertColumn(1, x, false);
}
},
}
],
},
{
title: 'Create a new worksheet',
onclick: function () {
jspreadsheet.current.createWorksheet();
},
},
{
type: 'line'
},
{
title: 'Add chart',
icon: 'addchart',
disabled: true,
onclick: function () {
},
},
{
type: 'line'
},
{
title: 'Link',
disabled: true,
icon: 'link',
onclick: function () {
}
},
{
title: 'Checkbox',
disabled: true,
icon: 'check_box',
onclick: function () {
}
},
{
title: 'Comments',
disabled: true,
icon: 'comment',
onclick: function () {
}
}
]
},
{
title: 'Format',
submenu: [
{
title: 'Format',
icon: '123',
disabled: true,
submenu: [
{
title: 'Text',
onclick: function () {
},
},
{
title: 'Number',
onclick: function () {
}
},
{
title: 'Percentage',
shortcut: '10.00%',
onclick: function () {
}
},
{
title: 'Currency',
shortcut: '$ 10.00',
onclick: function () {
}
},
{
type: 'line'
},
{
title: 'Date',
shortcut: '25/07/1998',
onclick: function () {
}
},
{
title: 'Hour',
shortcut: '12:59:59',
onclick: function () {
}
},
{
title: 'Date and hour',
shortcut: '25/07/1998 12:59:59',
onclick: function () {
}
},
{
type: 'line'
},
{
title: 'Custom',
onclick: function () {
}
},
]
},
{
title: 'Text',
icon: 'format_bold',
submenu: [
{
title: 'Bold',
onclick: function () {
setStyleForSelected('font-weight', 'bold')
}
},
{
title: 'Italic',
onclick: function () {
setStyleForSelected('font-style', 'italic')
}
},
{
title: 'Underline',
onclick: function () {
setStyleForSelected('text-decoration', 'underline')
}
},
{
title: 'Line through',
onclick: function () {
setStyleForSelected('text-decoration', 'line-through')
}
}
]
},
{
title: 'Rotate',
submenu: [
{
title: '+90deg',
icon: 'text_rotate_up',
onclick: function () {
const s = getActive();
const selected = s.getSelected();
for (let i = 0; i < selected.length; i++) {
const { x, y } = selected[i];
const cellName = s.helpers.getCellNameFromCoords(x, y);
s.rotate(cellName, 90);
}
}
},
{
title: '+45deg',
icon: 'text_rotation_angleup',
onclick: function () {
const s = getActive();
const selected = s.getSelected();
for (let i = 0; i < selected.length; i++) {
const { x, y } = selected[i];
const cellName = s.helpers.getCellNameFromCoords(x, y);
s.rotate(cellName, 45);
}
}
},
{
title: '0deg',
icon: 'text_rotation_none',
onclick: function () {
const s = getActive();
const selected = s.getSelected();
for (let i = 0; i < selected.length; i++) {
const { x, y } = selected[i];
const cellName = s.helpers.getCellNameFromCoords(x, y);
s.rotate(cellName, 0);
}
}
},
{
title: '-45deg',
icon: 'text_rotation_angledown',
onclick: function () {
const s = getActive();
const selected = s.getSelected();
for (let i = 0; i < selected.length; i++) {
const { x, y } = selected[i];
const cellName = s.helpers.getCellNameFromCoords(x, y);
s.rotate(cellName, -45);
}
}
},
{
title: '-90deg',
icon: 'text_rotation_down',
onclick: function () {
const s = getActive();
const selected = s.getSelected();
for (let i = 0; i < selected.length; i++) {
const { x, y } = selected[i];
const cellName = s.helpers.getCellNameFromCoords(x, y);
s.rotate(cellName, -90);
}
}
},
]
},
{
type: 'line'
},
{
title: 'Font size',
icon: 'format_size',
submenu: [
{
title: '6',
onclick: function () {
setStyleForSelected('font-size', '6px')
}
},
{
title: '7',
onclick: function () {
setStyleForSelected('font-size', '7px')
}
},
{
title: '8',
onclick: function () {
setStyleForSelected('font-size', '8px')
}
},
{
title: '9',
onclick: function () {
setStyleForSelected('font-size', '9px')
}
},
{
title: '10',
onclick: function () {
setStyleForSelected('font-size', '10px')
},
},
{
title: '11',
onclick: function () {
setStyleForSelected('font-size', '11px')
}
},
{
title: '12',
onclick: function () {
setStyleForSelected('font-size', '12px')
}
},
{
title: '14',
onclick: function () {
setStyleForSelected('font-size', '14px')
}
},
{
title: '16',
onclick: function () {
setStyleForSelected('font-size', '16px')
},
},
{
title: '18',
onclick: function () {
setStyleForSelected('font-size', '18px')
}
},
{
title: '24',
onclick: function () {
setStyleForSelected('font-size', '24px')
}
},
{
title: '36',
onclick: function () {
setStyleForSelected('font-size', '36px')
}
},
]
},
{
type: 'line'
},
{
title: 'Alternate colors',
disabled: true,
icon: 'opacity',
submenu: [
{
title: 'Add',
onclick: function () {
}
},
{
title: 'Remove',
onclick: function () {
}
}
],
},
{
title: 'Remove all format',
icon: 'format_clear',
onclick: function () {
const s = getActive();
const selected = s.getSelected();
for (let i = 0; i < selected.length; i++) {
const { x, y } = selected[i];
const cellName = s.helpers.getCellNameFromCoords(x, y);
s.resetStyle(cellName)
}
},
shortcut: 'Ctrl+\\'
},
]
},
{
title: 'Data',
submenu: [
{
title: 'Sorting',
submenu: [
{
title: 'Sorting column from A to Z',
onclick: function () {
const s = getActive();
const selected = s.getSelectedColumns();
for (let i = 0; i < selected.length; i++) {
s.orderBy(selected[i], true);
}
},
},
{
title: 'Sorting column from Z to A',
onclick: function () {
const s = getActive();
const selected = s.getSelectedColumns();
for (let i = 0; i < selected.length; i++) {
s.orderBy(selected[i], false);
}
},
},
],
},
{
title: 'Toggle filters',
icon: 'filter_alt',
onclick: function (a, b, c) {
const s = getActive();
const selected = s.getSelectedColumns();
if (selected[0]) {
s.showFilter(selected[0]);
}
}
},
{
title: 'Data validations',
icon: 'grading',
disabled: true,
onclick: function () {
}
}
]
},
{
title: 'Tools',
submenu: [
{
title: 'Create forms',
icon: 'post_add',
disabled: true,
onclick: function () {
},
},
]
},
{
title: 'Help',
disabled: true,
submenu: [
{
title: 'Rename',
icon: 'edit',
onclick: function () {
},
},
{
type: 'line'
},
{
title: 'Privacy Police',
icon: 'article',
onclick: function () {
},
},
{
title: 'Terms and conditions',
icon: 'article',
onclick: function () {
},
},
{
type: 'line'
},
{
title: 'Function list',
icon: 'functions',
onclick: function () {
}
}
]
}
]
// Create the spreadsheet
const spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {
topmenu: options,
toolbar: true,
worksheets: [{
data: [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
],
minDimensions: [6, 6],
}]
});
</script>
</html>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NmMwN2M1ZjUwNmUyMTQwYmQ1ZTgwZTA1MmUxOTQ1YzRkYzgwZmJjMjYzNzNkYTEzNGE0MmVlMWM3MzA1OGI1ZTgzY2U1ZmMxYmEzZmIxZTdhNTIwZTA2M2Q2ZTBiNWQ2ZWE2YzAwM2IxMGE0NTAyOTczM2FkYWQ2OGQ4YjRhYmQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpZeU16SXhNVFUxTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
export default function App() {
// Spreadsheet array of worksheets
const spreadsheet = useRef();
const getActive = function () {
if (jspreadsheet.current) {
return jspreadsheet.current;
}
}
const setStyleForSelected = function (style, value) {
const s = getActive();
const selected = s.getSelected();
for (let i = 0; i < selected.length; i++) {
const { x, y } = selected[i];
const cellName = s.helpers.getCellNameFromCoords(x, y);
s.setStyle(cellName, style, value);
}
}
const options = [
{
title: 'File',
submenu: [
{
title: 'New Spreadsheet',
disabled: true,
icon: 'add_box',
onclick: function () {
}
},
{
title: 'Open',
icon: 'folder',
disabled: true,
onclick: function () {
},
},
{
type: 'line'
},
{
title: 'Share',
disabled: true,
icon: 'share',
onclick: function () {
},
},
{
title: 'Download',
icon: 'file_download',
submenu: [
{
title: 'Microsoft Excel',
onclick: function () {
let s = getActive();
if (s) {
s.download();
}
},
},
{
title: 'CSV',
onclick: function () {
let s = getActive();
if (s) {
s.downloadCSV(false, true, ",");
}
},
},
{
title: 'TSV',
onclick: function () {
let s = getActive();
if (s) {
s.downloadCSV(false, true, "\t");
}
},
},
]
},
{
title: 'Print',
icon: 'print',
onclick: function () {
getActive(self).parent.tools.exportPdf(true);
},
},
{
type: 'line'
},
{
title: 'Rename',
disabled: true,
icon: 'drive_file_rename_outline',
onclick: function () {
},
},
{
title: 'Move to trash',
disabled: true,
icon: 'delete',
onclick: function () {
},
},
{
type: 'line'
},
{
title: 'History',
disabled: true,
icon: 'history',
onclick: function () {
},
restricted: true,
}
]
},
{
title: 'Edit',
submenu: [
{
title: 'Undo',
icon: 'undo',
onclick: function () {
const s = getActive();
if (s) {
s.undo()
}
},
shortcut: 'Ctrl+Z',
},
{
title: 'Redo',
icon: 'redo',
onclick: function () {
const s = getActive();
if (s) {
s.redo()
}
},
shortcut: 'Ctrl+Y',
},
{
type: 'line'
},
{
title: 'Cut',
icon: 'content_cut',
onclick: function () {
const s = getActive();
if (s) {
s.cut()
}
},
shortcut: 'Ctrl+X',
},
{
title: ('Copy'),
icon: 'content_copy',
onclick: function () {
const s = getActive();
if (s) {
s.copy()
}
},
shortcut: 'Ctrl+C',
},
{
title: ('Paste'),
icon: 'content_paste',
onclick: function () {
navigator.clipboard.readText().then(data => {
const s = getActive();
if (s) {
const [{ x, y }] = s.getSelected();
s.paste(x, y, data)
}
})
},
shortcut: 'Ctrl+V',
},
{
type: 'line'
},
{
title: 'Delete',
icon: 'delete',
submenu: [
{
title: 'Selected rows',
onclick: function () {
const s = getActive();
const rows = s.getSelectedRows();
s.deleteRow(rows, rows.length);
},
},
{
title: 'Selected columns',
onclick: function () {
const s = getActive();
const cols = s.getSelectedColumns();
s.deleteColumn(cols, cols.length);
},
},
]
},
{
title: 'Find and replace',
disabled: true,
icon: 'find_replace',
onclick: function () {
},
shortcut: 'Ctrl+F',
},
]
},
{
title: 'Insert',
submenu: [
{
title: 'Rows',
icon: 'table_rows',
submenu: [
{
title: 'Add a new line before',
onclick: function () {
const s = getActive();
const [{ x, y }] = s.getSelected();
if (s) {
s.insertRow(1, y, true);
}
},
},
{
title: ('Add a new line after'),
onclick: function () {
const s = getActive();
const [{ x, y }] = s.getSelected();
if (s) {
s.insertRow(1, y, false);
}
},
}
],
},
{
title: 'Columns',
icon: 'view_column',
submenu: [
{
title: 'Add a new column before',
onclick: function () {
const s = getActive();
const [{ x, y }] = s.getSelected();
if (s) {
s.insertColumn(1, x, true);
}
},
},
{
title: 'Add a new column after',
onclick: function () {
const s = getActive();
const [{ x, y }] = s.getSelected();
if (s) {
s.insertColumn(1, x, false);
}
},
}
],
},
{
title: 'Create a new worksheet',
onclick: function () {
jspreadsheet.current.createWorksheet();
},
},
{
type: 'line'
},
{
title: 'Add chart',
icon: 'addchart',
disabled: true,
onclick: function () {
},
},
{
type: 'line'
},
{
title: 'Link',
disabled: true,
icon: 'link',
onclick: function () {
}
},
{
title: 'Checkbox',
disabled: true,
icon: 'check_box',
onclick: function () {
}
},
{
title: 'Comments',
disabled: true,
icon: 'comment',
onclick: function () {
}
}
]
},
{
title: 'Format',
submenu: [
{
title: 'Format',
icon: '123',
disabled: true,
submenu: [
{
title: 'Text',
onclick: function () {
},
},
{
title: 'Number',
onclick: function () {
}
},
{
title: 'Percentage',
shortcut: '10.00%',
onclick: function () {
}
},
{
title: 'Currency',
shortcut: '$ 10.00',
onclick: function () {
}
},
{
type: 'line'
},
{
title: 'Date',
shortcut: '25/07/1998',
onclick: function () {
}
},
{
title: 'Hour',
shortcut: '12:59:59',
onclick: function () {
}
},
{
title: 'Date and hour',
shortcut: '25/07/1998 12:59:59',
onclick: function () {
}
},
{
type: 'line'
},
{
title: 'Custom',
onclick: function () {
}
},
]
},
{
title: 'Text',
icon: 'format_bold',
submenu: [
{
title: 'Bold',
onclick: function () {
setStyleForSelected('font-weight', 'bold')
}
},
{
title: 'Italic',
onclick: function () {
setStyleForSelected('font-style', 'italic')
}
},
{
title: 'Underline',
onclick: function () {
setStyleForSelected('text-decoration', 'underline')
}
},
{
title: 'Line through',
onclick: function () {
setStyleForSelected('text-decoration', 'line-through')
}
}
]
},
{
title: 'Rotate',
submenu: [
{
title: '+90deg',
icon: 'text_rotate_up',
onclick: function () {
const s = getActive();
const selected = s.getSelected();
for (let i = 0; i < selected.length; i++) {
const { x, y } = selected[i];
const cellName = s.helpers.getCellNameFromCoords(x, y);
s.rotate(cellName, 90);
}
}
},
{
title: '+45deg',
icon: 'text_rotation_angleup',
onclick: function () {
const s = getActive();
const selected = s.getSelected();
for (let i = 0; i < selected.length; i++) {
const { x, y } = selected[i];
const cellName = s.helpers.getCellNameFromCoords(x, y);
s.rotate(cellName, 45);
}
}
},
{
title: '0deg',
icon: 'text_rotation_none',
onclick: function () {
const s = getActive();
const selected = s.getSelected();
for (let i = 0; i < selected.length; i++) {
const { x, y } = selected[i];
const cellName = s.helpers.getCellNameFromCoords(x, y);
s.rotate(cellName, 0);
}
}
},
{
title: '-45deg',
icon: 'text_rotation_angledown',
onclick: function () {
const s = getActive();
const selected = s.getSelected();
for (let i = 0; i < selected.length; i++) {
const { x, y } = selected[i];
const cellName = s.helpers.getCellNameFromCoords(x, y);
s.rotate(cellName, -45);
}
}
},
{
title: '-90deg',
icon: 'text_rotation_down',
onclick: function () {
const s = getActive();
const selected = s.getSelected();
for (let i = 0; i < selected.length; i++) {
const { x, y } = selected[i];
const cellName = s.helpers.getCellNameFromCoords(x, y);
s.rotate(cellName, -90);
}
}
},
]
},
{
type: 'line'
},
{
title: 'Font size',
icon: 'format_size',
submenu: [
{
title: '6',
onclick: function () {
setStyleForSelected('font-size', '6px')
}
},
{
title: '7',
onclick: function () {
setStyleForSelected('font-size', '7px')
}
},
{
title: '8',
onclick: function () {
setStyleForSelected('font-size', '8px')
}
},
{
title: '9',
onclick: function () {
setStyleForSelected('font-size', '9px')
}
},
{
title: '10',
onclick: function () {
setStyleForSelected('font-size', '10px')
},
},
{
title: '11',
onclick: function () {
setStyleForSelected('font-size', '11px')
}
},
{
title: '12',
onclick: function () {
setStyleForSelected('font-size', '12px')
}
},
{
title: '14',
onclick: function () {
setStyleForSelected('font-size', '14px')
}
},
{
title: '16',
onclick: function () {
setStyleForSelected('font-size', '16px')
},
},
{
title: '18',
onclick: function () {
setStyleForSelected('font-size', '18px')
}
},
{
title: '24',
onclick: function () {
setStyleForSelected('font-size', '24px')
}
},
{
title: '36',
onclick: function () {
setStyleForSelected('font-size', '36px')
}
},
]
},
{
type: 'line'
},
{
title: 'Alternate colors',
disabled: true,
icon: 'opacity',
submenu: [
{
title: 'Add',
onclick: function () {
}
},
{
title: 'Remove',
onclick: function () {
}
}
],
},
{
title: 'Remove all format',
icon: 'format_clear',
onclick: function () {
const s = getActive();
const selected = s.getSelected();
for (let i = 0; i < selected.length; i++) {
const { x, y } = selected[i];
const cellName = s.helpers.getCellNameFromCoords(x, y);
s.resetStyle(cellName)
}
},
shortcut: 'Ctrl+\\'
},
]
},
{
title: 'Data',
submenu: [
{
title: 'Sorting',
submenu: [
{
title: 'Sorting column from A to Z',
onclick: function () {
const s = getActive();
const selected = s.getSelectedColumns();
for (let i = 0; i < selected.length; i++) {
s.orderBy(selected[i], true);
}
},
},
{
title: 'Sorting column from Z to A',
onclick: function () {
const s = getActive();
const selected = s.getSelectedColumns();
for (let i = 0; i < selected.length; i++) {
s.orderBy(selected[i], false);
}
},
},
],
},
{
title: 'Toggle filters',
icon: 'filter_alt',
onclick: function (a, b, c) {
const s = getActive();
const selected = s.getSelectedColumns();
if (selected[0]) {
s.showFilter(selected[0]);
}
}
},
{
title: 'Data validations',
icon: 'grading',
disabled: true,
onclick: function () {
}
}
]
},
{
title: 'Tools',
submenu: [
{
title: 'Create forms',
icon: 'post_add',
disabled: true,
onclick: function () {
},
},
]
},
{
title: 'Help',
disabled: true,
submenu: [
{
title: 'Rename',
icon: 'edit',
onclick: function () {
},
},
{
type: 'line'
},
{
title: 'Privacy Police',
icon: 'article',
onclick: function () {
},
},
{
title: 'Terms and conditions',
icon: 'article',
onclick: function () {
},
},
{
type: 'line'
},
{
title: 'Function list',
icon: 'functions',
onclick: function () {
}
}
]
}
]
// Render component
return (
<Spreadsheet ref={spreadsheet} topmenu={options} toolbar={true}>
<Worksheet
data={[
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
]}
minDimensions={[6, 6]}
/>
</Spreadsheet>
);
}
<template>
<Spreadsheet ref="spreadsheet" :topmenu="options" :toolbar="true">
<Worksheet
:data="[
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
]"
:minDimensions="[6, 6]"
/>
</Spreadsheet>
</template>
<script>
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NmMwN2M1ZjUwNmUyMTQwYmQ1ZTgwZTA1MmUxOTQ1YzRkYzgwZmJjMjYzNzNkYTEzNGE0MmVlMWM3MzA1OGI1ZTgzY2U1ZmMxYmEzZmIxZTdhNTIwZTA2M2Q2ZTBiNWQ2ZWE2YzAwM2IxMGE0NTAyOTczM2FkYWQ2OGQ4YjRhYmQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpZeU16SXhNVFUxTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
const getActive = function () {
if (jspreadsheet.current) {
return jspreadsheet.current;
}
}
const setStyleForSelected = function (style, value) {
const s = getActive();
const selected = s.getSelected();
for (let i = 0; i < selected.length; i++) {
const { x, y } = selected[i];
const cellName = s.helpers.getCellNameFromCoords(x, y);
s.setStyle(cellName, style, value);
}
}
// Topmenu Options
const options = [
{
title: 'File',
submenu: [
{
title: 'New Spreadsheet',
disabled: true,
icon: 'add_box',
onclick: function () {
}
},
{
title: 'Open',
icon: 'folder',
disabled: true,
onclick: function () {
},
},
{
type: 'line'
},
{
title: 'Share',
disabled: true,
icon: 'share',
onclick: function () {
},
},
{
title: 'Download',
icon: 'file_download',
submenu: [
{
title: 'Microsoft Excel',
onclick: function () {
let s = getActive();
if (s) {
s.download();
}
},
},
{
title: 'CSV',
onclick: function () {
let s = getActive();
if (s) {
s.downloadCSV(false, true, ",");
}
},
},
{
title: 'TSV',
onclick: function () {
let s = getActive();
if (s) {
s.downloadCSV(false, true, "\t");
}
},
},
]
},
{
title: 'Print',
icon: 'print',
onclick: function () {
getActive(self).parent.tools.exportPdf(true);
},
},
{
type: 'line'
},
{
title: 'Rename',
disabled: true,
icon: 'drive_file_rename_outline',
onclick: function () {
},
},
{
title: 'Move to trash',
disabled: true,
icon: 'delete',
onclick: function () {
},
},
{
type: 'line'
},
{
title: 'History',
disabled: true,
icon: 'history',
onclick: function () {
},
restricted: true,
}
]
},
{
title: 'Edit',
submenu: [
{
title: 'Undo',
icon: 'undo',
onclick: function () {
const s = getActive();
if (s) {
s.undo()
}
},
shortcut: 'Ctrl+Z',
},
{
title: 'Redo',
icon: 'redo',
onclick: function () {
const s = getActive();
if (s) {
s.redo()
}
},
shortcut: 'Ctrl+Y',
},
{
type: 'line'
},
{
title: 'Cut',
icon: 'content_cut',
onclick: function () {
const s = getActive();
if (s) {
s.cut()
}
},
shortcut: 'Ctrl+X',
},
{
title: ('Copy'),
icon: 'content_copy',
onclick: function () {
const s = getActive();
if (s) {
s.copy()
}
},
shortcut: 'Ctrl+C',
},
{
title: ('Paste'),
icon: 'content_paste',
onclick: function () {
navigator.clipboard.readText().then(data => {
const s = getActive();
if (s) {
const [{ x, y }] = s.getSelected();
s.paste(x, y, data)
}
})
},
shortcut: 'Ctrl+V',
},
{
type: 'line'
},
{
title: 'Delete',
icon: 'delete',
submenu: [
{
title: 'Selected rows',
onclick: function () {
const s = getActive();
const rows = s.getSelectedRows();
s.deleteRow(rows, rows.length);
},
},
{
title: 'Selected columns',
onclick: function () {
const s = getActive();
const cols = s.getSelectedColumns();
s.deleteColumn(cols, cols.length);
},
},
]
},
{
title: 'Find and replace',
disabled: true,
icon: 'find_replace',
onclick: function () {
},
shortcut: 'Ctrl+F',
},
]
},
{
title: 'Insert',
submenu: [
// {
// title: 'Lines',
// submenu: [
// {
// type: 'inline',
// render: function (e) {
// studio.Color(e, this);
// }
// },
// {
// title: 'Add a new line before',
// onclick: function () {
// },
// },
// {
// title: ('Add a new line after'),
// onclick: function () {
// },
// }
// ],
// },
{
title: 'Rows',
icon: 'table_rows',
submenu: [
{
title: 'Add a new line before',
onclick: function () {
const s = getActive();
const [{ x, y }] = s.getSelected();
if (s) {
s.insertRow(1, y, true);
}
},
},
{
title: ('Add a new line after'),
onclick: function () {
const s = getActive();
const [{ x, y }] = s.getSelected();
if (s) {
s.insertRow(1, y, false);
}
},
}
],
},
{
title: 'Columns',
icon: 'view_column',
submenu: [
{
title: 'Add a new column before',
onclick: function () {
const s = getActive();
const [{ x, y }] = s.getSelected();
if (s) {
s.insertColumn(1, x, true);
}
},
},
{
title: 'Add a new column after',
onclick: function () {
const s = getActive();
const [{ x, y }] = s.getSelected();
if (s) {
s.insertColumn(1, x, false);
}
},
}
],
},
{
title: 'Create a new worksheet',
onclick: function () {
jspreadsheet.current.createWorksheet();
},
},
{
type: 'line'
},
{
title: 'Add chart',
icon: 'addchart',
disabled: true,
onclick: function () {
},
},
{
type: 'line'
},
{
title: 'Link',
disabled: true,
icon: 'link',
onclick: function () {
}
},
{
title: 'Checkbox',
disabled: true,
icon: 'check_box',
onclick: function () {
}
},
{
title: 'Comments',
disabled: true,
icon: 'comment',
onclick: function () {
}
}
]
},
{
title: 'Format',
submenu: [
{
title: 'Format',
icon: '123',
disabled: true,
submenu: [
{
title: 'Text',
onclick: function () {
},
},
{
title: 'Number',
onclick: function () {
}
},
{
title: 'Percentage',
shortcut: '10.00%',
onclick: function () {
}
},
{
title: 'Currency',
shortcut: '$ 10.00',
onclick: function () {
}
},
{
type: 'line'
},
{
title: 'Date',
shortcut: '25/07/1998',
onclick: function () {
}
},
{
title: 'Hour',
shortcut: '12:59:59',
onclick: function () {
}
},
{
title: 'Date and hour',
shortcut: '25/07/1998 12:59:59',
onclick: function () {
}
},
{
type: 'line'
},
{
title: 'Custom',
onclick: function () {
}
},
]
},
{
title: 'Text',
icon: 'format_bold',
submenu: [
{
title: 'Bold',
onclick: function () {
setStyleForSelected('font-weight', 'bold')
}
},
{
title: 'Italic',
onclick: function () {
setStyleForSelected('font-style', 'italic')
}
},
{
title: 'Underline',
onclick: function () {
setStyleForSelected('text-decoration', 'underline')
}
},
{
title: 'Line through',
onclick: function () {
setStyleForSelected('text-decoration', 'line-through')
}
}
]
},
{
title: 'Rotate',
submenu: [
{
title: '+90deg',
icon: 'text_rotate_up',
onclick: function () {
const s = getActive();
const selected = s.getSelected();
for (let i = 0; i < selected.length; i++) {
const { x, y } = selected[i];
const cellName = s.helpers.getCellNameFromCoords(x, y);
s.rotate(cellName, 90);
}
}
},
{
title: '+45deg',
icon: 'text_rotation_angleup',
onclick: function () {
const s = getActive();
const selected = s.getSelected();
for (let i = 0; i < selected.length; i++) {
const { x, y } = selected[i];
const cellName = s.helpers.getCellNameFromCoords(x, y);
s.rotate(cellName, 45);
}
}
},
{
title: '0deg',
icon: 'text_rotation_none',
onclick: function () {
const s = getActive();
const selected = s.getSelected();
for (let i = 0; i < selected.length; i++) {
const { x, y } = selected[i];
const cellName = s.helpers.getCellNameFromCoords(x, y);
s.rotate(cellName, 0);
}
}
},
{
title: '-45deg',
icon: 'text_rotation_angledown',
onclick: function () {
const s = getActive();
const selected = s.getSelected();
for (let i = 0; i < selected.length; i++) {
const { x, y } = selected[i];
const cellName = s.helpers.getCellNameFromCoords(x, y);
s.rotate(cellName, -45);
}
}
},
{
title: '-90deg',
icon: 'text_rotation_down',
onclick: function () {
const s = getActive();
const selected = s.getSelected();
for (let i = 0; i < selected.length; i++) {
const { x, y } = selected[i];
const cellName = s.helpers.getCellNameFromCoords(x, y);
s.rotate(cellName, -90);
}
}
},
]
},
{
type: 'line'
},
{
title: 'Font size',
icon: 'format_size',
submenu: [
{
title: '6',
onclick: function () {
setStyleForSelected('font-size', '6px')
}
},
{
title: '7',
onclick: function () {
setStyleForSelected('font-size', '7px')
}
},
{
title: '8',
onclick: function () {
setStyleForSelected('font-size', '8px')
}
},
{
title: '9',
onclick: function () {
setStyleForSelected('font-size', '9px')
}
},
{
title: '10',
onclick: function () {
setStyleForSelected('font-size', '10px')
},
},
{
title: '11',
onclick: function () {
setStyleForSelected('font-size', '11px')
}
},
{
title: '12',
onclick: function () {
setStyleForSelected('font-size', '12px')
}
},
{
title: '14',
onclick: function () {
setStyleForSelected('font-size', '14px')
}
},
{
title: '16',
onclick: function () {
setStyleForSelected('font-size', '16px')
},
},
{
title: '18',
onclick: function () {
setStyleForSelected('font-size', '18px')
}
},
{
title: '24',
onclick: function () {
setStyleForSelected('font-size', '24px')
}
},
{
title: '36',
onclick: function () {
setStyleForSelected('font-size', '36px')
}
},
]
},
{
type: 'line'
},
{
title: 'Alternate colors',
disabled: true,
icon: 'opacity',
submenu: [
{
title: 'Add',
onclick: function () {
}
},
{
title: 'Remove',
onclick: function () {
}
}
],
},
{
title: 'Remove all format',
icon: 'format_clear',
onclick: function () {
const s = getActive();
const selected = s.getSelected();
for (let i = 0; i < selected.length; i++) {
const { x, y } = selected[i];
const cellName = s.helpers.getCellNameFromCoords(x, y);
s.resetStyle(cellName)
}
},
shortcut: 'Ctrl+\\'
},
]
},
{
title: 'Data',
submenu: [
{
title: 'Sorting',
submenu: [
{
title: 'Sorting column from A to Z',
onclick: function () {
const s = getActive();
const selected = s.getSelectedColumns();
for (let i = 0; i < selected.length; i++) {
s.orderBy(selected[i], true);
}
},
},
{
title: 'Sorting column from Z to A',
onclick: function () {
const s = getActive();
const selected = s.getSelectedColumns();
for (let i = 0; i < selected.length; i++) {
s.orderBy(selected[i], false);
}
},
},
],
},
{
title: 'Toggle filters',
icon: 'filter_alt',
onclick: function (a, b, c) {
const s = getActive();
const selected = s.getSelectedColumns();
if (selected[0]) {
s.showFilter(selected[0]);
}
}
},
{
title: 'Data validations',
icon: 'grading',
disabled: true,
onclick: function () {
}
}
]
},
{
title: 'Tools',
submenu: [
{
title: 'Create forms',
icon: 'post_add',
disabled: true,
onclick: function () {
},
},
]
},
{
title: 'Help',
disabled: true,
submenu: [
{
title: 'Rename',
icon: 'edit',
onclick: function () {
},
},
{
type: 'line'
},
{
title: 'Privacy Police',
icon: 'article',
onclick: function () {
},
},
{
title: 'Terms and conditions',
icon: 'article',
onclick: function () {
},
},
{
type: 'line'
},
{
title: 'Function list',
icon: 'functions',
onclick: function () {
}
}
]
}
]
export default {
components: {
Spreadsheet,
Worksheet,
},
setup() {
// Return object
return {
options
};
}
}
</script>
import { Component, ViewChild, ElementRef, AfterViewInit } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NmMwN2M1ZjUwNmUyMTQwYmQ1ZTgwZTA1MmUxOTQ1YzRkYzgwZmJjMjYzNzNkYTEzNGE0MmVlMWM3MzA1OGI1ZTgzY2U1ZmMxYmEzZmIxZTdhNTIwZTA2M2Q2ZTBiNWQ2ZWE2YzAwM2IxMGE0NTAyOTczM2FkYWQ2OGQ4YjRhYmQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpZeU16SXhNVFUxTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
const getActive = function () {
if (jspreadsheet.current) {
return jspreadsheet.current;
}
}
const setStyleForSelected = function (style, value) {
const s = getActive();
const selected = s.getSelected();
for (let i = 0; i < selected.length; i++) {
const { x, y } = selected[i];
const cellName = s.helpers.getCellNameFromCoords(x, y);
s.setStyle(cellName, style, value);
}
}
const options = [
{
title: 'File',
submenu: [
{
title: 'New Spreadsheet',
disabled: true,
icon: 'add_box',
onclick: function () {
}
},
{
title: 'Open',
icon: 'folder',
disabled: true,
onclick: function () {
},
},
{
type: 'line'
},
{
title: 'Share',
disabled: true,
icon: 'share',
onclick: function () {
},
},
{
title: 'Download',
icon: 'file_download',
submenu: [
{
title: 'Microsoft Excel',
onclick: function () {
let s = getActive();
if (s) {
s.download();
}
},
},
{
title: 'CSV',
onclick: function () {
let s = getActive();
if (s) {
s.downloadCSV(false, true, ",");
}
},
},
{
title: 'TSV',
onclick: function () {
let s = getActive();
if (s) {
s.downloadCSV(false, true, "\t");
}
},
},
]
},
{
title: 'Print',
icon: 'print',
onclick: function () {
getActive(self).parent.tools.exportPdf(true);
},
},
{
type: 'line'
},
{
title: 'Rename',
disabled: true,
icon: 'drive_file_rename_outline',
onclick: function () {
},
},
{
title: 'Move to trash',
disabled: true,
icon: 'delete',
onclick: function () {
},
},
{
type: 'line'
},
{
title: 'History',
disabled: true,
icon: 'history',
onclick: function () {
},
restricted: true,
}
]
},
{
title: 'Edit',
submenu: [
{
title: 'Undo',
icon: 'undo',
onclick: function () {
const s = getActive();
if (s) {
s.undo()
}
},
shortcut: 'Ctrl+Z',
},
{
title: 'Redo',
icon: 'redo',
onclick: function () {
const s = getActive();
if (s) {
s.redo()
}
},
shortcut: 'Ctrl+Y',
},
{
type: 'line'
},
{
title: 'Cut',
icon: 'content_cut',
onclick: function () {
const s = getActive();
if (s) {
s.cut()
}
},
shortcut: 'Ctrl+X',
},
{
title: ('Copy'),
icon: 'content_copy',
onclick: function () {
const s = getActive();
if (s) {
s.copy()
}
},
shortcut: 'Ctrl+C',
},
{
title: ('Paste'),
icon: 'content_paste',
onclick: function () {
navigator.clipboard.readText().then(data => {
const s = getActive();
if (s) {
const [{ x, y }] = s.getSelected();
s.paste(x, y, data)
}
})
},
shortcut: 'Ctrl+V',
},
{
type: 'line'
},
{
title: 'Delete',
icon: 'delete',
submenu: [
{
title: 'Selected rows',
onclick: function () {
const s = getActive();
const rows = s.getSelectedRows();
s.deleteRow(rows, rows.length);
},
},
{
title: 'Selected columns',
onclick: function () {
const s = getActive();
const cols = s.getSelectedColumns();
s.deleteColumn(cols, cols.length);
},
},
]
},
{
title: 'Find and replace',
disabled: true,
icon: 'find_replace',
onclick: function () {
},
shortcut: 'Ctrl+F',
},
]
},
{
title: 'Insert',
submenu: [
// {
// title: 'Lines',
// submenu: [
// {
// type: 'inline',
// render: function (e) {
// studio.Color(e, this);
// }
// },
// {
// title: 'Add a new line before',
// onclick: function () {
// },
// },
// {
// title: ('Add a new line after'),
// onclick: function () {
// },
// }
// ],
// },
{
title: 'Rows',
icon: 'table_rows',
submenu: [
{
title: 'Add a new line before',
onclick: function () {
const s = getActive();
const [{ x, y }] = s.getSelected();
if (s) {
s.insertRow(1, y, true);
}
},
},
{
title: ('Add a new line after'),
onclick: function () {
const s = getActive();
const [{ x, y }] = s.getSelected();
if (s) {
s.insertRow(1, y, false);
}
},
}
],
},
{
title: 'Columns',
icon: 'view_column',
submenu: [
{
title: 'Add a new column before',
onclick: function () {
const s = getActive();
const [{ x, y }] = s.getSelected();
if (s) {
s.insertColumn(1, x, true);
}
},
},
{
title: 'Add a new column after',
onclick: function () {
const s = getActive();
const [{ x, y }] = s.getSelected();
if (s) {
s.insertColumn(1, x, false);
}
},
}
],
},
{
title: 'Create a new worksheet',
onclick: function () {
jspreadsheet.current.createWorksheet();
},
},
{
type: 'line'
},
{
title: 'Add chart',
icon: 'addchart',
disabled: true,
onclick: function () {
},
},
{
type: 'line'
},
{
title: 'Link',
disabled: true,
icon: 'link',
onclick: function () {
}
},
{
title: 'Checkbox',
disabled: true,
icon: 'check_box',
onclick: function () {
}
},
{
title: 'Comments',
disabled: true,
icon: 'comment',
onclick: function () {
}
}
]
},
{
title: 'Format',
submenu: [
{
title: 'Format',
icon: '123',
disabled: true,
submenu: [
{
title: 'Text',
onclick: function () {
},
},
{
title: 'Number',
onclick: function () {
}
},
{
title: 'Percentage',
shortcut: '10.00%',
onclick: function () {
}
},
{
title: 'Currency',
shortcut: '$ 10.00',
onclick: function () {
}
},
{
type: 'line'
},
{
title: 'Date',
shortcut: '25/07/1998',
onclick: function () {
}
},
{
title: 'Hour',
shortcut: '12:59:59',
onclick: function () {
}
},
{
title: 'Date and hour',
shortcut: '25/07/1998 12:59:59',
onclick: function () {
}
},
{
type: 'line'
},
{
title: 'Custom',
onclick: function () {
}
},
]
},
{
title: 'Text',
icon: 'format_bold',
submenu: [
{
title: 'Bold',
onclick: function () {
setStyleForSelected('font-weight', 'bold')
}
},
{
title: 'Italic',
onclick: function () {
setStyleForSelected('font-style', 'italic')
}
},
{
title: 'Underline',
onclick: function () {
setStyleForSelected('text-decoration', 'underline')
}
},
{
title: 'Line through',
onclick: function () {
setStyleForSelected('text-decoration', 'line-through')
}
}
]
},
{
title: 'Rotate',
submenu: [
{
title: '+90deg',
icon: 'text_rotate_up',
onclick: function () {
const s = getActive();
const selected = s.getSelected();
for (let i = 0; i < selected.length; i++) {
const { x, y } = selected[i];
const cellName = s.helpers.getCellNameFromCoords(x, y);
s.rotate(cellName, 90);
}
}
},
{
title: '+45deg',
icon: 'text_rotation_angleup',
onclick: function () {
const s = getActive();
const selected = s.getSelected();
for (let i = 0; i < selected.length; i++) {
const { x, y } = selected[i];
const cellName = s.helpers.getCellNameFromCoords(x, y);
s.rotate(cellName, 45);
}
}
},
{
title: '0deg',
icon: 'text_rotation_none',
onclick: function () {
const s = getActive();
const selected = s.getSelected();
for (let i = 0; i < selected.length; i++) {
const { x, y } = selected[i];
const cellName = s.helpers.getCellNameFromCoords(x, y);
s.rotate(cellName, 0);
}
}
},
{
title: '-45deg',
icon: 'text_rotation_angledown',
onclick: function () {
const s = getActive();
const selected = s.getSelected();
for (let i = 0; i < selected.length; i++) {
const { x, y } = selected[i];
const cellName = s.helpers.getCellNameFromCoords(x, y);
s.rotate(cellName, -45);
}
}
},
{
title: '-90deg',
icon: 'text_rotation_down',
onclick: function () {
const s = getActive();
const selected = s.getSelected();
for (let i = 0; i < selected.length; i++) {
const { x, y } = selected[i];
const cellName = s.helpers.getCellNameFromCoords(x, y);
s.rotate(cellName, -90);
}
}
},
]
},
{
type: 'line'
},
{
title: 'Font size',
icon: 'format_size',
submenu: [
{
title: '6',
onclick: function () {
setStyleForSelected('font-size', '6px')
}
},
{
title: '7',
onclick: function () {
setStyleForSelected('font-size', '7px')
}
},
{
title: '8',
onclick: function () {
setStyleForSelected('font-size', '8px')
}
},
{
title: '9',
onclick: function () {
setStyleForSelected('font-size', '9px')
}
},
{
title: '10',
onclick: function () {
setStyleForSelected('font-size', '10px')
},
},
{
title: '11',
onclick: function () {
setStyleForSelected('font-size', '11px')
}
},
{
title: '12',
onclick: function () {
setStyleForSelected('font-size', '12px')
}
},
{
title: '14',
onclick: function () {
setStyleForSelected('font-size', '14px')
}
},
{
title: '16',
onclick: function () {
setStyleForSelected('font-size', '16px')
},
},
{
title: '18',
onclick: function () {
setStyleForSelected('font-size', '18px')
}
},
{
title: '24',
onclick: function () {
setStyleForSelected('font-size', '24px')
}
},
{
title: '36',
onclick: function () {
setStyleForSelected('font-size', '36px')
}
},
]
},
{
type: 'line'
},
{
title: 'Alternate colors',
disabled: true,
icon: 'opacity',
submenu: [
{
title: 'Add',
onclick: function () {
}
},
{
title: 'Remove',
onclick: function () {
}
}
],
},
{
title: 'Remove all format',
icon: 'format_clear',
onclick: function () {
const s = getActive();
const selected = s.getSelected();
for (let i = 0; i < selected.length; i++) {
const { x, y } = selected[i];
const cellName = s.helpers.getCellNameFromCoords(x, y);
s.resetStyle(cellName)
}
},
shortcut: 'Ctrl+\\'
},
]
},
{
title: 'Data',
submenu: [
{
title: 'Sorting',
submenu: [
{
title: 'Sorting column from A to Z',
onclick: function () {
const s = getActive();
const selected = s.getSelectedColumns();
for (let i = 0; i < selected.length; i++) {
s.orderBy(selected[i], true);
}
},
},
{
title: 'Sorting column from Z to A',
onclick: function () {
const s = getActive();
const selected = s.getSelectedColumns();
for (let i = 0; i < selected.length; i++) {
s.orderBy(selected[i], false);
}
},
},
],
},
{
title: 'Toggle filters',
icon: 'filter_alt',
onclick: function (a, b, c) {
const s = getActive();
const selected = s.getSelectedColumns();
if (selected[0]) {
s.showFilter(selected[0]);
}
}
},
{
title: 'Data validations',
icon: 'grading',
disabled: true,
onclick: function () {
}
}
]
},
{
title: 'Tools',
submenu: [
{
title: 'Create forms',
icon: 'post_add',
disabled: true,
onclick: function () {
},
},
]
},
{
title: 'Help',
disabled: true,
submenu: [
{
title: 'Rename',
icon: 'edit',
onclick: function () {
},
},
{
type: 'line'
},
{
title: 'Privacy Police',
icon: 'article',
onclick: function () {
},
},
{
title: 'Terms and conditions',
icon: 'article',
onclick: function () {
},
},
{
type: 'line'
},
{
title: 'Function list',
icon: 'functions',
onclick: function () {
}
}
]
}
]
@Component({
standalone: true,
selector: "app-root",
template: `<div #spreadsheet></div>`
})
export class AppComponent implements AfterViewInit {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
// Create a new data grid
ngAfterViewInit() {
// Create spreadsheet
jspreadsheet(this.spreadsheet.nativeElement, {
topmenu: options,
toolbar: true,
worksheets: [{
data: [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
],
minDimensions: [6, 6]
}]
});
}
}