Spreadsheet Payment Calculator
A quick example using various data grid cell types in the same column.
<html>
<script src="https://jspreadsheet.com/v7/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v7/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<div id="spreadsheet"></div>
<script>
let data = [
['<img src="https://www.autoblog.com/img/research/styles/photos/performance.jpg" style="width:200px;height:auto;"><br><h3>Vehicle Payment Calculator</h3>', ''],
['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'), {
data: data,
columns: [
{ width:'300px' },
{ width:'200px' },
],
mergeCells: {
A1: [2, 1]
},
rows: {
0: { height:'200px' }
},
cells: {
A1: { type:'html' },
B2: { type:'text', mask:'$ #,##.00', decimal:'.' },
B3: { type:'text', mask:'$ #,##.00', decimal:'.' },
B4: { type:'text', mask:'$ #,##.00', decimal:'.' },
B5: { type:'percent' },
B8: { type:'text', mask:'[-]$ #,##.00', disabledMaskOnEdition: true, decimal:'.' },
B9: { type:'text', mask:'[-]$ #,##.00', disabledMaskOnEdition: true, decimal:'.' },
},
license: 'ODVlZmUxZDUwN2RmODdmNzhkYzc3NmI0OWY0ZWI4MGE3MmI4YWU2MWQzYzA0Y2E2ZDAyMjdkODA4MDY1Y2FjZWVhN2MwYWM0MzFkYzIwM2Y2OWRjZTE3NDU0YmZjOTc1YTI2MmVjODUxZjJjMTU2MTI1MmNmODcyOTRlZTlhODUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNE5UQTBOREEwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5',
});
</script>
</html>