JavaScript Dropdown

Jspreadsheet provides a versatile dropdown column type with features like:

Dropdowns from arrays, JSON, or key-value objects
Multiple selection and searchable options
Custom rendering styles, including icons and grouped options

Refer to the official JavaScript Dropdown documentation on the jSuites website.

Differences in the Pro Version

The Pro version offers conditional dropdowns, dynamic dropdowns from ranges (e.g., Sheet1!A1:A4), and additional advanced features.

Learn more

Documentation

Dropdown Settings

The Jspreadsheet CE supports various attributes for the dropdown column type.

Property	Description
`source: Items[]`	Array of items to populate the dropdown.
`url: String`	Fetch dropdown data from a remote URL.
`multiple: Boolean`	Enable selection of multiple options.
`delimiter: String`	Define the delimiter for multiple selections. Default: `';'`.
`autocomplete: Boolean`	Enable autocomplete for the dropdown.

Extended Options

Extended options can be defined using the options property within the column.

Property	Description
`type: String`	Render type: `default` \| `picker` \| `searchbar`.
`placeholder: String`	Placeholder text for instructions.

Properties of an Item

An object with the following attributes defines each option in the dropdown:

Property	Description
`id: mixed`	Key of the item.
`value: string`	Value of the item.
`title: string`	Description of the item.
`image: string`	Icon for the item.
`group: string`	Name of the group the item belongs to.
`synonym: array`	Keywords to help find the item.
`disabled: boolean`	Indicates if the item is disabled.
`color: number`	Color associated with the item.
`icon: string`	Material icon keyword.
`tooltip: string`	Instructions shown on mouse over.

Examples

Autocomplete and Multiple Options

The example below demonstrates the first column with autocomplete enabled and multiple options active.

<html> <script src="https://bossanova.uk/jspreadsheet/v5/jspreadsheet.js"></script> <script src="https://jsuites.net/v5/jsuites.js"></script> <link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v5/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" /> <div id="spreadsheet"></div> <script> // 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:'/jspreadsheet/countries', autocomplete:true, multiple:true }, { type:'text', width:'100px', title:'Description' }, { type:'dropdown', width:'100px', title:'Stock', source:['No','Yes'] }, { type:'calendar', width:'100px', title:'Best before', format:'DD/MM/YYYY' }, ], }] }); </script> </html>

import React, { useRef } from "react"; import { Spreadsheet, Worksheet } from "@jspreadsheet-ce/react"; import "jsuites/dist/jsuites.css"; import "jspreadsheet-ce/dist/jspreadsheet.css"; 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:'/jspreadsheet/countries', autocomplete:true, multiple:true }, { type:'text', width:'200px', title:'Description' }, { type:'dropdown', width:'150px', title:'Stock', source:['No','Yes'] }, { 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 setup> import { ref } from 'vue' import { Spreadsheet, Worksheet } from "@jspreadsheet-ce/vue"; import "jsuites/dist/jsuites.css"; import "jspreadsheet-ce/dist/spreadsheet.css"; // Data const data = ref([ ['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 = ref([ { type:'dropdown', width:'300px', title: 'Product Origin', url:'/jspreadsheet/countries', autocomplete:true, multiple:true }, { type:'text', width:'200px', title:'Description' }, { type:'dropdown', width:'150px', title:'Stock', source:['No','Yes'] }, { type:'calendar', width:'150px', title:'Best before', format:'DD/MM/YYYY' } ]); // Optional: spreadsheet ref to match template const spreadsheet = ref(null); </script>

import { Component, ViewChild, ElementRef } from "@angular/core"; import jspreadsheet from "jspreadsheet-ce"; import "jsuites/dist/jsuites.css"; import "jspreadsheet-ce/dist/jspreadsheet.css"; @Component({ standalone: true, 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, { 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:'300px', title:'Product Origin', url:'/jspreadsheet/countries', autocomplete:true, multiple:true }, { type:'text', width:'200px', title:'Description' }, { type:'dropdown', width:'150px', title:'Stock', source:['No','Yes'] }, { type:'calendar', width:'150px', title:'Best before', format:'DD/MM/YYYY' }, ], }] }); } }

Group, Images, and Render Options

Enhance the user experience with a responsive and visually enriched data picker.

<html> <script src="https://bossanova.uk/jspreadsheet/v5/jspreadsheet.js"></script> <script src="https://jsuites.net/v5/jsuites.js"></script> <link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v5/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" /> <div id="spreadsheet"></div> <script> // 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-ce/react"; import "jsuites/dist/jsuites.css"; import "jspreadsheet/dist/jspreadsheet.css"; 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 setup> import { ref } from 'vue' import { Spreadsheet, Worksheet } from "@jspreadsheet-ce/vue"; import "jsuites/dist/jsuites.css"; import "jspreadsheet-ce/dist/spreadsheet.css"; // Data const data = ref([ [1, 'Morning'], [2, 'Morning'], [3, 'Afternoon'], [3, 'Evening'], ]); // Columns const columns = ref([ { 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' }, } ]); // Optional: spreadsheet ref to match template const spreadsheet = ref(null); </script>

import { Component, ViewChild, ElementRef } from "@angular/core"; import jspreadsheet from "jspreadsheet-cw"; import "jsuites/dist/jsuites.css"; import "jspreadsheet-cw/dist/jspreadsheet.css"; @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, { 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' }, }, ], }] }); } }