JavaScript Data Grid
with Advanced
Spreadsheet Controls
With the best front-end data grid component, developers can
integrate professional spreadsheet controls into their applications
faster and more flexibly than ever.
Manipulate large amounts of data in a tabular format
Work with literally millions of records in milliseconds. The new data grid version includes a navigation system that leverages the viewport
to load only the data visible to the user. This feature enhances the user experience by creating a seamless and speedy performance while
minimizing the application's resource utilization.
Deliver a spreadsheet experience to your end-user.
Over 400 implemented excel-like formulas. A feature-rich data grid component that includes functions like cross worksheets, filtering, export to xlsx, import from xlsx, data binding, and more.
Spreadsheet Style
Apply CSS directly to the cells
Worksheets
Customise your spreadsheet with multiple worksheets
Import from XLSX
Convert XLSX files to JSON format
Export to XLSX
Convert your data grids and spreadsheets into XLSX files
Formula Pro
A plugin that can parse Excel-like formulas
<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('YTlhNDc3NDZkOGU4MTFjZTYwY2FiZDYwZDdmNGVhNDQ3ODE3MDM2NjM0ODE1YjMzMTE0NmNhODNmYTMzNWNlOGE0YWU0N2E3NjUwMzRiMTc3Mjc3ZGE5ODU3NmJmOWVkZGRlMDY3Y2IzMTlmYTRmN2RlOWViNjFjNWFlOWExNzAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTVOamt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [{
minDimensions: [4,4],
style: {
'A:A': 'background-color: #ccffff; font-weight: bold',
'C2': 'background-color: #ccffff;',
},
}]
});
</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 = 'YTlhNDc3NDZkOGU4MTFjZTYwY2FiZDYwZDdmNGVhNDQ3ODE3MDM2NjM0ODE1YjMzMTE0NmNhODNmYTMzNWNlOGE0YWU0N2E3NjUwMzRiMTc3Mjc3ZGE5ODU3NmJmOWVkZGRlMDY3Y2IzMTlmYTRmN2RlOWViNjFjNWFlOWExNzAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTVOamt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
export default function App() {
// Spreadsheet array of worksheets
const spreadsheet = useRef();
// Style
const style = {
'A:A': 'background-color: #ccffff; font-weight: bold',
'C2': 'background-color: #ccffff;',
}
// Render component
return (<Spreadsheet ref={spreadsheet} license={license}>
<Worksheet style={style} minDimensions={[4,4]} />
</Spreadsheet>);
}
<template>
<Spreadsheet ref="spreadsheet" :license="license">
<Worksheet :style="style" :minDimensions="[4,4]" />
</Spreadsheet>
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
const license = 'YTlhNDc3NDZkOGU4MTFjZTYwY2FiZDYwZDdmNGVhNDQ3ODE3MDM2NjM0ODE1YjMzMTE0NmNhODNmYTMzNWNlOGE0YWU0N2E3NjUwMzRiMTc3Mjc3ZGE5ODU3NmJmOWVkZGRlMDY3Y2IzMTlmYTRmN2RlOWViNjFjNWFlOWExNzAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTVOamt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
export default {
components: {
Spreadsheet,
Worksheet,
},
setup() {
// Style
const style = {
'A:A': 'background-color: #ccffff; font-weight: bold',
'C2': 'background-color: #ccffff;',
}
// Return object
return {
style,
license
};
}
}
</script>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YTlhNDc3NDZkOGU4MTFjZTYwY2FiZDYwZDdmNGVhNDQ3ODE3MDM2NjM0ODE1YjMzMTE0NmNhODNmYTMzNWNlOGE0YWU0N2E3NjUwMzRiMTc3Mjc3ZGE5ODU3NmJmOWVkZGRlMDY3Y2IzMTlmYTRmN2RlOWViNjFjNWFlOWExNzAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTVOamt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
@Component({
standalone: true,
selector: "app-root",
template: "<div #spreadsheet></div>"
})
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: [4,4],
style: {
'A:A': 'background-color: #ccffff; font-weight: bold',
'C2': 'background-color: #ccffff;',
},
}
]
});
}
}
<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('YTlhNDc3NDZkOGU4MTFjZTYwY2FiZDYwZDdmNGVhNDQ3ODE3MDM2NjM0ODE1YjMzMTE0NmNhODNmYTMzNWNlOGE0YWU0N2E3NjUwMzRiMTc3Mjc3ZGE5ODU3NmJmOWVkZGRlMDY3Y2IzMTlmYTRmN2RlOWViNjFjNWFlOWExNzAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTVOamt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Create the spreadsheet
let worksheets = jspreadsheet(document.getElementById('spreadsheet'), {
// Allow create a new tab button
tabs: true,
// Initial worksheet
worksheets: [
{ minDimensions: [4,3] },
{ minDimensions: [4,3] },
],
});
</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 = 'YTlhNDc3NDZkOGU4MTFjZTYwY2FiZDYwZDdmNGVhNDQ3ODE3MDM2NjM0ODE1YjMzMTE0NmNhODNmYTMzNWNlOGE0YWU0N2E3NjUwMzRiMTc3Mjc3ZGE5ODU3NmJmOWVkZGRlMDY3Y2IzMTlmYTRmN2RlOWViNjFjNWFlOWExNzAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTVOamt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
export default function App() {
// Spreadsheet array of worksheets
const spreadsheet = useRef();
// Render component
return (
<>
<Spreadsheet ref={spreadsheet} license={license} tabs>
<Worksheet minDimensions={[4,3]} />
<Worksheet minDimensions={[4,3]} />
</Spreadsheet>
</>
);
}
<template>
<Spreadsheet ref="spreadsheet" :license="license">
<Worksheet :minDimensions="[4,3]" />
<Worksheet :minDimensions="[4,3]" />
</Spreadsheet>
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
const license = 'YTlhNDc3NDZkOGU4MTFjZTYwY2FiZDYwZDdmNGVhNDQ3ODE3MDM2NjM0ODE1YjMzMTE0NmNhODNmYTMzNWNlOGE0YWU0N2E3NjUwMzRiMTc3Mjc3ZGE5ODU3NmJmOWVkZGRlMDY3Y2IzMTlmYTRmN2RlOWViNjFjNWFlOWExNzAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTVOamt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
export default {
components: {
Spreadsheet,
Worksheet,
},
data() {
return {
// License
license: license,
};
}
}
</script>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YTlhNDc3NDZkOGU4MTFjZTYwY2FiZDYwZDdmNGVhNDQ3ODE3MDM2NjM0ODE1YjMzMTE0NmNhODNmYTMzNWNlOGE0YWU0N2E3NjUwMzRiMTc3Mjc3ZGE5ODU3NmJmOWVkZGRlMDY3Y2IzMTlmYTRmN2RlOWViNjFjNWFlOWExNzAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTVOamt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
@Component({
standalone: true,
selector: "app-root",
template: "<div #spreadsheet></div>"
})
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, {
// Allow create a new tab button
tabs: true,
// Initial worksheet
worksheets: [
{ minDimensions: [4,3] },
{ minDimensions: [4,3] },
],
});
}
}
<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" />
<script src="https://cdn.jsdelivr.net/npm/jszip@3.6.0/dist/jszip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/parser/dist/index.min.js"></script>
<div id="spreadsheet"></div>
<input type="file" name="file" id='file' style='display:none'>
<p><input type='button' value='Upload a .XLSX' onclick="document.getElementById('file').click()"/></p>
<script>
// Set license
jspreadsheet.setLicense('YTlhNDc3NDZkOGU4MTFjZTYwY2FiZDYwZDdmNGVhNDQ3ODE3MDM2NjM0ODE1YjMzMTE0NmNhODNmYTMzNWNlOGE0YWU0N2E3NjUwMzRiMTc3Mjc3ZGE5ODU3NmJmOWVkZGRlMDY3Y2IzMTlmYTRmN2RlOWViNjFjNWFlOWExNzAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTVOamt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Set extensions
jspreadsheet.setExtensions({ parser });
// Root
let root = document.getElementById('spreadsheet');
// Create the spreadsheet from a local file
let load = function(e) {
// Parse XLSX file and create a new spreadsheet
jspreadsheet.parser({
file: e.target.files[0],
// It would be used to updated the formats only
locale: 'en-GB',
onload: function(config) {
jspreadsheet(root, config);
},
onerror: function(error) {
alert(error);
}
});
}
document.getElementById("file").onchange = (e) => load(e)
</script>
</html>
import React, { useRef } from "react";
import { jspreadsheet } from "@jspreadsheet/react";
import parser from "@jspreadsheet/parser";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
// Set license
jspreadsheet.setLicense("YTlhNDc3NDZkOGU4MTFjZTYwY2FiZDYwZDdmNGVhNDQ3ODE3MDM2NjM0ODE1YjMzMTE0NmNhODNmYTMzNWNlOGE0YWU0N2E3NjUwMzRiMTc3Mjc3ZGE5ODU3NmJmOWVkZGRlMDY3Y2IzMTlmYTRmN2RlOWViNjFjNWFlOWExNzAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTVOamt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==");
// Set extensions
jspreadsheet.setExtensions({ parser });
export default function App() {
// Spreadsheet array of worksheets
const spreadsheet = useRef(null);
const inputRef = useRef(null);
// Create the spreadsheet from a local file
const load = function (e) {
// Parse XLSX file and create a new spreadsheet
jspreadsheet.parser({
file: e.target.files[0],
// It would be used to update the formats only
locale: "en-GB",
onload: function (config) {
jspreadsheet(spreadsheet.current, config);
},
onerror: function (error) {
alert(error);
},
});
};
// Render component
return (
<>
<div ref={spreadsheet}></div>
<input
ref={inputRef}
id="file"
type="file"
name="file"
onChange={load}
style={{ display: "none" }}
/>
<input
type="button"
value="Load a XLSX file from my local computer"
onClick={() => inputRef.current.click()}
/>
</>
);
}
<template>
<div ref="spreadsheet"></div>
<input
type="file"
name="file"
ref="fileInput"
@change="loadFile"
style="display: none"
/>
<input
type="button"
value="Load a XLSX file from my local computer"
@click="triggerFileInput"
/>
</template>
<script>
import { jspreadsheet } from "@jspreadsheet/vue";
import parser from "@jspreadsheet/parser";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
jspreadsheet.setLicense('YTlhNDc3NDZkOGU4MTFjZTYwY2FiZDYwZDdmNGVhNDQ3ODE3MDM2NjM0ODE1YjMzMTE0NmNhODNmYTMzNWNlOGE0YWU0N2E3NjUwMzRiMTc3Mjc3ZGE5ODU3NmJmOWVkZGRlMDY3Y2IzMTlmYTRmN2RlOWViNjFjNWFlOWExNzAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTVOamt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
jspreadsheet.setExtensions({ parser });
export default {
methods: {
triggerFileInput() {
this.$refs.fileInput.click();
},
loadFile(e) {
const spreadsheetEl = this.$refs.spreadsheet;
jspreadsheet.parser({
file: e.target.files[0],
locale: "en-GB",
onload: function (config) {
jspreadsheet(spreadsheetEl, config);
},
onerror: function (error) {
alert(error);
},
});
},
},
};
</script>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import parser from "@jspreadsheet/parser";
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('YTlhNDc3NDZkOGU4MTFjZTYwY2FiZDYwZDdmNGVhNDQ3ODE3MDM2NjM0ODE1YjMzMTE0NmNhODNmYTMzNWNlOGE0YWU0N2E3NjUwMzRiMTc3Mjc3ZGE5ODU3NmJmOWVkZGRlMDY3Y2IzMTlmYTRmN2RlOWViNjFjNWFlOWExNzAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTVOamt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Set the extensions
jspreadsheet.setExtensions({ parser });
@Component({
standalone: true,
selector: "app-root",
template: '<div #spreadsheet></div><input #file type="file" name="file" style="display:none" /><input type="button" value="Load a XLSX file from my local computer" (click)="this.file.click()"/>'
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
@ViewChild("file") file: ElementRef;
ngAfterViewInit() {
let spreadsheet = this.spreadsheet.nativeElement;
// Add event to the file input
this.file.nativeElement.onchange = function (e) {
// Parse XLSX file and create a new spreadsheet
jspreadsheet.parser({
file: e.target.files[0],
locale: "en-GB",
onload: function (config) {
jspreadsheet(spreadsheet, config);
},
onerror: function (error) {
alert(error);
}
});
};
}
}
<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" />
<script src="https://cdn.jsdelivr.net/npm/jszip@3.6.0/dist/jszip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/render/dist/index.min.js"></script>
<div id='spreadsheet'></div>
<p><input type="button" value="Download" id="btn1" /></p>
<script>
const download = function(spreadsheet) {
jspreadsheet.render(spreadsheet, {
filename: 'file.xlsx',
});
}
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YTlhNDc3NDZkOGU4MTFjZTYwY2FiZDYwZDdmNGVhNDQ3ODE3MDM2NjM0ODE1YjMzMTE0NmNhODNmYTMzNWNlOGE0YWU0N2E3NjUwMzRiMTc3Mjc3ZGE5ODU3NmJmOWVkZGRlMDY3Y2IzMTlmYTRmN2RlOWViNjFjNWFlOWExNzAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTVOamt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Add-on for Spreadsheet
jspreadsheet.setExtensions({ render });
// Create the spreadsheets
let worksheets = jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [
{ minDimensions: [4, 3] },
{ minDimensions: [4, 3] },
],
});
document.getElementById("btn1").onclick = function() {
download(worksheets[0].parent);
}
</script>
</html>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
import jspreadsheet from "jspreadsheet";
import render from "@jspreadsheet/render";
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('YTlhNDc3NDZkOGU4MTFjZTYwY2FiZDYwZDdmNGVhNDQ3ODE3MDM2NjM0ODE1YjMzMTE0NmNhODNmYTMzNWNlOGE0YWU0N2E3NjUwMzRiMTc3Mjc3ZGE5ODU3NmJmOWVkZGRlMDY3Y2IzMTlmYTRmN2RlOWViNjFjNWFlOWExNzAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTVOamt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Add-on for your JSS data grid
jspreadsheet.setExtensions({ render });
export default function App() {
// Spreadsheet array of worksheets
const spreadsheet = useRef();
const download = function() {
jspreadsheet.render(spreadsheet.current[0].parent.el, {
filename: 'file.xlsx',
});
}
// Render component
return (
<>
<Spreadsheet ref={spreadsheet}>
<Worksheet />
<Worksheet />
</Spreadsheet>
<input type="button" value="Generate XLSX" onClick={() => download()} />
</>
);
}
<template>
<Spreadsheet ref="spreadsheet" :license="license" :extensions="extensions">
<Worksheet :minDimensions="[10,10]" />
<Worksheet :minDimensions="[10,10]" />
</Spreadsheet>
<input type="button" value="Generate XLSX" @click="download" />
</template>
<script>
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue";
import render from "@jspreadsheet/render";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
// Define the data grid license
const license = 'YTlhNDc3NDZkOGU4MTFjZTYwY2FiZDYwZDdmNGVhNDQ3ODE3MDM2NjM0ODE1YjMzMTE0NmNhODNmYTMzNWNlOGE0YWU0N2E3NjUwMzRiMTc3Mjc3ZGE5ODU3NmJmOWVkZGRlMDY3Y2IzMTlmYTRmN2RlOWViNjFjNWFlOWExNzAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTVOamt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
// Define the data grid extensions
const extensions = { render };
export default {
components: {
Spreadsheet,
Worksheet,
},
methods: {
download() {
// Spreadsheet instance
jspreadsheet.render(this.$refs.spreadsheet.current[0].parent.el, {
filename: 'file.xlsx',
});
}
},
data() {
const spreadsheet = ref(null);
return {
spreadsheet,
license,
extensions,
};
}
}
</script>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import render from "@jspreadsheet/render";
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('YTlhNDc3NDZkOGU4MTFjZTYwY2FiZDYwZDdmNGVhNDQ3ODE3MDM2NjM0ODE1YjMzMTE0NmNhODNmYTMzNWNlOGE0YWU0N2E3NjUwMzRiMTc3Mjc3ZGE5ODU3NmJmOWVkZGRlMDY3Y2IzMTlmYTRmN2RlOWViNjFjNWFlOWExNzAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTVOamt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Extensions
jspreadsheet.setExtensions({ render });
@Component({
standalone: true,
selector: "app-root",
template: "<div #spreadsheet></div><input type="button" value="Generate XLSX" (click)="this.export()" />"
})
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: [4, 3] },
{ minDimensions: [4, 3] }
]
});
}
export() {
// Spreadsheet instance
jspreadsheet.render(this.worksheets[0].parent.el, {
filename: 'file.xlsx',
});
}
}
<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" />
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/formula-pro/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('YTlhNDc3NDZkOGU4MTFjZTYwY2FiZDYwZDdmNGVhNDQ3ODE3MDM2NjM0ODE1YjMzMTE0NmNhODNmYTMzNWNlOGE0YWU0N2E3NjUwMzRiMTc3Mjc3ZGE5ODU3NmJmOWVkZGRlMDY3Y2IzMTlmYTRmN2RlOWViNjFjNWFlOWExNzAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTVOamt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Add-on for JSpreadsheet
jspreadsheet.setExtensions({ formula });
// Create the spreadsheets
jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [{
minDimensions: [4, 4],
data: [
['1', '=SUM(A1:A4)'],
['2', '=PRODUCT(A1:A4)'],
['10', ''],
['20', ''],
]
}],
});
</script>
</html>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react";
import formula from "@jspreadsheet/formula-pro";
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('YTlhNDc3NDZkOGU4MTFjZTYwY2FiZDYwZDdmNGVhNDQ3ODE3MDM2NjM0ODE1YjMzMTE0NmNhODNmYTMzNWNlOGE0YWU0N2E3NjUwMzRiMTc3Mjc3ZGE5ODU3NmJmOWVkZGRlMDY3Y2IzMTlmYTRmN2RlOWViNjFjNWFlOWExNzAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTVOamt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Add-on for JSpreadsheet
jspreadsheet.setExtensions({ formula });
export default function App() {
// Spreadsheet array of worksheets
const spreadsheet = useRef();
const data = [
['1', '=SUM(A1:A4)'],
['2', '=PRODUCT(A1:A4)'],
['10', ''],
['20', ''],
]
// Render component
return (
<Spreadsheet ref={spreadsheet}>
<Worksheet minDimensions={[5, 5]} data={data} />
</Spreadsheet>
);
}
<template></template>
<Spreadsheet ref="spreadsheet">
<Worksheet :data="data" :minDimensions="[5,5]" />
</Spreadsheet>
</template>
<script>
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue";
import formula from "@jspreadsheet/formula-pro";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
// License
jspreadsheet.setLicense('YTlhNDc3NDZkOGU4MTFjZTYwY2FiZDYwZDdmNGVhNDQ3ODE3MDM2NjM0ODE1YjMzMTE0NmNhODNmYTMzNWNlOGE0YWU0N2E3NjUwMzRiMTc3Mjc3ZGE5ODU3NmJmOWVkZGRlMDY3Y2IzMTlmYTRmN2RlOWViNjFjNWFlOWExNzAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTVOamt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Extensions
jspreadsheet.setExtensions({ formula });
export default {
components: {
Spreadsheet,
Worksheet,
},
data() {
// Data
const data = [
['1', '=SUM(A1:A4)'],
['2', '=PRODUCT(A1:A4)'],
['10', ''],
['20', ''],
]
return {
data,
};
}
}
</script>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import formula from "@jspreadsheet/formula-pro";
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('YTlhNDc3NDZkOGU4MTFjZTYwY2FiZDYwZDdmNGVhNDQ3ODE3MDM2NjM0ODE1YjMzMTE0NmNhODNmYTMzNWNlOGE0YWU0N2E3NjUwMzRiMTc3Mjc3ZGE5ODU3NmJmOWVkZGRlMDY3Y2IzMTlmYTRmN2RlOWViNjFjNWFlOWExNzAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTVOamt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Extensions
jspreadsheet.setExtensions({ formula });
@Component({
standalone: true,
selector: "app-root",
template: "<div #spreadsheet></div>"
})
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: [{
data: [
['1', '=SUM(A1:A4)'],
['2', '=PRODUCT(A1:A4)'],
['10', ''],
['20', ''],
],
}],
});
}
}
Enhance Your JavaScript Data Grid with AI
Incorporate ChatGPT API or Llama into your web-based data grids to enable automated content generation and advanced data analysis. When paired with Jspreadsheet Server, this powerful integration empowers real-time data queries directly from the front end, connecting to your back-end API to deliver instant insights and responses to users.
JavaScript Data Grid with Full-Stack Capabilities
Unlock real-time collaboration, new ways to implement persistence, automation, non-consecutive selections, advanced multi-copy handling, optimized array operations, and robust privacy controls.
Integrations
Jspreadsheet allows you to integrate your spreadsheet with other plugins to create rich applications.
Lightweight
Just 0.3 Mb. Jspreadsheet is designed to be lean and efficient, making it a breeze to integrate into your application.
Persistence
Different methods, events, and features to help with the backend data persistence.
What Our Customers Are Saying
Jspreadsheet reduces customers development time. Here are some of their experiences.
What is Jspreadsheet?
More than just a JS data grid component, Jspreadsheet is a comprehensive solution designed to meet a variety of application requirements in spreadsheet and data management for web platforms. It optimizes workflow development, streamlines process automation, and facilitates the smooth transition of tasks from Excel to the web. Additionally, Jspreadsheet provides a wide range of extensions to address diverse needs within the data grid and spreadsheet ecosystem, making it a versatile choice for various business applications.
How to generate my license key?
So, if you add to your profile, let’s say:
mycompany.com
Any subdomain will be valid:
www.mycompany.com
dev.mycompany.com
Press save; a new certificate will be generated.
You can also add the IP to the authorised domains box and save your profile, and a new certificate will be generated with the IP address.
The local host is already included.
How to renew my license key?
To renew your license, please follow these steps:
Go to your profile at https://jspreadsheet.com/me/profile.
Click on “Renew License.”
Scroll down to the bottom of the page and click “Save.”
Copy the new certificate key and replace the old one in your code with this updated key.
Try it for free
kindly inform us, and we will extend the period for you.