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.
JavaScript example
<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> <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('ZTAzNzE2ZjA2MGNkMTUzYjMxNjc5NzkwNjQ4ZWE0ZGJlYWUwNDQ0MTU5NzQwZTI2MWFkMDU5OWQ5Zjc3MGZiMDU1OWRkNTFkMGVhYzQ0NGIxZjZlNDFjM2Q0ZjIyZDBlZWUyYTEzOWZkNzhhYzIwZThmMjQxMzgzY2Q0Njk5MzAsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6T0RFNU1pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'); // Create the spreadsheet jspreadsheet(document.getElementById('spreadsheet'), { 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' }, ], }] }); </script> </html>
React example
import React, { useRef } from "react"; import { Spreadsheet, Worksheet } from "@jspreadsheet/react"; // Set the license const license = 'ZTAzNzE2ZjA2MGNkMTUzYjMxNjc5NzkwNjQ4ZWE0ZGJlYWUwNDQ0MTU5NzQwZTI2MWFkMDU5OWQ5Zjc3MGZiMDU1OWRkNTFkMGVhYzQ0NGIxZjZlNDFjM2Q0ZjIyZDBlZWUyYTEzOWZkNzhhYzIwZThmMjQxMzgzY2Q0Njk5MzAsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6T0RFNU1pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'; // 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)} /> </> ); }
See this example on codesandbox
Vue example
<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 = 'ZTAzNzE2ZjA2MGNkMTUzYjMxNjc5NzkwNjQ4ZWE0ZGJlYWUwNDQ0MTU5NzQwZTI2MWFkMDU5OWQ5Zjc3MGZiMDU1OWRkNTFkMGVhYzQ0NGIxZjZlNDFjM2Q0ZjIyZDBlZWUyYTEzOWZkNzhhYzIwZThmMjQxMzgzY2Q0Njk5MzAsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6T0RFNU1pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'; // 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, }; } }
Angular example
import { Component, ViewChild, ElementRef } from "@angular/core"; import * as jspreadsheet from "jspreadsheet"; // Set your JSS license key (The following key only works for one day) jspreadsheet.setLicense('ZTAzNzE2ZjA2MGNkMTUzYjMxNjc5NzkwNjQ4ZWE0ZGJlYWUwNDQ0MTU5NzQwZTI2MWFkMDU5OWQ5Zjc3MGZiMDU1OWRkNTFkMGVhYzQ0NGIxZjZlNDFjM2Q0ZjIyZDBlZWUyYTEzOWZkNzhhYzIwZThmMjQxMzgzY2Q0Njk5MzAsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6T0RFNU1pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'); // 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)="this.log.value = JSON.stringify(this.data)" />`; }) export class AppComponent { @ViewChild("spreadsheet") spreadsheet: ElementRef; @ViewChild("log") log: ElementRef; // Worksheets worksheets: jspreadsheet.worksheetInstance[]; // Data data: data; // Create a new data grid ngOnInit() { // 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' }, ], }] }); } }