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: 'MmY1N2E4MDBkYjM0YzdiZDJkNTNmMjRkOGIxOWRkNzZkNmNlYjA4Y2IwNDY4N2ZmY2Y5ZGIzMWZhNDQyZGNjZGJhYmFkYjgyMTI5NWJkMzJkY2Q4ZmMwNGI3YjIxOTExNjE5YTMyNTYxOTI3ZDQxNDQwYTllYjAzMmQxZmQ4ZGUsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGczTkRZNE15d2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09', }); </script> </html>