Worksheets
Jspreadsheet offers the flexibility to customize your spreadsheet with multiple worksheets. You can config JSS to prevent or allow users from manipulating these worksheets by moving, renaming, or deleting them using the context menu. Moreover, you can create programmatic controls and monitor changes made in the spreadsheet through events.
Documentation
Methods
Available methods to interact programmatically with the worksheets.
Property |
Description |
getWorksheet(object|string) |
Get the worksheet position by worksheet object or by the worksheetId.
getWorksheet(worksheetIdent: worksheetInstance | String) => Number |
getWorksheetName(number) |
Get the worksheet name by index.
getWorksheetName(position?: Number) => String |
openWorksheet(number) |
Open the worksheet by index.
openWorksheet(position?: Number) => void |
createWorksheet(object, number) |
Add a new worksheet to the online spreadsheet based on a given configuration.
createWorksheet(worksheetOptions: Object, position?: Number) => worksheetInstance |
deleteWorksheet(number) |
Delete an existing worksheet by index.
deleteWorksheet(position?: Number) => void |
renameWorksheet(number, string) |
Rename an existing worksheet by index.
renameWorksheet(position: Number, title: String) => void |
moveWorksheet(number, number, boolean) |
Move the position of a worksheet.
moveWorksheet(from: Number, to: Number, ignoreDomUpdates?: Boolean) => void |
getWorksheetActive() |
Get the current active worksheet number.
getWorksheetActive() => Number |
getWorksheetInstance(number) |
Get the worksheet instance by index
getWorksheetInstance(position: Number) => worksheetInstance |
Initial Settings
You can use the following settings to configure the spreadsheet and worksheet management behavior.
Property |
Description |
Spreadsheet properties |
|
tabs: boolean|object |
Show tabs and allow the user to create new worksheets. Default: false. |
allowDeleteWorksheet: boolean |
Add a delete worksheet option to the contextMenu. Default: true |
allowRenameWorksheet: boolean |
Add the rename worksheet option to the contextMenu. Default: true |
allowMoveWorksheet: boolean |
Allow worksheet drag and drop options. Default: true |
Worksheet properties |
|
worksheetId: string |
Worksheet identification. Default: randomNumber |
worksheetName: string |
Worksheet title. Default: string + integer. Note: avoid numeric-only worksheet names |
worksheetState: visible | hidden |
Worksheet visibility state. Default: visible |
Events
Available events related to the worksheets.
Event |
Description |
onopenworksheet |
onopenworksheet(worksheet: Object, worksheetNumber: Number) : void |
oncreateworksheet |
oncreateworksheet(worksheet: Object, worksheetOptions: Object, worksheetNumber: Number) : void |
onrenameworksheet |
onrenameworksheet(worksheet: Object, worksheet: Number, value: String, oldValue: String) : void; |
ondeleteworksheet |
ondeleteworksheet(worksheet: Object, oldWorksheetNumber: Number) : void |
onmoveworksheet |
onmoveworksheet(worksheet: Object, newPosition: Number, oldPosition: Number) : void |
Tabs customizations
Additional customizations are allowed using the extended tabs object declaration as example below.
Property |
Description |
allowCreate: boolean |
Show the create new tab button |
allowChangePosition: boolean |
Allow drag and drop of the headers to change the tab position |
animation: boolean |
Allow the header border bottom animation. |
hideHeaders: boolean |
Hide the tab headers if only one tab is present. |
padding: number |
Default padding content |
position: string |
Position of the headers: top | bottom. Default: top |
Example
<div id="spreadsheet"></div>
<script>
jspreadsheet(document.getElementById('spreadsheet'), {
tabs: {
allowCreate: true,
allowChangePosition: true,
animation: true,
position: "bottom",
},
worksheets: [{
minDimensions: [8,8],
}],
});
</script>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
export default function App() {
const spreadsheet = useRef();
const tabs = {
allowCreate: true,
allowChangePosition: true,
animation: true,
position: "bottom",
};
return (
<Spreadsheet ref={spreadsheet} license={license} tabs={tabs}>
<Worksheet minDimensions={[6,6]} />
<Worksheet minDimensions={[6,6]} />
</Spreadsheet>
);
}
<template>
<Spreadsheet ref="spreadsheet" :license="license" :tabs="tabs">
<Worksheet :minDimensions="[8,8]" />
</Spreadsheet>
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
export Grid {
components: {
Spreadsheet,
Worksheet,
},
data() {
return {
license: license,
tabs: {
allowCreate: true,
allowChangePosition: true,
animation: true,
position: "bottom",
}
};
}
}
</script>
jspreadsheet(document.getElementById('spreadsheet'), {
tabs: {
allowCreate: true,
allowChangePosition: true,
animation: true,
position: "bottom",
},
worksheets: [{
minDimensions: [8,8],
}],
});
More information about jSuites.tabs https://jsuites.net/docs/javascript-tabs/quick-reference
Examples
Active worksheet
How to get the active worksheet number on a JSS spreadsheet.
<html>
<script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<div id="spreadsheet"></div>
<br/>
<input type="button" value="Get active worksheet" id="getactivebtn"/>
<input type="button" value="Rename first worksheet" id="renamebtn"/>
<script>
jspreadsheet.setLicense('YWFmMTExYjQ0NDlhMmJmNzBhMjBhOGE2YWY5NzNjNDA4NmI2ZWUxYWQ0NzEwNjEzY2M2ZGY0MWMyMzZjZDhkYzhmMTE3OWExNjY1MDc3NTM1ZDJlZTZmNjU3ZDM1ZTVhMmEwNDBlYmEyZDI4MjhmMWIzZmFmMDYwOWJiODFkNWUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9UazFNVEU0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
let worksheets = jspreadsheet(document.getElementById('spreadsheet'), {
tabs: true,
worksheets: [
{ minDimensions: [6,6] },
{ minDimensions: [6,6] },
],
});
document.getElementById("getactivebtn").onclick = () => alert(worksheets[0].parent.getWorksheetActive());
document.getElementById("renamebtn").onclick = () => worksheets[0].parent.renameWorksheet(0, 'Anything');
</script>
</html>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
const license = 'YWFmMTExYjQ0NDlhMmJmNzBhMjBhOGE2YWY5NzNjNDA4NmI2ZWUxYWQ0NzEwNjEzY2M2ZGY0MWMyMzZjZDhkYzhmMTE3OWExNjY1MDc3NTM1ZDJlZTZmNjU3ZDM1ZTVhMmEwNDBlYmEyZDI4MjhmMWIzZmFmMDYwOWJiODFkNWUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9UazFNVEU0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
export default function App() {
const spreadsheet = useRef();
return (
<>
<Spreadsheet ref={spreadsheet} license={license} tabs>
<Worksheet minDimensions={[6,6]} />
<Worksheet minDimensions={[6,6]} />
</Spreadsheet>
<input type="button" value="Get active worksheet"
onClick={() => alert(spreadsheet.current[0].getWorksheetActive())} />
<input type="button" value="Rename first worksheet"
onClick={() => spreadsheet.current[0].renameWorksheet(0, prompt('New name', 'Sheet 1'))} />
</>
);
}
<template>
<Spreadsheet ref="spreadsheet" :license="license">
<Worksheet :minDimensions="[6,6]" />
<Worksheet :minDimensions="[6,6]" />
</Spreadsheet>
<input type="button" value="Get active worksheet" @click="getWorksheetActive" />
<input type="button" value="Rename first worksheet" @click="renameWorksheet" />
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
const license = 'YWFmMTExYjQ0NDlhMmJmNzBhMjBhOGE2YWY5NzNjNDA4NmI2ZWUxYWQ0NzEwNjEzY2M2ZGY0MWMyMzZjZDhkYzhmMTE3OWExNjY1MDc3NTM1ZDJlZTZmNjU3ZDM1ZTVhMmEwNDBlYmEyZDI4MjhmMWIzZmFmMDYwOWJiODFkNWUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9UazFNVEU0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
export default {
components: {
Spreadsheet,
Worksheet,
},
methods: {
setFreezeRows(number) {
alert(this.$refs.spreadsheet.current[0].getWorksheetActive());
},
resetFreezeRows() {
this.$refs.spreadsheet.current[0].renameWorksheet(0, prompt('New name', 'Sheet 1'));
},
},
data() {
return {
license: license,
};
}
}
</script>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"
jspreadsheet.setLicense('YWFmMTExYjQ0NDlhMmJmNzBhMjBhOGE2YWY5NzNjNDA4NmI2ZWUxYWQ0NzEwNjEzY2M2ZGY0MWMyMzZjZDhkYzhmMTE3OWExNjY1MDc3NTM1ZDJlZTZmNjU3ZDM1ZTVhMmEwNDBlYmEyZDI4MjhmMWIzZmFmMDYwOWJiODFkNWUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9UazFNVEU0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
@Component({
selector: "app-root",
template: `<div #spreadsheet></div>
<input type="button" value="Active worksheet" (click)="triggerAlert()">
<input type="button" value="Rename 1st worksheet" (click)="this.worksheets[0].parent.renameWorksheet(0, 'Anything')">`
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
worksheets: jspreadsheet.worksheetInstance[];
ngAfterViewInit() {
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
tabs: true,
worksheets: [
{ minDimensions: [6,6] },
{ minDimensions: [6,6] },
],
});
}
triggerAlert() {
alert(this.worksheets[0].parent.getWorksheetActive())
}
}
Worksheet events
Create a new worksheet and explore the related events.
|
---|
1 | 1 | DIVINELY UNINSPIRED TO A HELLISH EXTENT | LEWIS CAPALDI |
2 | 2 | NO 6 COLLABORATIONS PROJECT | ED SHEERAN |
3 | 3 | THE GREATEST SHOWMAN | MOTION PICTURE CAST RECORDING |
4 | 4 | WHEN WE ALL FALL ASLEEP WHERE DO WE GO | BILLIE EILISH |
<html>
<script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<div id="spreadsheet"></div>
<script>
jspreadsheet.setLicense('YWFmMTExYjQ0NDlhMmJmNzBhMjBhOGE2YWY5NzNjNDA4NmI2ZWUxYWQ0NzEwNjEzY2M2ZGY0MWMyMzZjZDhkYzhmMTE3OWExNjY1MDc3NTM1ZDJlZTZmNjU3ZDM1ZTVhMmEwNDBlYmEyZDI4MjhmMWIzZmFmMDYwOWJiODFkNWUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9UazFNVEU0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
jspreadsheet(document.getElementById('spreadsheet'), {
tabs: true,
worksheets: [
{
data: [
["1","DIVINELY UNINSPIRED TO A HELLISH EXTENT","LEWIS CAPALDI"],
["2","NO 6 COLLABORATIONS PROJECT","ED SHEERAN"],
["3","THE GREATEST SHOWMAN","MOTION PICTURE CAST RECORDING"],
["4","WHEN WE ALL FALL ASLEEP WHERE DO WE GO","BILLIE EILISH"]
],
columns: [
{ type: 'autonumber', title: 'Id' },
{ type: 'text', width: '350px', title: 'Title' },
{ type: 'text', width: '250px', title: 'Artist' },
],
worksheetName: 'Albums',
}
],
onbeforecreateworksheet: function() {
let options = {
minDimensions: [5,5],
}
return options;
},
onopenworksheet: function(element, instance, worksheetNumber) {
console.log(element, instance, worksheetNumber);
},
});
</script>
</html>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
const license = 'YWFmMTExYjQ0NDlhMmJmNzBhMjBhOGE2YWY5NzNjNDA4NmI2ZWUxYWQ0NzEwNjEzY2M2ZGY0MWMyMzZjZDhkYzhmMTE3OWExNjY1MDc3NTM1ZDJlZTZmNjU3ZDM1ZTVhMmEwNDBlYmEyZDI4MjhmMWIzZmFmMDYwOWJiODFkNWUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9UazFNVEU0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
export default function App() {
const spreadsheet = useRef();
const data = [
["1","DIVINELY UNINSPIRED TO A HELLISH EXTENT","LEWIS CAPALDI"],
["2","NO 6 COLLABORATIONS PROJECT","ED SHEERAN"],
["3","THE GREATEST SHOWMAN","MOTION PICTURE CAST RECORDING"],
["4","WHEN WE ALL FALL ASLEEP WHERE DO WE GO","BILLIE EILISH"]
]
const columns = [
{ type: 'autonumber', title: 'Id' },
{ type: 'text', width: '350px', title: 'Title' },
{ type: 'text', width: '250px', title: 'Artist' },
]
onbeforecreateworksheet = () => {
return {
minDimensions: [5,5],
}
}
onopenworksheet = (element, instance, worksheetNumber) => {
console.log(element, instance, worksheetNumber);
}
return (
<Spreadsheet ref={spreadsheet} license={license} tabs
onbeforecreateworksheet={onbeforecreateworksheet} onopenworksheet={onopenworksheet}>
<Worksheet data={data} columns={columns} worksheetName={"Albums"} />
</Spreadsheet>
);
}
<template>
<Spreadsheet ref="spreadsheet" :license="license" tabs
:onbeforecreateworksheet="onbeforecreateworksheet" :onopenworksheet="onopenworksheet">
<Worksheet :data="data" :columns="columns" worksheetName="Albums" />
</Spreadsheet>
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
const license = 'YWFmMTExYjQ0NDlhMmJmNzBhMjBhOGE2YWY5NzNjNDA4NmI2ZWUxYWQ0NzEwNjEzY2M2ZGY0MWMyMzZjZDhkYzhmMTE3OWExNjY1MDc3NTM1ZDJlZTZmNjU3ZDM1ZTVhMmEwNDBlYmEyZDI4MjhmMWIzZmFmMDYwOWJiODFkNWUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9UazFNVEU0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
export default {
components: {
Spreadsheet,
Worksheet,
},
methods: {
onbeforecreateworksheet() {
return {
minDimensions: [5,5],
}
}
onopenworksheet(element, instance, worksheetNumber) {
console.log(element, instance, worksheetNumber);
}
},
data() {
return {
license: license,
data: [
["1","DIVINELY UNINSPIRED TO A HELLISH EXTENT","LEWIS CAPALDI"],
["2","NO 6 COLLABORATIONS PROJECT","ED SHEERAN"],
["3","THE GREATEST SHOWMAN","MOTION PICTURE CAST RECORDING"],
["4","WHEN WE ALL FALL ASLEEP WHERE DO WE GO","BILLIE EILISH"]
],
columns: [
{ type: 'autonumber', title: 'Id' },
{ type: 'text', width: '350px', title: 'Title' },
{ type: 'text', width: '250px', title: 'Artist' },
],
};
}
}
</script>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"
jspreadsheet.setLicense('YWFmMTExYjQ0NDlhMmJmNzBhMjBhOGE2YWY5NzNjNDA4NmI2ZWUxYWQ0NzEwNjEzY2M2ZGY0MWMyMzZjZDhkYzhmMTE3OWExNjY1MDc3NTM1ZDJlZTZmNjU3ZDM1ZTVhMmEwNDBlYmEyZDI4MjhmMWIzZmFmMDYwOWJiODFkNWUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9UazFNVEU0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
@Component({
selector: "app-root",
template: `<div #spreadsheet></div>`
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
worksheets: jspreadsheet.worksheetInstance[];
ngAfterViewInit() {
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
tabs: true,
worksheets: [
{
data: [
["1","DIVINELY UNINSPIRED TO A HELLISH EXTENT","LEWIS CAPALDI"],
["2","NO 6 COLLABORATIONS PROJECT","ED SHEERAN"],
["3","THE GREATEST SHOWMAN","MOTION PICTURE CAST RECORDING"],
["4","WHEN WE ALL FALL ASLEEP WHERE DO WE GO","BILLIE EILISH"]
],
columns: [
{ type: 'autonumber', title: 'Id' },
{ type: 'text', width: '350px', title: 'Title' },
{ type: 'text', width: '250px', title: 'Artist' },
],
worksheetName: 'Albums',
}
],
onbeforecreateworksheet: function() {
let options = {
minDimensions: [5,5],
}
return options;
},
onopenworksheet: function(element, instance, worksheetNumber) {
console.log(element, instance, worksheetNumber);
},
});
}
}
Programmatic operations
Create a new worksheet programmatically.
<html>
<script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<div id="spreadsheet"></div>
<br/>
<input type="button" value="Create a new worksheet" id="createworksheet" />
<script>
jspreadsheet.setLicense('YWFmMTExYjQ0NDlhMmJmNzBhMjBhOGE2YWY5NzNjNDA4NmI2ZWUxYWQ0NzEwNjEzY2M2ZGY0MWMyMzZjZDhkYzhmMTE3OWExNjY1MDc3NTM1ZDJlZTZmNjU3ZDM1ZTVhMmEwNDBlYmEyZDI4MjhmMWIzZmFmMDYwOWJiODFkNWUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9UazFNVEU0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
let spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {
tabs: true,
worksheets: [
{
minDimensions: [5,5],
worksheetName: 'Example2',
}
]
});
document.getElementById("createworksheet").onclick = () => spreadsheet[0].createWorksheet({ minDimensions: [5,5] });
</script>
</html>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
const license = 'YWFmMTExYjQ0NDlhMmJmNzBhMjBhOGE2YWY5NzNjNDA4NmI2ZWUxYWQ0NzEwNjEzY2M2ZGY0MWMyMzZjZDhkYzhmMTE3OWExNjY1MDc3NTM1ZDJlZTZmNjU3ZDM1ZTVhMmEwNDBlYmEyZDI4MjhmMWIzZmFmMDYwOWJiODFkNWUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9UazFNVEU0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
export default function App() {
const spreadsheet = useRef();
return (
<>
<Spreadsheet ref={spreadsheet} license={license} tabs>
<Worksheet minDimensions={[5,5]} worksheetName="Example2" />
</Spreadsheet>
<input type="button" value="Create a new worksheet"
onClick={() => spreadsheet.current[0].createWorksheet({ minDimensions: [5,5] })} />
</>
);
}
<template>
<Spreadsheet ref="spreadsheet" :license="license">
<Worksheet :minDimensions="[5,5]" worksheetName="Example2" />
</Spreadsheet>
<input type="button" value="Create a new worksheet" @click="createWorksheet" />
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
const license = 'YWFmMTExYjQ0NDlhMmJmNzBhMjBhOGE2YWY5NzNjNDA4NmI2ZWUxYWQ0NzEwNjEzY2M2ZGY0MWMyMzZjZDhkYzhmMTE3OWExNjY1MDc3NTM1ZDJlZTZmNjU3ZDM1ZTVhMmEwNDBlYmEyZDI4MjhmMWIzZmFmMDYwOWJiODFkNWUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9UazFNVEU0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
export default {
components: {
Spreadsheet,
Worksheet,
},
methods: {
createWorksheet() {
this.$refs.spreadsheet.current[0].createWorksheet({ minDimensions: [5,5] });
}
},
data() {
return {
license: license,
};
}
}
</script>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"
jspreadsheet.setLicense('YWFmMTExYjQ0NDlhMmJmNzBhMjBhOGE2YWY5NzNjNDA4NmI2ZWUxYWQ0NzEwNjEzY2M2ZGY0MWMyMzZjZDhkYzhmMTE3OWExNjY1MDc3NTM1ZDJlZTZmNjU3ZDM1ZTVhMmEwNDBlYmEyZDI4MjhmMWIzZmFmMDYwOWJiODFkNWUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9UazFNVEU0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
@Component({
selector: "app-root",
template: `<div #spreadsheet></div>
<input type="button" value="Create a new worksheet"
onclick="this.worksheets[0].createWorksheet({ minDimensions: [5,5] })">`
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
worksheets: jspreadsheet.worksheetInstance[];
ngAfterViewInit() {
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
tabs: true,
worksheets: [
{
minDimensions: [5,5],
worksheetName: 'Example2',
}
]
});
}
}
Formulas on worksheets
The Pro distribution of Jspreadsheet allows you to execute formulas using variables from any other worksheet. The syntax follows the standard used by other spreadsheet software like Google Sheets or Excel, which involves using the exclamation mark. For example: Products!A2*10
.
|
---|
1 | Cheese | 10 | 6 | 60 | |
2 | Apples | 5 | 4 | 20 | |
3 | Carrots | 5 | 1 | 5 | |
4 | Oranges | 6 | 2 | 12 | |
5 | | | | | |
<html>
<script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<div id="spreadsheet"></div>
<script>
jspreadsheet.setLicense('YWFmMTExYjQ0NDlhMmJmNzBhMjBhOGE2YWY5NzNjNDA4NmI2ZWUxYWQ0NzEwNjEzY2M2ZGY0MWMyMzZjZDhkYzhmMTE3OWExNjY1MDc3NTM1ZDJlZTZmNjU3ZDM1ZTVhMmEwNDBlYmEyZDI4MjhmMWIzZmFmMDYwOWJiODFkNWUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9UazFNVEU0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [
{
data: [
['Cheese', 10, 6.00, "=B1*C1"],
['Apples', 5, 4.00, "=B2*C2"],
['Carrots', 5, 1.00, "=B3*C3"],
['Oranges', 6, 2.00, "=B4*C4"],
],
minDimensions: [5,5],
worksheetName: 'Products',
},
{
data: [
['20%', "=Products!D1"],
['20%', "=Products!D2"],
['20%', "=Products!D3"],
['20%', "=Products!D4"],
],
minDimensions: [5,5],
worksheetName: 'Profitability',
}
],
onload: function() {
console.log('Ready');
}
});
</script>
</html>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
const license = 'YWFmMTExYjQ0NDlhMmJmNzBhMjBhOGE2YWY5NzNjNDA4NmI2ZWUxYWQ0NzEwNjEzY2M2ZGY0MWMyMzZjZDhkYzhmMTE3OWExNjY1MDc3NTM1ZDJlZTZmNjU3ZDM1ZTVhMmEwNDBlYmEyZDI4MjhmMWIzZmFmMDYwOWJiODFkNWUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9UazFNVEU0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
export default function App() {
const spreadsheet = useRef();
const data1 = [
['Cheese', 10, 6.00, "=B1*C1"],
['Apples', 5, 4.00, "=B2*C2"],
['Carrots', 5, 1.00, "=B3*C3"],
['Oranges', 6, 2.00, "=B4*C4"],
]
const data2 = [
['20%', "=Products!D1"],
['20%', "=Products!D2"],
['20%', "=Products!D3"],
['20%', "=Products!D4"],
]
return (
<Spreadsheet ref={spreadsheet} license={license} tabs>
<Worksheet data={data1} minDimensions={[5,5]} worksheetName="Products" />
<Worksheet data={data2} minDimensions={[5,5]} worksheetName="Profitability" />
</Spreadsheet>
);
}
<template>
<Spreadsheet ref="spreadsheet" :license="license">
<Worksheet :data="data1" :minDimensions="[5,5]" worksheetName="Products" />
<Worksheet :data="data2" :minDimensions="[5,5]" worksheetName="Profitability" />
</Spreadsheet>
<input type="button" value="Create a new worksheet" @click="createWorksheet"/>
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
const license = 'YWFmMTExYjQ0NDlhMmJmNzBhMjBhOGE2YWY5NzNjNDA4NmI2ZWUxYWQ0NzEwNjEzY2M2ZGY0MWMyMzZjZDhkYzhmMTE3OWExNjY1MDc3NTM1ZDJlZTZmNjU3ZDM1ZTVhMmEwNDBlYmEyZDI4MjhmMWIzZmFmMDYwOWJiODFkNWUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9UazFNVEU0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
export default {
components: {
Spreadsheet,
Worksheet,
},
methods: {
createWorksheet() {
this.$refs.spreadsheet.current[0].createWorksheet({ minDimensions: [5,5] });
}
},
data() {
return {
license: license,
data1: [
['Cheese', 10, 6.00, "=B1*C1"],
['Apples', 5, 4.00, "=B2*C2"],
['Carrots', 5, 1.00, "=B3*C3"],
['Oranges', 6, 2.00, "=B4*C4"],
],
data2: [
['20%', "=Products!D1"],
['20%', "=Products!D2"],
['20%', "=Products!D3"],
['20%', "=Products!D4"],
]
};
}
}
</script>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"
jspreadsheet.setLicense('YWFmMTExYjQ0NDlhMmJmNzBhMjBhOGE2YWY5NzNjNDA4NmI2ZWUxYWQ0NzEwNjEzY2M2ZGY0MWMyMzZjZDhkYzhmMTE3OWExNjY1MDc3NTM1ZDJlZTZmNjU3ZDM1ZTVhMmEwNDBlYmEyZDI4MjhmMWIzZmFmMDYwOWJiODFkNWUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9UazFNVEU0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
@Component({
selector: "app-root",
template: `<div #spreadsheet></div>`
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
worksheets: jspreadsheet.worksheetInstance[];
ngAfterViewInit() {
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
worksheets: [
{
data: [
['Cheese', 10, 6.00, "=B1*C1"],
['Apples', 5, 4.00, "=B2*C2"],
['Carrots', 5, 1.00, "=B3*C3"],
['Oranges', 6, 2.00, "=B4*C4"],
],
minDimensions: [5,5],
worksheetName: 'Products',
},
{
data: [
['20%', "=Products!D1"],
['20%', "=Products!D2"],
['20%', "=Products!D3"],
['20%', "=Products!D4"],
],
minDimensions: [5,5],
worksheetName: 'Profitability',
}
],
onload: function() {
console.log('Ready');
}
});
}
}