Payment calculator
A nice example using various cell types for one unique column.
Source code
<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> var 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: 'NThhZTc4OTMwNGM1YWFmY2NhNDdhNTA1Yjc4ZTg2Mzk0ZDM3NjI1MGVkNTYyYzY3MmFkOTc3ZjVkOGJlMGUzY2I3OTVmNGNkMGI4OTFiZmY4ZDI5ODAzM2U0Y2VmZWY5YmFmODdjYzY4NTFlNTAxNjg0MGZiNGM4NGNkNzdlMjYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3hNVGMzT1RZeU1Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5', }); </script> </html>