Real-time spreadsheet
* Requires Intrasheets.Intrasheets is a service that enables real-time sharing and collaboration with other users. You can install it on your servers to maintain control over your data and privacy.
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" /> <script src="https://jspreadsheet.com/v10/plugins/cloud.js"></script> <div id="spreadsheet"></div> <script> // Set your JSS license key (The following key only works for one day) jspreadsheet.setLicense('Y2IwYTQ4ZGU3OTAyMzZlYWNhYjdhYTllZTlhNDAyMmE3Njk2NjY0YWFkYzRlMmJlNzFkN2U5M2UyOTc2YmNiNjU1ZmQyZTYxOGI2MzMzMDhlODVlYWQ2YWRmNGRlZTU4MzA4MGI2ZGZhNTc4NWM1ZWViZTUwOTk0YWRmNTJjMmYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3hNRGt5TURVek1Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5'); // Load the cloud extension jspreadsheet.setExtensions({ cloud }); // Create the spreadsheet jspreadsheet(document.getElementById('spreadsheet'), { cloud: 'e6e15247-e9fb-40c6-b07d-8519f6a53ca1', }); </script> </html>
React example
import React, { useRef } from "react"; import { Spreadsheet, Worksheet } from "@jspreadsheet/react"; import cloud from '@jspreadsheet/cloud'; // Set the license jspreadsheet.setLicense('Y2IwYTQ4ZGU3OTAyMzZlYWNhYjdhYTllZTlhNDAyMmE3Njk2NjY0YWFkYzRlMmJlNzFkN2U5M2UyOTc2YmNiNjU1ZmQyZTYxOGI2MzMzMDhlODVlYWQ2YWRmNGRlZTU4MzA4MGI2ZGZhNTc4NWM1ZWViZTUwOTk0YWRmNTJjMmYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3hNRGt5TURVek1Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5'); // Load the cloud extension jspreadsheet.setExtensions({ cloud }); // Create the component export default function App() { // Spreadsheet array of worksheets const spreadsheet = useRef(); // Render data grid component return ( <Spreadsheet ref={spreadsheet} cloud={"e6e15247-e9fb-40c6-b07d-8519f6a53ca1"} /> ); }
Vue example
import { Spreadsheet } from "@jspreadsheet/vue"; import cloud from '@jspreadsheet/cloud'; // Set the license jspreadsheet.setLicense('Y2IwYTQ4ZGU3OTAyMzZlYWNhYjdhYTllZTlhNDAyMmE3Njk2NjY0YWFkYzRlMmJlNzFkN2U5M2UyOTc2YmNiNjU1ZmQyZTYxOGI2MzMzMDhlODVlYWQ2YWRmNGRlZTU4MzA4MGI2ZGZhNTc4NWM1ZWViZTUwOTk0YWRmNTJjMmYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3hNRGt5TURVek1Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5'); // Load the cloud extension jspreadsheet.setExtensions({ cloud }); // Create components export default { components: { Spreadsheet }, template: `<Spreadsheet ref="spreadsheet" cloud="e6e15247-e9fb-40c6-b07d-8519f6a53ca1" />`, };
Angular example
import { Component, ViewChild, ElementRef } from "@angular/core"; import * as jspreadsheet from "jspreadsheet"; import cloud from '@jspreadsheet/cloud'; // Set the license jspreadsheet.setLicense('Y2IwYTQ4ZGU3OTAyMzZlYWNhYjdhYTllZTlhNDAyMmE3Njk2NjY0YWFkYzRlMmJlNzFkN2U5M2UyOTc2YmNiNjU1ZmQyZTYxOGI2MzMzMDhlODVlYWQ2YWRmNGRlZTU4MzA4MGI2ZGZhNTc4NWM1ZWViZTUwOTk0YWRmNTJjMmYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3hNRGt5TURVek1Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5'); // Load the cloud extension jspreadsheet.setExtensions({ cloud }); // Create the data grid component @Component({ selector: "app-root", template: `<div #spreadsheet></div>`; }) export class AppComponent { @ViewChild("spreadsheet") spreadsheet: ElementRef; // Worksheets worksheets: jspreadsheet.worksheetInstance[]; // Create a new data grid ngOnInit() { // Create summary spreadsheet jspreadsheet(this.spreadsheet.nativeElement, { cloud: 'e6e15247-e9fb-40c6-b07d-8519f6a53ca1', }); } }