Back to Examples

Excel-like Custom Formulas

IMPORTANT : All methods names should be created using capital letters.

<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 COLORIZE = function(v) {
    let d = document.createElement('div');
    d.style.color = v;
    d.innerText = v.toUpperCase();
    return d;
}

formula.setFormula({ COLORIZE })

jspreadsheet.setExtensions({ formulas: formula })

let data = [
    [ 'red', '=COLORIZE(A1)' ],
    [ 'green', '=COLORIZE(A2)' ],
    [ 'blue', '=COLORIZE(A3)' ],
];

jspreadsheet(document.getElementById('spreadsheet'), {
    data:data,
    columns: [
        { type: 'text', width:'300' },
        { type: 'text', width:'200' },
    ],
    license: 'MjlmYzM1YmY5ZjNlZmJlZTcwODhiNmEyNGNhMDkyYjMzOWJkNjE2NGViYmFmODFkNDY1NTFjOGYzZmM0MGE4NTA4MjZjM2ZlN2JiZTcyMGIwNzljNWUwNjg4ZDE5N2E2ODc4NTEyMjQwM2M5YWUyY2JjNzAyOTk1YzViN2JkZTUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFME1EUXlOak13TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==',
});
</script>
</html>

Edit this page on GitHub