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.

	Id	Name	Department	Extension
1	1	Jorge	Marketing	3120
2	2	Antonio	Marketing	3121
3	3	Manoel	Marketing	3123
4	4	Pedro	Marketing	3124
5	5	Carlos	Marketing	3125

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

// 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 = 'MDFhNjYzZjg2ZjM0YjYyYWUxNDNjMTk2Nzk0ZDQ0ZjIyNWZjYjNjNTdmOWI4ZWRkMjM0NGZhZTMxZWEwNGEyODdhYjIwYjdhYTFkYzkzODM5ZTE0NWQ1ZGIwNThiNDVhOTM1ZmVhZjE0MjRlMmQ5N2JhZDE5ODhjODdiODQ2ZDIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9URXhPRE0yTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

// 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 = 'MDFhNjYzZjg2ZjM0YjYyYWUxNDNjMTk2Nzk0ZDQ0ZjIyNWZjYjNjNTdmOWI4ZWRkMjM0NGZhZTMxZWEwNGEyODdhYjIwYjdhYTFkYzkzODM5ZTE0NWQ1ZGIwNThiNDVhOTM1ZmVhZjE0MjRlMmQ5N2JhZDE5ODhjODdiODQ2ZDIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9URXhPRE0yTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

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

// 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)
    }
}

Edit this page on GitHub