Products

Documentation keyboard_arrow_right Dropdown and autocomplete

JavaScript Dropdown

Jspreadsheet provides a powerful dropdown column type with features including:

  • Create dropdowns from arrays or JSON data
  • Utilize key-value objects for dropdown options
  • Populate values based on other columns
  • Set up conditional dropdowns that change based on other data
  • Enable multiple selections with built-in search
  • Support multiple rendering styles with responsive design
  • Include images, icons, and grouped options
  • Perform remote searches for dynamic data
  • Allow users to add new options dynamically

The LemonadeJS Dropdown component from LemonadeJS provides enhanced functionality with improved accessibility, keyboard navigation, and better performance compared to the previous jSuites dropdown.

Migration Note: Jspreadsheet v12 has migrated from jSuites dropdown to LemonadeJS Dropdown. While the basic API remains compatible, some advanced configuration options may have changed. Please review your dropdown configurations and test thoroughly when upgrading.

Documentation

Dropdown Settings

The data grid supports several attributes that can be used with the properties of a column or cells, including:

Property Description
source: Items[] Array of items to be loaded into the dropdown
url: String Get the data from a remote URL
multiple: Boolean Enable multiple option selection
delimiter: String Define the delimiter for multiple values. Default: ';'
autocomplete: Boolean Enable autocomplete functionality
filterOptions: Function Modify the dropdown configuration before editing a cell
dynamicSource: String Define dropdown options from a cell range. Example: Sheet1!A1:A4

Extended Options

Can be defined using the options property within the column or cells settings.

Property Description
type: String Render type: default | picker | searchbar
placeholder: String Placeholder text for the input field
newOptions: Boolean Allow users to add new options to the dropdown
remoteSearch: Boolean Enable remote search functionality
url: String Remote backend URL to handle search requests
onbeforeinsert: Function Called before a new item is added. Return false to cancel action
oninsert: Function Called when a user adds a new item to the dropdown
prompt: Function Customize the prompt interface for adding new items

Customize the Prompt

You can customize the prompt as shown in the example below:

const addANewItem = (addNewOption) => {
    // Customize your prompt and call the function when you are ready
    let title = prompt('Add a new item', '');
    if (title) {
        // Define the id of the new item
        let id = Math.random() * 1000;
        // Execute new item
        addNewOption(title, id);
    }
}

jspreadsheet(root, {
    worksheets: [{
        minDimensions: [20, 20],
        tableOverflow: true,
        tableWidth: 800,
        columns: [
            {
                type:'dropdown',
                source: [1,2,3],
                options: {
                    newOptions: true,
                    prompt: addANewItem
                }
            }
        ],
    }]
});

Include a JWT in Your Autocomplete Dropdown Requests

Easily intercept autocomplete requests to your server and attach variables or custom HTTP headers—such as a JSON Web Token (JWT)—for authentication.

jspreadsheet(document.getElementById('spreadsheet'), {
    tabs: true,
    toolbar: true,
    worksheets: [{
        minDimensions: [8,8],
        columns: [{
            type: 'dropdown',
            options: {
                url: 'https://jspreadsheet.com/jspreadsheet/countries',
                autocomplete: true,
                remoteSearch: true,
                onbeforesearch: function(instance, request) {
                    request.method = 'POST';
                    request.data['anotherVariable'] = 1;
                    request.beforeSend = (httpRequest) => {
                        httpRequest.setRequestHeader('Authorization', 'Bearer ' + sessionStorage.getItem('jwt'));
                    }
                    return request;
                }
            }
        }]
    }],
});

Properties of an Item

Each option in the dropdown is defined by an object with the following possible attributes:

Property Description
value: mixed Unique key for the item
text: string Display value of the item
title: string Description of the item
image: string Image URL for the item
group: string Name of the group the item belongs to
synonym: array Keywords to help search for the item
disabled: boolean Whether the item is disabled
color: number Color value for the item
icon: string Material icon keyword
tooltip: string Tooltip text shown on hover
~~id: mixed~~ Deprecated
~~name: string~~ Deprecated

Examples

Autocomplete and Multiple Options

The following example shows the first column with JavaScript autocomplete and multiple options enabled.

<html>
<script src="https://jspreadsheet.com/v11/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v11/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

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

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

// Create a new spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        data: [
            ['US', 'Wholemeal', 'Yes', '2019-02-12'],
            ['CA;US;GB', 'Breakfast Cereals', 'Yes', '2019-03-01'],
            ['CA;BR', 'Grains', 'No', '2018-11-10'],
            ['BR', 'Pasta', 'Yes', '2019-01-12'],
        ],
        columns: [
            { type:'dropdown', width:'200px', title:'Product Origin', url:'https://jspreadsheet.com/jspreadsheet/countries', autocomplete:true, multiple:true },
            { type:'text', width:'100px', title:'Description' },
            { type:'dropdown', width:'100px', title:'Stock', source:['No','Yes'], options:{ newOptions:true } },
            { type:'calendar', width:'100px', title:'Best before', format:'DD/MM/YYYY' },
        ],
    }]
});
</script>
</html>

import React, {useRef} from "react";
import {Spreadsheet, Worksheet} 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('YTFjNjMwMGM2OWVlZTYzMzc5MTBjOTQ4MTNmOTg5NzhkODk1MDg4ZTI0ZjljYmFlYTFjNDA4N2IzNjkxMzc5ZGFmYTYxYTgzNzBlMjQ2NTk2ZTgyYWY0NDJiNWJkZDRiYWUyNTI2YzAyOGNhYzIwODhhZmU5MDI3Yzc1NjZhN2MsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azFPRGt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Data
    const data = [
        ['US', 'Wholemeal', 'Yes', '2019-02-12'],
        ['CA;US;GB', 'Breakfast Cereals', 'Yes', '2019-03-01'],
        ['CA;BR', 'Grains', 'No', '2018-11-10'],
        ['BR', 'Pasta', 'Yes', '2019-01-12'],
    ];
    // Columns
    const columns = [
        {
            type: 'dropdown',
            width: '300px',
            title: 'Product Origin',
            url: 'https://jspreadsheet.com/jspreadsheet/countries',
            autocomplete: true,
            multiple: true
        },
        {
            type: 'text',
            width: '200px',
            title: 'Description'
        },
        {
            type: 'dropdown',
            width: '150px',
            title: 'Stock',
            source: ['No', 'Yes'],
            options: {newOptions: true}
        },
        {
            type: 'calendar',
            width: '150px',
            title: 'Best before',
            format: 'DD/MM/YYYY'
        }
    ];

    // Render data grid component
    return (
        <Spreadsheet ref={spreadsheet}>
            <Worksheet data={data} columns={columns}/>
        </Spreadsheet>
    );
}

<template>
    <Spreadsheet ref="spreadsheet">
        <Worksheet :data="data" :columns="columns" />
    </Spreadsheet>
</template>

<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
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('YTFjNjMwMGM2OWVlZTYzMzc5MTBjOTQ4MTNmOTg5NzhkODk1MDg4ZTI0ZjljYmFlYTFjNDA4N2IzNjkxMzc5ZGFmYTYxYTgzNzBlMjQ2NTk2ZTgyYWY0NDJiNWJkZDRiYWUyNTI2YzAyOGNhYzIwODhhZmU5MDI3Yzc1NjZhN2MsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azFPRGt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    data() {
        // Data
        const data = [
            ['US', 'Wholemeal', 'Yes', '2019-02-12'],
            ['CA;US;GB', 'Breakfast Cereals', 'Yes', '2019-03-01'],
            ['CA;BR', 'Grains', 'No', '2018-11-10'],
            ['BR', 'Pasta', 'Yes', '2019-01-12'],
        ];
        // Columns
        const columns = [
            {
                type:'dropdown',
                width:'300px',
                title: 'Product Origin',
                url:'https://jspreadsheet.com/jspreadsheet/countries',
                autocomplete:true,
                multiple:true
            },
            {
                type:'text',
                width:'200px',
                title:'Description'
            },
            {
                type:'dropdown',
                width:'150px',
                title:'Stock',
                source:['No','Yes'],
                options:{ newOptions:true }
            },
            {
                type:'calendar',
                width:'150px',
                title:'Best before',
                format:'DD/MM/YYYY'
            }
        ];


        return {
            data,
            columns,
        };
    }
}
</script>

import { Component, ViewChild, ElementRef, AfterViewInit } 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('YTFjNjMwMGM2OWVlZTYzMzc5MTBjOTQ4MTNmOTg5NzhkODk1MDg4ZTI0ZjljYmFlYTFjNDA4N2IzNjkxMzc5ZGFmYTYxYTgzNzBlMjQ2NTk2ZTgyYWY0NDJiNWJkZDRiYWUyNTI2YzAyOGNhYzIwODhhZmU5MDI3Yzc1NjZhN2MsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azFPRGt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

@Component({
    standalone: true,
    selector: "app-root",
    template: `<div #spreadsheet></div>`
})
export class AppComponent implements AfterViewInit {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngAfterViewInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            worksheets: [{
                data: [
                    ['US', 'Wholemeal', 'Yes', '2019-02-12'],
                    ['CA;US;GB', 'Breakfast Cereals', 'Yes', '2019-03-01'],
                    ['CA;BR', 'Grains', 'No', '2018-11-10'],
                    ['BR', 'Pasta', 'Yes', '2019-01-12'],
                ],
                columns: [
                    { type:'dropdown', title:'Product Origin', url:'/jspreadsheet/countries', autocomplete:true, multiple:true },
                    { type:'text', title:'Description' },
                    { type:'dropdown', title:'Stock', source:['No','Yes'], options:{ newOptions:true } },
                    { type:'calendar', title:'Best before', format:'DD/MM/YYYY' },
                ],
            }]
        });
    }
}

Conditional Dropdown

The example below demonstrates how the second column's options depend on the selection in the first column.

<html>
<script src="https://jspreadsheet.com/v11/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v11/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

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

<script>
let filterOptions = function(o, cell, x, y, value, config) {
    let v = o.getValueFromCoords(x - 1, y);

    if (v == 1) {
        config.source = ['Apples','Bananas','Oranges'];
    } else if (v == 2) {
        config.source = ['Carrots'];
    } else {
        config.source = ['Apples','Bananas','Carrots','Oranges','Cheese'];
    }

    return config;
}

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

// Create a new spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        data: [
            [3, 'Cheese', true],
            [1, 'Apples', true],
            [2, 'Carrots', true],
            [1, 'Oranges', false],
        ],
        columns: [
            {
                type:'dropdown',
                title:'Category',
                width:'300',
                source:[
                    { 'id':'1', 'name':'Fruits' },
                    { 'id':'2', 'name':'Legumes' },
                    { 'id':'3', 'name':'General Food' }
                ]
            },
            {
                type:'dropdown',
                title:'Food',
                width:'200',
                source: [ 'Apples','Bananas','Carrots','Oranges','Cheese' ],
                filterOptions: filterOptions
            },
            {
                type:'checkbox',
                title:'Buy',
                width:'100'
            }
        ]
    }],
    onchange: function(worksheet, cell, c, r, value) {
        if (c == 0) {
            let columnName = jspreadsheet.helpers.getColumnNameFromCoords(c + 1, r);
            worksheet.setValue(columnName, '');
        }
    }
});
</script>
</html>

import React, { useRef } from "react";
import { Spreadsheet, Worksheet } 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('YTFjNjMwMGM2OWVlZTYzMzc5MTBjOTQ4MTNmOTg5NzhkODk1MDg4ZTI0ZjljYmFlYTFjNDA4N2IzNjkxMzc5ZGFmYTYxYTgzNzBlMjQ2NTk2ZTgyYWY0NDJiNWJkZDRiYWUyNTI2YzAyOGNhYzIwODhhZmU5MDI3Yzc1NjZhN2MsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azFPRGt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

const filterOptions = (o, cell, x, y, value, config) => {
    let category = o.getValueFromCoords(x - 1, y);

    if (category == 1) {
        config.source = ['Apples','Bananas','Oranges'];
    } else if (category == 2) {
        config.source = ['Carrots'];
    } else {
        config.source = ['Apples','Bananas','Carrots','Oranges','Cheese'];
    }

    return config;
}

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Data
    const data = [
        [3, 'Cheese', true],
        [1, 'Apples', true],
        [2, 'Carrots', true],
        [1, 'Oranges', false],
    ]
    // Columns
    const columns = [
        {
            type:'dropdown',
            title:'Category',
            width:'300',
            source:[
                { 'id':'1', 'name':'Fruits' },
                { 'id':'2', 'name':'Legumes' },
                { 'id':'3', 'name':'General Food' }
            ]
        },
        {
            type:'dropdown',
            title:'Food',
            width:'200',
            source: [ 'Apples','Bananas','Carrots','Oranges','Cheese' ],
            filterOptions: filterOptions
        },
        {
            type:'checkbox',
            title:'Buy',
            width:'100'
        }
    ]
    // Event
    const onchange = (worksheet, cell, c, r, value) => {
        if (c == 0) {
            let columnName = jspreadsheet.helpers.getColumnNameFromCoords(c + 1, r);
            worksheet.setValue(columnName, '');
        }
    }

    // Render data grid component
    return (
        <Spreadsheet ref={spreadsheet} onchange={onchange}>
            <Worksheet data={data} columns={columns} />
        </Spreadsheet>
    );
}

<template>
    <Spreadsheet ref="spreadsheet" :onchange="onchange">
        <Worksheet :data="data" :columns="columns" />
    </Spreadsheet>
</template>

<script>
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue";
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('YTFjNjMwMGM2OWVlZTYzMzc5MTBjOTQ4MTNmOTg5NzhkODk1MDg4ZTI0ZjljYmFlYTFjNDA4N2IzNjkxMzc5ZGFmYTYxYTgzNzBlMjQ2NTk2ZTgyYWY0NDJiNWJkZDRiYWUyNTI2YzAyOGNhYzIwODhhZmU5MDI3Yzc1NjZhN2MsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azFPRGt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

const filterOptions = (o, cell, x, y, value, config) => {
    let category = o.getValueFromCoords(x - 1, y);

    if (category == 1) {
        config.source = ['Apples','Bananas','Oranges'];
    } else if (category == 2) {
        config.source = ['Carrots'];
    } else {
        config.source = ['Apples','Bananas','Carrots','Oranges','Cheese'];
    }

    return config;
}

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    methods: {
        onchange(worksheet, cell, c, r, value) {
            if (c == 0) {
                let columnName = jspreadsheet.helpers.getColumnNameFromCoords(c + 1, r);
                worksheet.setValue(columnName, '');
            }
        }
    },
    data() {
        // Data
        const data = [
            [3, 'Cheese', true],
            [1, 'Apples', true],
            [2, 'Carrots', true],
            [1, 'Oranges', false],
        ]
        // Columns
        const columns = [
            {
                type:'dropdown',
                title:'Category',
                width:'300',
                source:[
                    { 'id':'1', 'name':'Fruits' },
                    { 'id':'2', 'name':'Legumes' },
                    { 'id':'3', 'name':'General Food' }
                ]
            },
            {
                type:'dropdown',
                title:'Food',
                width:'200',
                source: [ 'Apples','Bananas','Carrots','Oranges','Cheese' ],
                filterOptions: filterOptions
            },
            {
                type:'checkbox',
                title:'Buy',
                width:'100'
            }
        ]

        return {
            data,
            columns
        };
    }
}
</script>

import { Component, ViewChild, ElementRef, AfterViewInit } 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('YTFjNjMwMGM2OWVlZTYzMzc5MTBjOTQ4MTNmOTg5NzhkODk1MDg4ZTI0ZjljYmFlYTFjNDA4N2IzNjkxMzc5ZGFmYTYxYTgzNzBlMjQ2NTk2ZTgyYWY0NDJiNWJkZDRiYWUyNTI2YzAyOGNhYzIwODhhZmU5MDI3Yzc1NjZhN2MsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azFPRGt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

// Filter options
const filterOptions = function(o: any, cell: any, x: any, y: any, value: any, config: any) {
    let category = o.getValueFromCoords(x - 1, y);

    if (category == 1) {
        config.source = ['Apples','Bananas','Oranges'];
    } else if (category == 2) {
        config.source = ['Carrots'];
    } else {
        config.source = ['Apples','Bananas','Carrots','Oranges','Cheese'];
    }

    return config;
}

// Create component
@Component({
    selector: "app-root",
    template: `<div #spreadsheet></div>`,
})
export class AppComponent implements AfterViewInit {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngAfterViewInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            worksheets: [{
                data: [
                    [3, 'Cheese', true],
                    [1, 'Apples', true],
                    [2, 'Carrots', true],
                    [1, 'Oranges', false],
                ],
                columns: [
                    {
                        type:'dropdown',
                        title:'Category',
                        source:[
                            { 'id':'1', 'name':'Fruits' },
                            { 'id':'2', 'name':'Legumes' },
                            { 'id':'3', 'name':'General Food' }
                        ]
                    },
                    {
                        type:'dropdown',
                        title:'Food',
                        source: [ 'Apples','Bananas','Carrots','Oranges','Cheese' ],
                        filterOptions: filterOptions
                    },
                    {
                        type:'checkbox',
                        title:'Buy',
                    }
                ]
            }],
            onchange: function(worksheet, cell, c, r: any, value) {
                if (c == 0) {
                    let columnName = jspreadsheet.helpers.getColumnNameFromCoords(c + 1, r);
                    worksheet.setValue(columnName, '');
                }
            }
        });
    }
}

Remote Search

This example demonstrates a column with remote search functionality that retrieves options from a remote server.

<html>
<script src="https://jspreadsheet.com/v11/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v11/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

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

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

// Create a new spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        worksheetName: 'Remote search',
        data: [
            ['Richard', 'Ocado'],
            ['Jorge', 'Tesco'],
        ],
        columns: [
            {
                type:'dropdown',
                width:'200px',
                title:'Contact',
                source:['Richard','Jorge'],
                options: { url: '/jspreadsheet/sample', remoteSearch:true, autocomplete:true }
            },
            {
                type:'text',
                title: 'Company',
                width: '300px'
            }
        ],
    }]
});
</script>
</html>

import React, { useRef } from "react";
import { Spreadsheet, Worksheet } 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('YTFjNjMwMGM2OWVlZTYzMzc5MTBjOTQ4MTNmOTg5NzhkODk1MDg4ZTI0ZjljYmFlYTFjNDA4N2IzNjkxMzc5ZGFmYTYxYTgzNzBlMjQ2NTk2ZTgyYWY0NDJiNWJkZDRiYWUyNTI2YzAyOGNhYzIwODhhZmU5MDI3Yzc1NjZhN2MsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azFPRGt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Data
    const data = [
        ['Richard', 'Ocado'],
        ['Jorge', 'Tesco'],
    ]
    // Columns
    const columns = [
        {
            type:'dropdown',
            width:'200px',
            title:'Contact',
            source:['Richard','Jorge'],
            options: { url: '/jspreadsheet/sample', remoteSearch: true, autocomplete: true }
        },
        {
            type:'text',
            title: 'Company',
            width: '300px'
        }
    ]

    // Render data grid component
    return (
        <Spreadsheet ref={spreadsheet}>
            <Worksheet data={data} columns={columns} worksheetName={"Remote search"} />
        </Spreadsheet>
    );
}

<template>
    <Spreadsheet ref="spreadsheet">
        <Worksheet :data="data" :columns="columns" worksheetName="Remote search" />
    </Spreadsheet>
</template>

<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
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('YTFjNjMwMGM2OWVlZTYzMzc5MTBjOTQ4MTNmOTg5NzhkODk1MDg4ZTI0ZjljYmFlYTFjNDA4N2IzNjkxMzc5ZGFmYTYxYTgzNzBlMjQ2NTk2ZTgyYWY0NDJiNWJkZDRiYWUyNTI2YzAyOGNhYzIwODhhZmU5MDI3Yzc1NjZhN2MsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azFPRGt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    data() {
        // Data
        const data = [
            ['Richard', 'Ocado'],
            ['Jorge', 'Tesco'],
        ]
        // Columns
        const columns = [
            {
                type:'dropdown',
                width:'200px',
                title:'Contact',
                source:['Richard','Jorge'],
                options: { url: '/jspreadsheet/sample', remoteSearch:true, autocomplete:true }
            },
            {
                type:'text',
                title: 'Company',
                width: '300px'
            }
        ];

        return {
            data,
            columns,
        };
    }
}
</script>

import { Component, ViewChild, ElementRef, AfterViewInit } 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('YTFjNjMwMGM2OWVlZTYzMzc5MTBjOTQ4MTNmOTg5NzhkODk1MDg4ZTI0ZjljYmFlYTFjNDA4N2IzNjkxMzc5ZGFmYTYxYTgzNzBlMjQ2NTk2ZTgyYWY0NDJiNWJkZDRiYWUyNTI2YzAyOGNhYzIwODhhZmU5MDI3Yzc1NjZhN2MsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azFPRGt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

@Component({
    standalone: true,
    selector: "app-root",
    template: `<div #spreadsheet></div>`
})
export class AppComponent implements AfterViewInit {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngAfterViewInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            worksheets: [{
                worksheetName: 'Remote search',
                data: [
                    ['Richard', 'Ocado'],
                    ['Jorge', 'Tesco'],
                ],
                columns: [
                    {
                        type:'dropdown',
                        title:'Contact',
                        source:['Richard','Jorge'],
                        options: { url: '/jspreadsheet/sample', remoteSearch:true, autocomplete:true }
                    },
                    {
                        type:'text',
                        title: 'Company',
                    }
                ],
            }]
        });
    }
}

Groups, Images, and Render Options

Enhance the user experience with a responsive data picker.

<html>
<script src="https://jspreadsheet.com/v11/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v11/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

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

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

// Create a new spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        data: [
            [1, 'Morning'],
            [2, 'Morning'],
            [3, 'Afternoon'],
            [3, 'Evening'],
        ],
        columns: [
            {
                type:'dropdown',
                title:'Category',
                width:'300',
                source:[
                    { id:'1', name:'Jorge', image:'img/2.jpg', title:'Admin', group:'Secretary' },
                    { id:'2', name:'Cosme Sergio', image:'img/2.jpg', title:'Teacher', group:'Docent' },
                    { id:'3', name:'Rose Mary', image:'img/3.png', title:'Teacher', group:'Docent' },
                    { id:'4', name:'Fernanda', image:'img/3.png', title:'Admin', group:'Secretary' },
                    { id:'5', name:'Roger', image:'img/3.png', title:'Teacher', group:'Docent' },
                ]
            },
            {
                type:'dropdown',
                title:'Working hours',
                width:'200',
                source:['Morning','Afternoon','Evening'],
                options: { type:'picker' },
            },
        ],
    }]
});
</script>
</html>

import React, { useRef } from "react";
import { Spreadsheet, Worksheet } 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('YTFjNjMwMGM2OWVlZTYzMzc5MTBjOTQ4MTNmOTg5NzhkODk1MDg4ZTI0ZjljYmFlYTFjNDA4N2IzNjkxMzc5ZGFmYTYxYTgzNzBlMjQ2NTk2ZTgyYWY0NDJiNWJkZDRiYWUyNTI2YzAyOGNhYzIwODhhZmU5MDI3Yzc1NjZhN2MsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azFPRGt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Data
    const data = [
        [1, 'Morning'],
        [2, 'Morning'],
        [3, 'Afternoon'],
        [3, 'Evening'],
    ];
    // Columns
    const columns = [
        {
            type:'dropdown',
            title:'Category',
            width:'300',
            source:[
                { id:'1', name:'Jorge', image:'img/2.jpg', title:'Admin', group:'Secretary' },
                { id:'2', name:'Cosme Sergio', image:'img/2.jpg', title:'Teacher', group:'Docent' },
                { id:'3', name:'Rose Mary', image:'img/3.png', title:'Teacher', group:'Docent' },
                { id:'4', name:'Fernanda', image:'img/3.png', title:'Admin', group:'Secretary' },
                { id:'5', name:'Roger', image:'img/3.png', title:'Teacher', group:'Docent' },
            ]
        },
        {
            type:'dropdown',
            title:'Working hours',
            width:'200',
            source:['Morning','Afternoon','Evening'],
            options: { type:'picker' },
        }
    ];

    // Render data grid component
    return (
        <Spreadsheet ref={spreadsheet}>
            <Worksheet data={data} columns={columns} />
        </Spreadsheet>
    );
}

<template>
    <Spreadsheet ref="spreadsheet">
        <Worksheet :data="data" :columns="columns" />
    </Spreadsheet>
</template>

<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
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('YTFjNjMwMGM2OWVlZTYzMzc5MTBjOTQ4MTNmOTg5NzhkODk1MDg4ZTI0ZjljYmFlYTFjNDA4N2IzNjkxMzc5ZGFmYTYxYTgzNzBlMjQ2NTk2ZTgyYWY0NDJiNWJkZDRiYWUyNTI2YzAyOGNhYzIwODhhZmU5MDI3Yzc1NjZhN2MsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azFPRGt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    data() {
        // Data
        const data = [
            [1, 'Morning'],
            [2, 'Morning'],
            [3, 'Afternoon'],
            [3, 'Evening'],
        ];
        // Columns
        const columns = [
            {
                type:'dropdown',
                title:'Category',
                width:'300',
                source:[
                    { id:'1', name:'Jorge', image:'img/2.jpg', title:'Admin', group:'Secretary' },
                    { id:'2', name:'Cosme Sergio', image:'img/2.jpg', title:'Teacher', group:'Docent' },
                    { id:'3', name:'Rose Mary', image:'img/3.png', title:'Teacher', group:'Docent' },
                    { id:'4', name:'Fernanda', image:'img/3.png', title:'Admin', group:'Secretary' },
                    { id:'5', name:'Roger', image:'img/3.png', title:'Teacher', group:'Docent' },
                ]
            },
            {
                type:'dropdown',
                title:'Working hours',
                width:'200',
                source:['Morning','Afternoon','Evening'],
                options: { type:'picker' },
            }
        ];

        return {
            data,
            columns,
        };
    }
}
</script>

import { Component, ViewChild, ElementRef, AfterViewInit } 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('YTFjNjMwMGM2OWVlZTYzMzc5MTBjOTQ4MTNmOTg5NzhkODk1MDg4ZTI0ZjljYmFlYTFjNDA4N2IzNjkxMzc5ZGFmYTYxYTgzNzBlMjQ2NTk2ZTgyYWY0NDJiNWJkZDRiYWUyNTI2YzAyOGNhYzIwODhhZmU5MDI3Yzc1NjZhN2MsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azFPRGt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

@Component({
    standalone: true,
    selector: "app-root",
    template: `<div #spreadsheet></div>`
})
export class AppComponent implements AfterViewInit {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngAfterViewInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            worksheets: [{
                data: [
                    [1, 'Morning'],
                    [2, 'Morning'],
                    [3, 'Afternoon'],
                    [3, 'Evening'],
                ],
                columns: [
                    {
                        type:'dropdown',
                        title:'Category',
                        source:[
                            { id:'1', name:'Jorge', image:'img/2.jpg', title:'Admin', group:'Secretary' },
                            { id:'2', name:'Cosme Sergio', image:'img/2.jpg', title:'Teacher', group:'Docent' },
                            { id:'3', name:'Rose Mary', image:'img/3.png', title:'Teacher', group:'Docent' },
                            { id:'4', name:'Fernanda', image:'img/3.png', title:'Admin', group:'Secretary' },
                            { id:'5', name:'Roger', image:'img/3.png', title:'Teacher', group:'Docent' },
                        ]
                    },
                    {
                        type:'dropdown',
                        title:'Working hours',
                        source:['Morning','Afternoon','Evening'],
                        options: { type:'picker' },
                    },
                ],
            }]
        });
    }
}

New Options

Allow users to add new options dynamically.

<html>
<script src="https://jspreadsheet.com/v11/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v11/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

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

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

// Create a new spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        worksheetName: 'New options',
        data: [
            [1, 'Beatles'],
            [2, 'Beatles'],
            [3, 'Beatles'],
            [4, 'Beatles'],
        ],
        columns: [
            {
                type: 'dropdown',
                title: 'Name',
                width: '300px',
                source: [
                    { id:'1', name:'Paul' },
                    { id:'2', name:'Ringo' },
                    { id:'3', name:'George' },
                    { id:'4', name:'John' },
                ],
                options: { newOptions: true }
            },
            {
                type:'dropdown',
                title:'Band',
                width:'200px',
                source: ['Beatles'],
            },
        ],
    }]
});
</script>
</html>

import React, { useRef } from "react";
import { Spreadsheet, Worksheet } 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('YTFjNjMwMGM2OWVlZTYzMzc5MTBjOTQ4MTNmOTg5NzhkODk1MDg4ZTI0ZjljYmFlYTFjNDA4N2IzNjkxMzc5ZGFmYTYxYTgzNzBlMjQ2NTk2ZTgyYWY0NDJiNWJkZDRiYWUyNTI2YzAyOGNhYzIwODhhZmU5MDI3Yzc1NjZhN2MsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azFPRGt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Data
    const data = [
        [1, 'Beatles'],
        [2, 'Beatles'],
        [3, 'Beatles'],
        [4, 'Beatles'],
    ];
    // Columns
    const columns = [
        {
            type: 'dropdown',
            title: 'Name',
            width: '300px',
            source: [
                { id:'1', name:'Paul' },
                { id:'2', name:'Ringo' },
                { id:'3', name:'George' },
                { id:'4', name:'John' },
            ],
            options: { newOptions: true }
        },
        {
            type:'dropdown',
            title:'Band',
            width:'200px',
            source: ['Beatles'],
        }
    ];

    // Render data grid component
    return (
        <Spreadsheet ref={spreadsheet}>
            <Worksheet data={data} columns={columns} worksheetName={"New options"} />
        </Spreadsheet>
    );
}

<template>
    <Spreadsheet ref="spreadsheet">
        <Worksheet :data="data" :columns="columns" worksheetName="New options" />
    </Spreadsheet>
</template>

<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
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('YTFjNjMwMGM2OWVlZTYzMzc5MTBjOTQ4MTNmOTg5NzhkODk1MDg4ZTI0ZjljYmFlYTFjNDA4N2IzNjkxMzc5ZGFmYTYxYTgzNzBlMjQ2NTk2ZTgyYWY0NDJiNWJkZDRiYWUyNTI2YzAyOGNhYzIwODhhZmU5MDI3Yzc1NjZhN2MsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azFPRGt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    data() {
        // Data
        const data = [
            [1, 'Beatles'],
            [2, 'Beatles'],
            [3, 'Beatles'],
            [4, 'Beatles'],
        ];
        // Columns
        const columns = [
            {
                type: 'dropdown',
                title: 'Name',
                width: '300px',
                source: [
                    { id:'1', name:'Paul' },
                    { id:'2', name:'Ringo' },
                    { id:'3', name:'George' },
                    { id:'4', name:'John' },
                ],
                options: { newOptions: true }
            },
            {
                type:'dropdown',
                title:'Band',
                width:'200px',
                source: ['Beatles'],
            }
        ];

        return {
            data,
            columns,
        };
    }
}
</script>

import { Component, ViewChild, ElementRef, AfterViewInit } 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('YTFjNjMwMGM2OWVlZTYzMzc5MTBjOTQ4MTNmOTg5NzhkODk1MDg4ZTI0ZjljYmFlYTFjNDA4N2IzNjkxMzc5ZGFmYTYxYTgzNzBlMjQ2NTk2ZTgyYWY0NDJiNWJkZDRiYWUyNTI2YzAyOGNhYzIwODhhZmU5MDI3Yzc1NjZhN2MsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azFPRGt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

@Component({
    standalone: true,
    selector: "app-root",
    template: `<div #spreadsheet></div>`
})
export class AppComponent implements AfterViewInit {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngAfterViewInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            worksheets: [{
                worksheetName: 'New options',
                data: [
                    [1, 'Beatles'],
                    [2, 'Beatles'],
                    [3, 'Beatles'],
                    [4, 'Beatles'],
                ],
                columns: [
                    {
                        type: 'dropdown',
                        title: 'Name',
                        source: [
                            { id:'1', name:'Paul' },
                            { id:'2', name:'Ringo' },
                            { id:'3', name:'George' },
                            { id:'4', name:'John' },
                        ],
                        options: { newOptions: true }
                    },
                    {
                        type:'dropdown',
                        title:'Band',
                        source: ['Beatles'],
                    },
                ],
            }]
        });
    }
}

Using the Legacy Dropdown Editor

If you prefer to use the previous jSuites dropdown editor, you can load it using the @jspreadsheet/editors package.

Installation

npm install @jspreadsheet/editors@v11

Implementation

You can then load the editor as follows:

<html>
<script src="https://jspreadsheet.com/v11/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v11/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/editors@v11/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jspreadsheet/editors@v11/dist/style.min.css" type="text/css" />

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

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

// Register the old dropdown editor
jspreadsheet.editors['dropdown-old'] = editors.dropdown;

// Create worksheet
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        minDimensions: [4, 4],
        columns: [
            { type: 'dropdown-old', source: ['Apple', 'Banana', 'Orange'] },
        ]
    }]
});
</script>
</html>

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

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

// Register the old dropdown editor
jspreadsheet.editors['dropdown-old'] = editors.dropdown;

export default function App() {
    const spreadsheet = useRef();

    const columns = [
        { type: 'dropdown-old', source: ['Apple', 'Banana', 'Orange'] },
        { type: 'dropdown-old', source: ['Red', 'Green', 'Blue'] },
        { type: 'dropdown-old', source: ['Small', 'Medium', 'Large'] },
        { type: 'dropdown-old', source: ['Yes', 'No'] },
    ];

    return (
        <Spreadsheet ref={spreadsheet}>
            <Worksheet columns={columns} minDimensions={[4, 4]} />
        </Spreadsheet>
    );
}

<template>
    <Spreadsheet ref="spreadsheet">
        <Worksheet :columns="columns" :minDimensions="[4, 4]" />
    </Spreadsheet>
</template>

<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
import editors from "@jspreadsheet/editors";

import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
import "@jspreadsheet/editors/dist/style.css";

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

// Register the old dropdown editor
jspreadsheet.editors['dropdown-old'] = editors.dropdown;

export default {
    components: { Spreadsheet, Worksheet },
    data() {
        return {
            columns: [
                { type: 'dropdown-old', source: ['Apple', 'Banana', 'Orange'] },
                { type: 'dropdown-old', source: ['Red', 'Green', 'Blue'] },
                { type: 'dropdown-old', source: ['Small', 'Medium', 'Large'] },
                { type: 'dropdown-old', source: ['Yes', 'No'] },
            ]
        };
    }
};
</script>

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

import "jspreadsheet/dist/jspreadsheet.css";
import "jsuites/dist/jsuites.css";
import "@jspreadsheet/editors/dist/style.css";

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

// Register the old dropdown editor
jspreadsheet.editors['dropdown-old'] = editors.dropdown;

@Component({
    standalone: true,
    selector: "app-root",
    template: `<div #spreadsheet></div>`,
})
export class AppComponent implements AfterViewInit {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    worksheets: jspreadsheet.worksheetInstance[];

    ngAfterViewInit() {
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            worksheets: [{
                minDimensions: [4, 4],
                columns: [
                    { type: 'dropdown-old', source: ['Apple', 'Banana', 'Orange'] },
                    { type: 'dropdown-old', source: ['Red', 'Green', 'Blue'] },
                    { type: 'dropdown-old', source: ['Small', 'Medium', 'Large'] },
                    { type: 'dropdown-old', source: ['Yes', 'No'] },
                ]
            }]
        });
    }
}

Dynamic Source from Cell Range

The dynamicSource property allows you to populate dropdown options from values in a cell range.

<html>
<script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v12/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

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

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

// Create a new spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        worksheetName: 'Dynamic Source Example',
        data: [
            ['Available Colors', 'Selected Color', 'Available Sizes', 'Selected Size'],
            ['Red', '', 'Small', ''],
            ['Green', '', 'Medium', ''],
            ['Blue', '', 'Large', ''],
            ['Yellow', '', 'Extra Large', ''],
            ['Purple', '', '', ''],
        ],
        columns: [
            { type: 'text', title: 'Available Colors', width: '150px' },
            {
                type: 'dropdown',
                title: 'Selected Color',
                width: '150px',
                dynamicSource: 'A2:A6' // Dropdown options come from cells A2 to A6
            },
            { type: 'text', title: 'Available Sizes', width: '150px' },
            {
                type: 'dropdown',
                title: 'Selected Size',
                width: '150px',
                dynamicSource: 'C2:C5' // Dropdown options come from cells C2 to C5
            },
        ],
    }]
});
</script>
</html>

import React, { useRef } from "react";
import { Spreadsheet, Worksheet } 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('YTFjNjMwMGM2OWVlZTYzMzc5MTBjOTQ4MTNmOTg5NzhkODk1MDg4ZTI0ZjljYmFlYTFjNDA4N2IzNjkxMzc5ZGFmYTYxYTgzNzBlMjQ2NTk2ZTgyYWY0NDJiNWJkZDRiYWUyNTI2YzAyOGNhYzIwODhhZmU5MDI3Yzc1NjZhN2MsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azFPRGt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Data
    const data = [
        ['Available Colors', 'Selected Color', 'Available Sizes', 'Selected Size'],
        ['Red', '', 'Small', ''],
        ['Green', '', 'Medium', ''],
        ['Blue', '', 'Large', ''],
        ['Yellow', '', 'Extra Large', ''],
        ['Purple', '', '', ''],
    ];
    // Columns
    const columns = [
        { type: 'text', title: 'Available Colors', width: '150px' },
        {
            type: 'dropdown',
            title: 'Selected Color',
            width: '150px',
            dynamicSource: 'A2:A6' // Dropdown options come from cells A2 to A6
        },
        { type: 'text', title: 'Available Sizes', width: '150px' },
        {
            type: 'dropdown',
            title: 'Selected Size',
            width: '150px',
            dynamicSource: 'C2:C5' // Dropdown options come from cells C2 to C5
        },
    ];

    // Render data grid component
    return (
        <Spreadsheet ref={spreadsheet}>
            <Worksheet data={data} columns={columns} worksheetName={"Dynamic Source Example"} />
        </Spreadsheet>
    );
}

<template>
    <Spreadsheet ref="spreadsheet">
        <Worksheet :data="data" :columns="columns" worksheetName="Dynamic Source Example" />
    </Spreadsheet>
</template>

<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
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('YTFjNjMwMGM2OWVlZTYzMzc5MTBjOTQ4MTNmOTg5NzhkODk1MDg4ZTI0ZjljYmFlYTFjNDA4N2IzNjkxMzc5ZGFmYTYxYTgzNzBlMjQ2NTk2ZTgyYWY0NDJiNWJkZDRiYWUyNTI2YzAyOGNhYzIwODhhZmU5MDI3Yzc1NjZhN2MsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azFPRGt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    data() {
        // Data
        const data = [
            ['Available Colors', 'Selected Color', 'Available Sizes', 'Selected Size'],
            ['Red', '', 'Small', ''],
            ['Green', '', 'Medium', ''],
            ['Blue', '', 'Large', ''],
            ['Yellow', '', 'Extra Large', ''],
            ['Purple', '', '', ''],
        ];
        // Columns
        const columns = [
            { type: 'text', title: 'Available Colors', width: '150px' },
            {
                type: 'dropdown',
                title: 'Selected Color',
                width: '150px',
                dynamicSource: 'A2:A6' // Dropdown options come from cells A2 to A6
            },
            { type: 'text', title: 'Available Sizes', width: '150px' },
            {
                type: 'dropdown',
                title: 'Selected Size',
                width: '150px',
                dynamicSource: 'C2:C5' // Dropdown options come from cells C2 to C5
            },
        ];

        return {
            data,
            columns,
        };
    }
}
</script>

import { Component, ViewChild, ElementRef, AfterViewInit } 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('YTFjNjMwMGM2OWVlZTYzMzc5MTBjOTQ4MTNmOTg5NzhkODk1MDg4ZTI0ZjljYmFlYTFjNDA4N2IzNjkxMzc5ZGFmYTYxYTgzNzBlMjQ2NTk2ZTgyYWY0NDJiNWJkZDRiYWUyNTI2YzAyOGNhYzIwODhhZmU5MDI3Yzc1NjZhN2MsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azFPRGt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

@Component({
    standalone: true,
    selector: "app-root",
    template: `<div #spreadsheet></div>`
})
export class AppComponent implements AfterViewInit {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngAfterViewInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            worksheets: [{
                worksheetName: 'Dynamic Source Example',
                data: [
                    ['Available Colors', 'Selected Color', 'Available Sizes', 'Selected Size'],
                    ['Red', '', 'Small', ''],
                    ['Green', '', 'Medium', ''],
                    ['Blue', '', 'Large', ''],
                    ['Yellow', '', 'Extra Large', ''],
                    ['Purple', '', '', ''],
                ],
                columns: [
                    { type: 'text', title: 'Available Colors', width: '150px' },
                    {
                        type: 'dropdown',
                        title: 'Selected Color',
                        width: '150px',
                        dynamicSource: 'A2:A6' // Dropdown options come from cells A2 to A6
                    },
                    { type: 'text', title: 'Available Sizes', width: '150px' },
                    {
                        type: 'dropdown',
                        title: 'Selected Size',
                        width: '150px',
                        dynamicSource: 'C2:C5' // Dropdown options come from cells C2 to C5
                    },
                ],
            }]
        });
    }
}

Edit this page on GitHub