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('MmFjNmM2MzJlNjIzN2QwM2I1Mzc2ZmEzOGEwZDQ2YzE3M2UyMDBjYzIxYjRiMjQ0OWFiYmRiYTJmYWU5MjY2MzA5NTdmZDdjNjE4OGNiMWVkYjg2OWJkZmFiOGM3ZjU4NmNlZDkxM2U2ZGUyNmQ3YTg4OGY2YjY0NDZhNjRhODEsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGczTlRRM01Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'); // 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('MmFjNmM2MzJlNjIzN2QwM2I1Mzc2ZmEzOGEwZDQ2YzE3M2UyMDBjYzIxYjRiMjQ0OWFiYmRiYTJmYWU5MjY2MzA5NTdmZDdjNjE4OGNiMWVkYjg2OWJkZmFiOGM3ZjU4NmNlZDkxM2U2ZGUyNmQ3YTg4OGY2YjY0NDZhNjRhODEsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGczTlRRM01Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'); // 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('MmFjNmM2MzJlNjIzN2QwM2I1Mzc2ZmEzOGEwZDQ2YzE3M2UyMDBjYzIxYjRiMjQ0OWFiYmRiYTJmYWU5MjY2MzA5NTdmZDdjNjE4OGNiMWVkYjg2OWJkZmFiOGM3ZjU4NmNlZDkxM2U2ZGUyNmQ3YTg4OGY2YjY0NDZhNjRhODEsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGczTlRRM01Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'); // 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('MmFjNmM2MzJlNjIzN2QwM2I1Mzc2ZmEzOGEwZDQ2YzE3M2UyMDBjYzIxYjRiMjQ0OWFiYmRiYTJmYWU5MjY2MzA5NTdmZDdjNjE4OGNiMWVkYjg2OWJkZmFiOGM3ZjU4NmNlZDkxM2U2ZGUyNmQ3YTg4OGY2YjY0NDZhNjRhODEsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGczTlRRM01Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'); // 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', }); } }