Formula Picker

The formula picker simplifies adding variables to formulas through mouse or keyboard selections. Additionally, it can transform an HTML element into a range selector, enabling the creation of Excel-style ranges with a mouse selection over worksheets.

New Features in Version 11

Enhanced flexibility to switch between worksheets during the worksheet variable selection;

Keyboard navigation to facilitate range creation.

Documentation

Settings

To customize the integration of the formula picker in your application, you can use the following options.

Property	Description
type?: 'formula' \| 'picker'	Define the render type. type: 'formula' understand a formula when the string start with '=', where type: 'picker' starts an event by click in the picker button.
onchange?: function	The function is triggered when the user completes the selection of cells in the data grid. `onchange(element: HTMLElement, mouseEvent: object) => void`
onupdate?: function	The function is triggered when the user moves their mouse to update the cell selection in the data grid. `onupdate(element: HTMLElement, mouseEvent: object) => void`
palette: string[]	Customize the colors of the formula token. Default: `['#006CD4','#BC2F34','#7C53AC','#107042','#D50888','#DB6B10','#00758F']`
single: boolean	Always reset the input on start.
worksheetName: boolean	Always include the worksheet name during the selection.

Syntax

<script>
jspreadsheet.picker(document.getElementById('picker'), {
    type: 'formula',
    palette: ['#006CD4','#BC2F34','#7C53AC','#107042','#D50888','#DB6B10','#00758F'],
    onchange: function(v) {
        // Do something
    }
});
</script>

Methods

Method	Description
palette: string[]	Customize the colors of the formula token

Customize the Color Palette

It is possible to customize the formula token colors to match your application requirements.

// Customize the colors
jspreadsheet.picker.palette(['#006CD4','#BC2F34','#7C53AC','#107042','#D50888','#DB6B10','#00758F'])

Examples

Formula Picker Example

Create a javascript formula picker using Jspreadsheet.

<html>
<script src="https://jspreadsheet.com/v11/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v11/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" />

<p><div id="picker" style="max-width: 320px;"></div></p>

<div id="spreadsheet"></div>

<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NGM0ZDYyYWZkNjg0YjczMDBiN2FkNjg5OTRmODNjMzhlMWEwMWI3NjBiM2ZlZmIyZmZjMmQxNjBiNzdhYmEwNWNiOWRhYzFmODI3N2ViZjVkY2MwMTcyYWY0ZWZjYzA2ZDA3YWU2N2YzYTI3Mjc1ODg5Y2IxOWU5Mzk0OWViODUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNeU1qWTNNRFExTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        minDimensions: [6,6],
    }]
});

jspreadsheet.picker(document.getElementById('picker'), {
    type: 'picker',
    onchange: function() {
        // Do something
    }
});
</script>

</html>

import React, { useRef, useEffect } from "react";
import { Spreadsheet, Worksheet, Picker, jspreadsheet } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NGM0ZDYyYWZkNjg0YjczMDBiN2FkNjg5OTRmODNjMzhlMWEwMWI3NjBiM2ZlZmIyZmZjMmQxNjBiNzdhYmEwNWNiOWRhYzFmODI3N2ViZjVkY2MwMTcyYWY0ZWZjYzA2ZDA3YWU2N2YzYTI3Mjc1ODg5Y2IxOWU5Mzk0OWViODUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNeU1qWTNNRFExTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    const picker = useRef();

    const onchange = (value) => {
        console.log(value)
    }

    // Render component
    return (
        <>
            <Picker type="picker" onchange={onchange} />
            <Spreadsheet ref={spreadsheet}>
                <Worksheet />
            </Spreadsheet>
        </>
    );
}

<template>
    <Picker ref="picker" type="picker" :onchange="onChange" />
    <Spreadsheet ref="spreadsheet">
        <Worksheet />
    </Spreadsheet>
</template>

<script>
import { Spreadsheet, Worksheet, Picker, jspreadsheet } from "@jspreadsheet/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

jspreadsheet.setLicense('NGM0ZDYyYWZkNjg0YjczMDBiN2FkNjg5OTRmODNjMzhlMWEwMWI3NjBiM2ZlZmIyZmZjMmQxNjBiNzdhYmEwNWNiOWRhYzFmODI3N2ViZjVkY2MwMTcyYWY0ZWZjYzA2ZDA3YWU2N2YzYTI3Mjc1ODg5Y2IxOWU5Mzk0OWViODUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNeU1qWTNNRFExTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');


export default {
    components: {
        Spreadsheet,
        Worksheet,
        Picker
    },
    methods: {
        onChange: function(v) {
            console.log(v)
        }
    }
}
</script>

import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";

import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NGM0ZDYyYWZkNjg0YjczMDBiN2FkNjg5OTRmODNjMzhlMWEwMWI3NjBiM2ZlZmIyZmZjMmQxNjBiNzdhYmEwNWNiOWRhYzFmODI3N2ViZjVkY2MwMTcyYWY0ZWZjYzA2ZDA3YWU2N2YzYTI3Mjc1ODg5Y2IxOWU5Mzk0OWViODUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNeU1qWTNNRFExTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

@Component({
    standalone: true,
    selector: "app-root",
    template: `<div #picker></div>
        <div #spreadsheet></div>`
})
export class AppComponent {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    @ViewChild("picker") picker: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngAfterViewInit() {
        // Create the spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            worksheets: [{
                minDimensions: [8,8],
            }]
        });

        jspreadsheet.picker(this.picker.nativeElement, {
            type: 'picker',
            onchange: function() {
                // Do something
            }
        });
    }
}

Edit this page on GitHub