Spreadsheet Payment Calculator
A quick example using various data grid cell types in the same column.
| A | B | |
| 1 |  Vehicle Payment Calculator | |
| 2 | Purchase price | $ 19,700.00 |
| 3 | Down payment | $ 1,000.00 |
| 4 | Trade-in value | $ 500.00 |
| 5 | Interest rate | 3.05% |
| 6 | Length of loan (in months) | 60 |
| 7 | ||
| 8 | Monthly payment | $ -327.43 |
| 9 | Total cost | $ 21,146.08 |
<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: 'YjZlMzg3MjBjZjBiZWQzOWVkNDI1YjllZDNmMzM4MzdmYWI2NDQ4OGUwY2Y5ZTlkYTM0YWIwMWVjNDA5MDBkNTU4ZDQ4NDVhZmZkNWRlMjIzNmJjN2U3MTMyYzhjNWU5ZGE2Yjg1MDI5YTE0YjFmNzkwN2IxYzk5MTBlMjFlM2MsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRME56QTNNRFkxTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==',
});
</script>
</html>