Getting started
Jspreadsheet is a JavaScript Spreadsheet plugin that allows for creating online data grids with the look and feel of a traditional spreadsheet. This plugin provides various features to enable the creation of interactive and engaging datasets, improving the user experience of web-based applications.
Installation
Please choose one of the following options:
Download
Download and run jspreadsheet on your server or local machine https://jspreadsheet.com/v11/jspreadsheet.zip
NPM
To install jspreadsheet using NPM
// Install version 11
$ npm install jspreadsheet@11
// Alternatively, you can use one of our dedicated wrappers as below.
// Install the react wrapper
$ npm install @jspreadsheet/react@11
// Install the vue wrapper
$ npm install @jspreadsheet/vue@11
CDN
Run jspreadsheet directly from JSDelivr CDN
<script src="https://cdn.jsdelivr.net/npm/jspreadsheet@11/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jspreadsheet@11/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" />
License
This software requires a license. You can generate a certificate from your profile. Each certificate is normally valid for 12 months and need to be regenerated before expiration.
Start your free trial
The free trial certificate is valid for 30 days, but if you need more time you can extend this period.
Documentation
Global methods and properties
Method Description |
---|
Create a new spreadsheet.jspreadsheet(el: HTMLElement|null, options: Object) |
Destroy a given spreadsheet.jspreadsheet.destroy(ident: HTMLElement|object, events: Boolean) |
Destroy all spreadsheets in all namespaces.jspreadsheet.destroyAll() |
Bind extensions to Jspreadsheet, null to remove all extensions.jspreasheet.setExtensions(extensions: object| null) |
Set the license string to your jspreadsheet application.jspreadsheet.setLicnese(license: string) |
Translate Jspreadsheet components and extensions.jspreadsheet.setDictionary(translations: object) |
Get a worksheet instance by name and namespace.jspreadsheet.getWorksheetInstanceByName(worksheetName: string, namespace?: string) |
Examples
Create a new data grid
You can create a new data grid with spreadsheet-like controls from an HTML table element, a JS array, a CSV, a JSON file or an Excel XLSX file.
<html>
<script src="https://jspreadsheet.com/v11/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v11/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>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YTY2MjFlYWVhMmEyNzg4NGIxNGI5MGQ1M2FiY2FjYTlhOWNjM2I4Yjc2Yzc2YTFjNDBhNjgxZjFjNDQ5ZjRiMWUyNzhmYjJmODlhYTYxZGRmZDEwZTI4ZTAwODI4N2MzYmU0ODUyNjYxZWM4Y2E4ZTk3NDU4MDRhZDU1YzY5YWMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpJNE1qazNNalUyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Create a new spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [{
data: [
['Mazda', 2001, 2000],
['Peugeot', 2010, 5000],
['Honda Fit', 2009, 3000],
['Honda CRV', 2010, 6000],
],
columns: [
{ title:'Model', width:'300px' },
{ title:'Year', width:'80px' },
{ title:'Price', width:'100px' },
]
}]
});
</script>
</html>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
const license = 'YTY2MjFlYWVhMmEyNzg4NGIxNGI5MGQ1M2FiY2FjYTlhOWNjM2I4Yjc2Yzc2YTFjNDBhNjgxZjFjNDQ5ZjRiMWUyNzhmYjJmODlhYTYxZGRmZDEwZTI4ZTAwODI4N2MzYmU0ODUyNjYxZWM4Y2E4ZTk3NDU4MDRhZDU1YzY5YWMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpJNE1qazNNalUyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
// Create a new data grid
export default function App() {
// Spreadsheet array of worksheets
const spreadsheet = useRef();
// Data
const data = [
['Mazda', 2001, 2000],
['Peugeot', 2010, 5000],
['Honda Fit', 2009, 3000],
['Honda CRV', 2010, 6000],
];
const columns = [
{ title:'Model', width:'300px' },
{ title:'Year', width:'80px' },
{ title:'Price', width:'100px' },
];
// Render data grid component
return (
<Spreadsheet ref={spreadsheet} license={license}>
<Worksheet data={data} columns={columns} />
</Spreadsheet>
);
}
<template>
<Spreadsheet ref="spreadsheet" :license="license">
<Worksheet :data="data" :columns="columns" />
</Spreadsheet>
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
const license = 'YTY2MjFlYWVhMmEyNzg4NGIxNGI5MGQ1M2FiY2FjYTlhOWNjM2I4Yjc2Yzc2YTFjNDBhNjgxZjFjNDQ5ZjRiMWUyNzhmYjJmODlhYTYxZGRmZDEwZTI4ZTAwODI4N2MzYmU0ODUyNjYxZWM4Y2E4ZTk3NDU4MDRhZDU1YzY5YWMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpJNE1qazNNalUyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
export default {
components: {
Spreadsheet,
Worksheet,
},
data() {
return {
// License
license: license,
// Data
data: [
['Mazda', 2001, 2000],
['Peugeot', 2010, 5000],
['Honda Fit', 2009, 3000],
['Honda CRV', 2010, 6000],
],
columns: [
{ title:'Model', width:'300px' },
{ title:'Year', width:'80px' },
{ title:'Price', width:'100px' },
],
};
}
}
</script>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YTY2MjFlYWVhMmEyNzg4NGIxNGI5MGQ1M2FiY2FjYTlhOWNjM2I4Yjc2Yzc2YTFjNDBhNjgxZjFjNDQ5ZjRiMWUyNzhmYjJmODlhYTYxZGRmZDEwZTI4ZTAwODI4N2MzYmU0ODUyNjYxZWM4Y2E4ZTk3NDU4MDRhZDU1YzY5YWMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpJNE1qazNNalUyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
@Component({
selector: 'app-root',
standalone: true,
template: `<div #spreadsheet></div>`,
})
export class App {
@ViewChild('spreadsheet') spreadsheet!: ElementRef;
// Worksheets
worksheets: jspreadsheet.worksheetInstance[] = [];
// Create a new JavaScript data grid
ngAfterViewInit() {
// Create spreadsheet
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
worksheets: [{
data: [
['Mazda', 2001, 2000],
['Peugeot', 2010, 5000],
['Honda Fit', 2009, 3000],
['Honda CRV', 2010, 6000],
],
columns: [
{ title:'Model', width:'300px' },
{ title:'Year', width:'80px' },
{ title:'Price', width:'100px' },
]
}]
});
}
}
Destroying The Data Grid
The following example shows how to dynamically destroy and recreate a new data grid.
<html>
<script src="https://jspreadsheet.com/v11/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v11/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='jspreadsheet'></div>
<p><input type='button' value='Destroy' id="btn1" />
<input type='button' value='Create' id="btn2" /></p>
<script>
// Create a new spreadsheet
let create = function() {
jspreadsheet(document.getElementById('jspreadsheet'), {
worksheets: [ { minDimensions:[5,5] } ]
});
}
// Destroy the spreadsheet
let destroy = function() {
jspreadsheet.destroy(document.getElementById('jspreadsheet'));
}
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YTY2MjFlYWVhMmEyNzg4NGIxNGI5MGQ1M2FiY2FjYTlhOWNjM2I4Yjc2Yzc2YTFjNDBhNjgxZjFjNDQ5ZjRiMWUyNzhmYjJmODlhYTYxZGRmZDEwZTI4ZTAwODI4N2MzYmU0ODUyNjYxZWM4Y2E4ZTk3NDU4MDRhZDU1YzY5YWMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpJNE1qazNNalUyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Create the spreadsheet
jspreadsheet(document.getElementById('jspreadsheet'), {
worksheets: [{
minDimensions: [5,5],
}]
});
document.getElementById("btn1").onclick = () => destroy()
document.getElementById("btn2").onclick = () => create()
</script>
</html>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
const license = 'YTY2MjFlYWVhMmEyNzg4NGIxNGI5MGQ1M2FiY2FjYTlhOWNjM2I4Yjc2Yzc2YTFjNDBhNjgxZjFjNDQ5ZjRiMWUyNzhmYjJmODlhYTYxZGRmZDEwZTI4ZTAwODI4N2MzYmU0ODUyNjYxZWM4Y2E4ZTk3NDU4MDRhZDU1YzY5YWMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpJNE1qazNNalUyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
// Create a new spreadsheet
const create = function() {
jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [ { minDimensions:[5,5] } ]
});
}
// Destroy the spreadsheet
const destroy = function(spreadsheet) {
jspreadsheet.destroy(spreadsheet);
}
// Create a new data grid
export default function App() {
// Spreadsheet array of worksheets
const spreadsheet = useRef();
// Data
const data = [
['Mazda', 2001, 2000],
['Peugeot', 2010, 5000],
['Honda Fit', 2009, 3000],
['Honda CRV', 2010, 6000],
];
const columns = [
{ title:'Model', width:'300px' },
{ title:'Year', width:'80px' },
{ title:'Price', width:'100px' },
];
// Render data grid component
return (
<>
<Spreadsheet ref={spreadsheet} license={license} id="spreadsheet">
<Worksheet data={data} columns={columns} />
</Spreadsheet>
<input type="button" value="Destroy" onClick={() => destroy(spreadsheet.current[0].parent)} />
<input type="button" value="Create" onClick={() => create()} />
</>
);
}
<template>
<Spreadsheet ref="spreadsheet" :license="license" id="spreadsheet">
<Worksheet />
</Spreadsheet>
<input type="button" value="Destroy" @click="destroy()" />
<input type="button" value="Create" @click="create()" />
</template>
<script>
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
const license = 'YTY2MjFlYWVhMmEyNzg4NGIxNGI5MGQ1M2FiY2FjYTlhOWNjM2I4Yjc2Yzc2YTFjNDBhNjgxZjFjNDQ5ZjRiMWUyNzhmYjJmODlhYTYxZGRmZDEwZTI4ZTAwODI4N2MzYmU0ODUyNjYxZWM4Y2E4ZTk3NDU4MDRhZDU1YzY5YWMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpJNE1qazNNalUyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
export default {
components: {
Spreadsheet,
Worksheet,
},
methods: {
// Create a new worksheet
create() {
jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [ { minDimensions:[5,5] } ]
});
},
// Destroy the whole data grid
destroy() {
jspreadsheet.destroy(this.$refs.spreadsheet.current[0].parent);
}
},
data() {
return {
license: license,
};
}
}
</script>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YTY2MjFlYWVhMmEyNzg4NGIxNGI5MGQ1M2FiY2FjYTlhOWNjM2I4Yjc2Yzc2YTFjNDBhNjgxZjFjNDQ5ZjRiMWUyNzhmYjJmODlhYTYxZGRmZDEwZTI4ZTAwODI4N2MzYmU0ODUyNjYxZWM4Y2E4ZTk3NDU4MDRhZDU1YzY5YWMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpJNE1qazNNalUyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
@Component({
selector: "app-root",
template: `
<div #spreadsheet></div>
<input type="button" value="Destroy" (click)="destroy()" />
<input type="button" value="Create" (click)="create()" />`
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
// Worksheets
worksheets: jspreadsheet.worksheetInstance[];
// Create a new data grid
ngAfterViewInit() {
// Create spreadsheet
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
worksheets: [{
minDimensions: [5,5],
}]
});
}
destroy() {
jspreadsheet.destroy(this.worksheets[0].parent);
}
create() {
jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [ { minDimensions:[5,5] } ]
});
}
}