Edition bar
The Edition Bar Extension for Jspreadsheet Pro data grid is a UI component positioned atop each worksheet. It facilitates data interaction through direct input and editing of cell values and formulas, displays the active selection, and manages the defined range names. This extension enhances user data manipulation within Jspreadsheet Pro, mirroring traditional spreadsheet interactions.Documentation
Installation
Please choose one of the following optionsUsing NPM
npm install @jspreadsheet/barUsing a CDN
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/bar/dist/index.min.js"></script>
Dependencies
This extension requires LemonadeJS and @jSuites/css libraries.<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script> <style src="https://cdn.jsdelivr.net/npm/@jsuites/css/dist/style.min.css"></style>
Examples
A advance data grid with spreadsheet like controls
Showing all spreadsheet-like data grid.JavaScript example
<html> <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://cdn.jsdelivr.net/npm/@jsuites/css/dist/style.min.css" type="text/css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jspreadsheet/bar/dist/style.min.css" /> <script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script> <script src="https://jsuites.net/v5/jsuites.js"></script> <script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/bar/dist/index.min.js"></script> <div id='spreadsheet'></div> <script> // Set your JSS license key (The following key only works for one day) jspreadsheet.license = 'NGRhOWQ3MTAyYjk5NmYzMDcxMjk5MWZjOGIwOGY0OTEwOGM5NWRiYjE5ZTM4NzkzMDk4MzBhYjk2Y2Y3ZDhiYWUxMTBhZTZiNGY1MWYzMzgwOWY5NjMyM2VjYTA4MzUzMWZkMjZiZmNkYTkyMmI5YmRlNmQ0YWYxOGE1NGUxYWYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dNak0zTnpreE9Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5'; // Add-on for Jspreadsheet jspreadsheet.setExtensions({ bar }); // Create the spreadsheets let grid = jspreadsheet(document.getElementById('spreadsheet'), { bar: true, tabs: true, toolbar: true, worksheets: [ { minDimensions: [6, 8] }, { minDimensions: [6, 8] }, ], }); </script> </html>
See this example on codesandbox
React example
import React, { useRef, useState } from "react"; import { Spreadsheet, Worksheet } from "@jspreadsheet/react"; import importer from "@jspreadsheet/bar"; import "/node_modules/@jsuites/css/dist/style.css"; import "/node_modules/@jspreadsheet/bar/dist/style.css"; const license = 'NGRhOWQ3MTAyYjk5NmYzMDcxMjk5MWZjOGIwOGY0OTEwOGM5NWRiYjE5ZTM4NzkzMDk4MzBhYjk2Y2Y3ZDhiYWUxMTBhZTZiNGY1MWYzMzgwOWY5NjMyM2VjYTA4MzUzMWZkMjZiZmNkYTkyMmI5YmRlNmQ0YWYxOGE1NGUxYWYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dNak0zTnpreE9Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5'; const extensions = { bar }; export default function App() { // Spreadsheet array of worksheets const spreadsheet = useRef(); // Render component return ( <Spreadsheet ref={spreadsheet} license={license} bar="true" tabs="true" toolbar="true" extensions={extensions}> <Worksheet /> </Spreadsheet> ); }
Vue example
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue"; import importer from "@jspreadsheet/importer"; import "/node_modules/@jsuites/css/dist/style.css"; import "/node_modules/@jspreadsheet/bar/dist/style.css"; const license = 'NGRhOWQ3MTAyYjk5NmYzMDcxMjk5MWZjOGIwOGY0OTEwOGM5NWRiYjE5ZTM4NzkzMDk4MzBhYjk2Y2Y3ZDhiYWUxMTBhZTZiNGY1MWYzMzgwOWY5NjMyM2VjYTA4MzUzMWZkMjZiZmNkYTkyMmI5YmRlNmQ0YWYxOGE1NGUxYWYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dNak0zTnpreE9Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5'; export default { components: { Spreadsheet, Worksheet, }, methods: { }, data() { return { // License license: license, // Extensions extensions: { bar: bar, }, }; }, template: `<Spreadsheet ref="spreadsheet" :license="license" :bar="true" :tabs="true" :toolbar="true" :extensions="extensions"> <Worksheet :minDimensions="[10,10]" /> </Spreadsheet>`, }
Angular example
import { Component, ViewChild, ElementRef } from "@angular/core"; import * as jspreadsheet from "jspreadsheet"; import * as importer from "@jspreadsheet/bar"; import "/node_modules/jsuites/dist/jsuites.css"; import "/node_modules/@jsuites/css/dist/style.css"; import "/node_modules/jspreadsheet/dist/jspreadsheet.css"; import "/node_modules/@jspreadsheet/bar/dist/style.css"; // Set your JSS license key (The following key only works for one day) jspreadsheet.setLicense('NGRhOWQ3MTAyYjk5NmYzMDcxMjk5MWZjOGIwOGY0OTEwOGM5NWRiYjE5ZTM4NzkzMDk4MzBhYjk2Y2Y3ZDhiYWUxMTBhZTZiNGY1MWYzMzgwOWY5NjMyM2VjYTA4MzUzMWZkMjZiZmNkYTkyMmI5YmRlNmQ0YWYxOGE1NGUxYWYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dNak0zTnpreE9Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5'); // Extensions jspreadsheet.setExtensions({ bar }); @Component({ selector: "app-root", template: `<div #spreadsheet></div>` }) export class AppComponent { @ViewChild("spreadsheet") spreadsheet: ElementRef; // Worksheets worksheets: jspreadsheet.worksheetInstance[]; // Create a new data grid ngAfterViewInit() { // Create spreadsheet this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, { bar: true, tabs: true, toolbar: true, worksheets: [ { minDimensions: [10, 10], minDimensions: [10, 10], } ] }); } }