Payment calculator
A loan calculator example showcases the use of multiple data grid cell types within a single column.
JavaScript example
<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>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YTcwNWU5OGJlMmZlZjczMmM2OTk1NzYwODE1MTA2MTNhMzJmZTY5NDYzOGZiMWJiN2VhOTFiOGI1NjIyOGViNWY5MTRhZmFkMjk0NWRmOWQyZDQwZjM2ZTQyMDY5ZTA1NDZjODc5ZGJkYTA3NThhYmM3NTFlNDZmYjMwZDI1NjIsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGczTmpBeE55d2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');
// Create the spreadsheet
var data = [
['<img src="https://www.autoblog.com/img/research/styles/photos/performance.jpg"
style="width:200px;height:auto;"><br><h4>Vehicle Payment Calculator</h4>', ''],
['Purchase price', '19700'],
['Down payment', '1000'],
['Trade-in value', '500'],
['Interest rate', '0.0305'],
['Length of loan (in months)', '60'],
['', ''],
['Monthly payment', '=PMT(B5/12,B6,B2-(B3+B4))'],
['Total cost', '=-(B8*B6)+(B3+B4)'],
];
jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [{
data: data,
columns: [
{ width:'300px' },
{ width:'100px' },
],
mergeCells: {
A1: [2, 1]
},
rows: {
0: { height:'200px' }
},
cells: {
A1: { type:'html', readOnly: true },
B2: { type:'number', mask: '#.##0,00' },
B3: { type:'number', mask: '#.##0,00' },
B4: { type:'number', mask: '#.##0,00' },
B5: { type:'number', mask: '0.00%' },
B6: { type: 'dropdown', source: [12,24,36,48,60] },
B8: { type:'number', mask: '#.##0,00' },
B9: { type:'number', mask: '#.##0,00' },
},
}]
});
</script>
</html>
React example
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
const license = 'YTcwNWU5OGJlMmZlZjczMmM2OTk1NzYwODE1MTA2MTNhMzJmZTY5NDYzOGZiMWJiN2VhOTFiOGI1NjIyOGViNWY5MTRhZmFkMjk0NWRmOWQyZDQwZjM2ZTQyMDY5ZTA1NDZjODc5ZGJkYTA3NThhYmM3NTFlNDZmYjMwZDI1NjIsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGczTmpBeE55d2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';
export default function App() {
// Spreadsheet array of worksheets
const spreadsheet = useRef();
// Data
const data = [
['<img src="https://www.autoblog.com/img/research/styles/photos/performance.jpg"
style="width:200px;height:auto;"><br><h4>Vehicle Payment Calculator</h4>', ''],
['Purchase price', '19700'],
['Down payment', '1000'],
['Trade-in value', '500'],
['Interest rate', '0.0305'],
['Length of loan (in months)', '60'],
['', ''],
['Monthly payment', '=PMT(B5/12,B6,B2-(B3+B4))'],
['Total cost', '=-(B8*B6)+(B3+B4)'],
]
// Columns
const cells = {
A1: { type:'html', readOnly: true },
B2: { type:'number', mask: '#.##0,00' },
B3: { type:'number', mask: '#.##0,00' },
B4: { type:'number', mask: '#.##0,00' },
B5: { type:'number', mask: '0.00%' },
B6: { type: 'dropdown', source: [12,24,36,48,60] },
B8: { type:'number', mask: '#.##0,00' },
B9: { type:'number', mask: '#.##0,00' },
}
// Merge cells
const mergeCells: {
A1: [2, 1]
}
// Columns
const columns = [
{ width:'300px' },
{ width:'100px' },
]
// Rows
const rows = {
0: { height:'200px' }
}
// Render data grid component
return (
<Spreadsheet ref={spreadsheet} license={license}>
<Worksheet data={data} columns={columns} rows={rows} mergeCells={mergeCells} cells={cells} />
</Spreadsheet>
);
}
Vue example
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
const license = 'YTcwNWU5OGJlMmZlZjczMmM2OTk1NzYwODE1MTA2MTNhMzJmZTY5NDYzOGZiMWJiN2VhOTFiOGI1NjIyOGViNWY5MTRhZmFkMjk0NWRmOWQyZDQwZjM2ZTQyMDY5ZTA1NDZjODc5ZGJkYTA3NThhYmM3NTFlNDZmYjMwZDI1NjIsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGczTmpBeE55d2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';
export default {
components: {
Spreadsheet,
Worksheet,
},
data() {
// Data
const data = [
['<img src="https://www.autoblog.com/img/research/styles/photos/performance.jpg"
style="width:200px;height:auto;"><br><h4>Vehicle Payment Calculator</h4>', ''],
['Purchase price', '19700'],
['Down payment', '1000'],
['Trade-in value', '500'],
['Interest rate', '0.0305'],
['Length of loan (in months)', '60'],
['', ''],
['Monthly payment', '=PMT(B5/12,B6,B2-(B3+B4))'],
['Total cost', '=-(B8*B6)+(B3+B4)'],
]
// Columns
const cells = {
A1: { type:'html', readOnly: true },
B2: { type:'number', mask: '#.##0,00' },
B3: { type:'number', mask: '#.##0,00' },
B4: { type:'number', mask: '#.##0,00' },
B5: { type:'number', mask: '0.00%' },
B6: { type: 'dropdown', source: [12,24,36,48,60] },
B8: { type:'number', mask: '#.##0,00' },
B9: { type:'number', mask: '#.##0,00' },
}
// Merge cells
const mergeCells: {
A1: [2, 1]
}
// Columns
const columns = [
{ width:'300px' },
{ width:'100px' },
]
// Rows
const rows = {
0: { height:'200px' }
}
return {
data,
columns,
rows,
mergeCells,
cells,
license
};
},
template: `<Spreadsheet ref="spreadsheet" :license="license">
<Worksheet :data="data" :columns="columns" :rows="rows" :mergeCells="mergeCells" :cells="cells" />
</Spreadsheet>`,
}
Angular example
import { Component, ViewChild, ElementRef } from "@angular/core";
import * as jspreadsheet from "jspreadsheet";
import "/node_modules/jsuites/dist/jsuites.css";
import "/node_modules/jspreadsheet/dist/jspreadsheet.css";
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YTcwNWU5OGJlMmZlZjczMmM2OTk1NzYwODE1MTA2MTNhMzJmZTY5NDYzOGZiMWJiN2VhOTFiOGI1NjIyOGViNWY5MTRhZmFkMjk0NWRmOWQyZDQwZjM2ZTQyMDY5ZTA1NDZjODc5ZGJkYTA3NThhYmM3NTFlNDZmYjMwZDI1NjIsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGczTmpBeE55d2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');
@Component({
selector: "app-root",
template: `<div #spreadsheet></div>`
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
@ViewChild("form") spreadsheet: ElementRef;
// Worksheets
worksheets: jspreadsheet.worksheetInstance[];
// Create a new data grid
ngAfterViewInit() {
// Create spreadsheet
this.worksheets = jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [{
data: [
['<img src="https://www.autoblog.com/img/research/styles/photos/performance.jpg"
style="width:200px;height:auto;"><br><h4>Vehicle Payment Calculator</h4>', ''],
['Purchase price', '19700'],
['Down payment', '1000'],
['Trade-in value', '500'],
['Interest rate', '0.0305'],
['Length of loan (in months)', '60'],
['', ''],
['Monthly payment', '=PMT(B5/12,B6,B2-(B3+B4))'],
['Total cost', '=-(B8*B6)+(B3+B4)'],
],
columns: [
{ width:'300px' },
{ width:'100px' },
],
mergeCells: {
A1: [2, 1]
},
rows: {
0: { height:'200px' }
},
cells: {
A1: { type:'html', readOnly: true },
B2: { type:'number', mask: '#.##0,00' },
B3: { type:'number', mask: '#.##0,00' },
B4: { type:'number', mask: '#.##0,00' },
B5: { type:'number', mask: '0.00%' },
B6: { type: 'dropdown', source: [12,24,36,48,60] },
B8: { type:'number', mask: '#.##0,00' },
B9: { type:'number', mask: '#.##0,00' },
},
}]
});
}
}