Examples
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.


Source code

<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>

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

<input type='button' value='Get the content of the data variable'
    onclick="document.getElementById('console').value = JSON.stringify(data)">

<script>
var 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('YjRlMDVkYjJlMDRlZjZhYTQyY2U1YWNiNjQwNWUzNjUyYzcyNTAwZDllMWVkZDBjOTU4YjMyMTAwYzM5NDFlYzM1ZGRjNzY0NDljMzc1YzgyODkwMGU5YWM1M2I0YWRhNDFlYTg2MzFhZDkyM2ZjZTI2ZWEwZmE5MTFkZjg0OTUsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6TXpNeU5Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');

// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        data: data,
        minDimensions: [6, 5],
        worksheetName: 'Employees',
        columnDrag: false,
        columns: [
            {
                title: 'Id',
                type: 'autonumber',
                name: 'id',
                readOnly: true,
                primaryKey: true,
            },
            {
                title: 'Name',
                type: 'text',
                name: 'name',
                width: '140px',
            },
            {
                title: 'Photo',
                type: 'image',
                name: 'img',
                width: '80px',
                render: 'round',
            },
            {
                title: 'Role',
                type: 'record',
                name: 'role',
                width: '180px',
                worksheetId: 'roles',
                worksheetColumn: 1,
            },
            {
                title: 'Department',
                type: 'record',
                name: 'department',
                width: '180px',
                worksheetId: 'departments',
            },
            {
                title: 'Manager',
                type: 'record',
                name: 'parent',
                width: '100px',
                worksheetId: 'employees',
                worksheetColumn: 1,
            },
            {
                title: 'Extension',
                name: 'extension',
                width: '80px'
            },
        ],
    }]
});
</script>
</html>