Data Grid Cell Types
A new feature in Jspreadsheet Pro v7 is the ability to define custom type based on individual cells. The following example overwrites the default column type definition by custom parameters based on the cellName, as follows.
<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="max-width:200px;"><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:'$ #,##0.00', decimal:'.' },
B3: { type:'text', mask:'$ #,##0.00', decimal:'.' },
B4: { type:'text', mask:'$ #,##0.00', decimal:'.' },
B5: { type:'percent' },
B8: { type:'text', mask:'[-]$ #,##0.00', disabledMaskOnEdition: true, decimal:'.' },
B9: { type:'text', mask:'[-]$ #,##0.00', disabledMaskOnEdition: true, decimal:'.' },
},
license: 'ZGRjNDA2N2ExYzQ4MDgwZTNhMDU5YjFmOGIzYTkxNWIwMmU1YjY5MDhhODgxNDFjM2JlMGQ0YTlhMDIzNzE1MzliNGU4ZmFkZDhjOWEzYzkzZjM1MDYwNDM1YjBkMzYwNzU3NDIyNTA3YWExZWFlMmM1ZjcxNzM1ZWUyOTcwMTIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRd016QXhNVGMyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==',
});
</script>
</html>