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 options

Using NPM

npm install @jspreadsheet/bar

Using 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 = 'NGIxNTVkNmY1ZDc3NTM5YTUyOGZlODMzNzcwZWE1MzkyMmNiZGViYTNlNjQ3ZjFkZjg4MzExZTE4MGNhYWVhMDQ1NmNmMDFkNjQyYjg4OTM0OWRkMmE3MmUxYzM4OTZhMjJhODFhZDRkMGEwMDVjYTBlNTI1ZWI2Mjg1NzNkN2UsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGd6T0RVMU15d2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';

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

React example

import React, { useRef, useState } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
import 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";

const license = 'NGIxNTVkNmY1ZDc3NTM5YTUyOGZlODMzNzcwZWE1MzkyMmNiZGViYTNlNjQ3ZjFkZjg4MzExZTE4MGNhYWVhMDQ1NmNmMDFkNjQyYjg4OTM0OWRkMmE3MmUxYzM4OTZhMjJhODFhZDRkMGEwMDVjYTBlNTI1ZWI2Mjg1NzNkN2UsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGd6T0RVMU15d2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';

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 />
            <Worksheet />
        </Spreadsheet>
    );
}

Vue example

import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
import importer from "@jspreadsheet/importer";

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";

const license = 'NGIxNTVkNmY1ZDc3NTM5YTUyOGZlODMzNzcwZWE1MzkyMmNiZGViYTNlNjQ3ZjFkZjg4MzExZTE4MGNhYWVhMDQ1NmNmMDFkNjQyYjg4OTM0OWRkMmE3MmUxYzM4OTZhMjJhODFhZDRkMGEwMDVjYTBlNTI1ZWI2Mjg1NzNkN2UsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGd6T0RVMU15d2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';

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]" />
        <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('NGIxNTVkNmY1ZDc3NTM5YTUyOGZlODMzNzcwZWE1MzkyMmNiZGViYTNlNjQ3ZjFkZjg4MzExZTE4MGNhYWVhMDQ1NmNmMDFkNjQyYjg4OTM0OWRkMmE3MmUxYzM4OTZhMjJhODFhZDRkMGEwMDVjYTBlNTI1ZWI2Mjg1NzNkN2UsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGd6T0RVMU15d2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');

// 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],
            }
          ]
        });
    }
}