Spreadsheet Data Binding

Data binding in JSS refers to automatically synchronizing the data reference provided during initialization with the JSS data. That ensures that changes the user makes to the data are reflected automatically in the variable declared during initialization.

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

<html>
<script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v10/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><br/>

<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('OGFiZjVhODcxMjBlNmFmOTJmZDY0NTA3NDA0ZWRhYjE5NWM5YWEzNzE0MTg5ZGQzNGY5MzJmOGEwZjA4YTMyZmNkNTBjMGUyMWIzMWIzZGQ0MGYwN2E3NzRkZWQ3OGU4MDI5ZmYxYTcwYTc2YjJjMTgwM2Q0MWI2ZjBhYmM1MzgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpJeE5qTTBNekkwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        data: data,
        minDimensions: [6, 5],
        worksheetName: 'Employees',
        columns: [
            {
                title: 'Id',
                type: 'autonumber',
                name: 'id',
                readOnly: true,
                primaryKey: true,
                width: '80px',
            },
            {
                title: 'Name',
                type: 'text',
                name: 'name',
                width: '140px',
            },
            {
                title: 'Photo',
                type: 'image',
                name: 'img',
                width: '80px',
                render: 'round',
            },
            {
                title: 'Department',
                type: 'text',
                name: 'department',
                width: '180px',
                source: ['Marketing','Accounts','General'],
            },
            {
                title: 'Extension',
                name: 'extension',
                width: '120px'
            },
        ],
    }]
});

document.getElementById("consolelog").onclick = function() { document.getElementById('console').innerHTML = JSON.stringify(data) }
</script>
</html>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";

// Set the license
const license = 'OGFiZjVhODcxMjBlNmFmOTJmZDY0NTA3NDA0ZWRhYjE5NWM5YWEzNzE0MTg5ZGQzNGY5MzJmOGEwZjA4YTMyZmNkNTBjMGUyMWIzMWIzZGQ0MGYwN2E3NzRkZWQ3OGU4MDI5ZmYxYTcwYTc2YjJjMTgwM2Q0MWI2ZjBhYmM1MzgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpJeE5qTTBNekkwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

// Create the component
export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    const log = useRef();
    // Data
    const 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",
        },
    ];

    // Columns
    const columns = [
        {
            title: 'Id',
            type: 'autonumber',
            name: 'id',
            readOnly: true,
            primaryKey: true,
            width: '80px',
        },
        {
            title: 'Name',
            type: 'text',
            name: 'name',
            width: '140px',
        },
        {
            title: 'Photo',
            type: 'image',
            name: 'img',
            width: '80px',
            render: 'round',
        },
        {
            title: 'Department',
            type: 'text',
            name: 'department',
            width: '180px',
            source: ['Marketing','Accounts','General'],
        },
        {
            title: 'Extension',
            name: 'extension',
            width: '120px'
        },
    ];

    // Render data grid component
    return (
        <>
            <Spreadsheet ref={spreadsheet} license={license}>
                <Worksheet data={data} columns={columns} minDimensions={[6,5]} worksheetName={"Employees"} />
            </Spreadsheet>
            <textarea ref={log}></textarea>
            <input type='button' value='Get the content of the data variable'
                onClick={() => log.current.value = JSON.stringify(data)} />
        </>
    );
}
<template>
    <Spreadsheet ref="spreadsheet" :license="license">
        <Worksheet :data="data" :columns="columns" :minDimensions="[6,5]" worksheetName="Employees" />
    </Spreadsheet>
    <textarea ref="log"></textarea>
    <input type='button' value='Get the content of the data variable' @click="get" />
</template>

<script>
import { ref } from "vue";
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";

// Set the license
const license = 'OGFiZjVhODcxMjBlNmFmOTJmZDY0NTA3NDA0ZWRhYjE5NWM5YWEzNzE0MTg5ZGQzNGY5MzJmOGEwZjA4YTMyZmNkNTBjMGUyMWIzMWIzZGQ0MGYwN2E3NzRkZWQ3OGU4MDI5ZmYxYTcwYTc2YjJjMTgwM2Q0MWI2ZjBhYmM1MzgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpJeE5qTTBNekkwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

// Data
const 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",
    }
];

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    methods: {
        get() {
            this.$refs.log.value.value = JSON.stringify(data);
        }
    },
    data() {
        const log = ref(null);

        // Columns
        const columns = [
            {
                title: 'Id',
                type: 'autonumber',
                name: 'id',
                readOnly: true,
                primaryKey: true,
                width: '80px',
            },
            {
                title: 'Name',
                type: 'text',
                name: 'name',
                width: '140px',
            },
            {
                title: 'Photo',
                type: 'image',
                name: 'img',
                width: '80px',
                render: 'round',
            },
            {
                title: 'Department',
                type: 'text',
                name: 'department',
                width: '180px',
                source: ['Marketing','Accounts','General'],
            },
            {
                title: 'Extension',
                name: 'extension',
                width: '120px'
            },
        ];

        return {
            data,
            columns,
            license,
        };
    }
}

import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";

import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"

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

// Get the data
const 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",
    },
];

@Component({
    selector: "app-root",
    template: `
        <div #spreadsheet></div>
        <textarea #log></textarea>
        <input type='button' value='Get the content of the data variable'
            (click)="logValue()" />`,
})
export class AppComponent {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    @ViewChild("log") log: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Data
    data: data;
    // Create a new data grid
    ngAfterViewInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            worksheets: [{
                data: data,
                minDimensions: [6, 5],
                worksheetName: 'Employees',
                columns:
                // Columns
                const columns = [
                    {
                        title: 'Id',
                        type: 'autonumber',
                        name: 'id',
                        readOnly: true,
                        primaryKey: true,
                        width: '80px',
                    },
                    {
                        title: 'Name',
                        type: 'text',
                        name: 'name',
                        width: '140px',
                    },
                    {
                        title: 'Photo',
                        type: 'image',
                        name: 'img',
                        width: '80px',
                        render: 'round',
                    },
                    {
                        title: 'Department',
                        type: 'text',
                        name: 'department',
                        width: '180px',
                        source: ['Marketing','Accounts','General'],
                    },
                    {
                        title: 'Extension',
                        name: 'extension',
                        width: '120px'
                    },
                ],
            }]
        });
    }

    logValue() {
        this.log.nativeElement.value = JSON.stringify(data)
    }
}