Back to Examples

Spreadsheet

In the following example, the data variable will be automatically updated when the cell value changes.

The following content will be the content of the data variable.

<html>
<script src="https://jspreadsheet.com/v9/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v9/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

<div id="spreadsheet"></div>

<div id='console'></div><br>

<input type='button' value='Get the content of the data variable' id="consolelog" />

<script>
let data = [
    {
       "id":1,
       "name":"Jorge",
       "img":"img/nophoto.jpg",
       "department":"Marketing",
       "extension":"3120",
    },
    {
       "id":2,
       "name":"Antonio",
       "img":"img/nophoto.jpg",
       "department":"Marketing",
       "extension":"3121",
    },
    {
       "id":3,
       "name":"Manoel",
       "img":"img/nophoto.jpg",
       "department":"Marketing",
       "extension":"3123",
    },
    {
       "id":4,
       "name":"Pedro",
       "img":"img/nophoto.jpg",
       "department":"Marketing",
       "extension":"3124",
    },
    {
       "id":5,
       "name":"Carlos",
       "img":"img/nophoto.jpg",
       "department":"Marketing",
       "extension":"3125",
    },
];

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('N2FmY2I0MjIyYWRkOGJlYzQ1MzI0NWJmZTFhZDA5Njg2MmIxMzBhMDA3ODI2ZDRiODVjMDY1YTQ4YjZiODRiZTczMjJiZDU0ZWRjMjIzOTc4YzljNTdlYjEzNjRhNzlmZjhlMWEyMDA2MGQ2NWUwMjYwYzQ5OTM3MmNkMmQyYTQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFME1USXlNVFV5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        data: data,
        minDimensions: [5, 5],
        worksheetName: 'employees',
        columnDrag: false,
    }]
});

document.getElementById("consolelog").onclick = function() { document.getElementById('console').innerHTML = JSON.stringify(data) }
</script>
</html>

Edit this page on GitHub