Multiselect

A Multiselect is a user interface control element that allows users to select one or more options from a set of options.

Playground

Live Editor

<ProvenanceMultiselect 
  id="jsx-provenance-multiselect"
  name="jsx-provenance-multiselect"
  options={[
    { label: 'New York', value: 'New York' },
    { label: 'Rome', value: 'Rome' },
    { label: 'London', value: 'London' },
    { label: 'Istanbul', value: 'Istanbul' },
    { label: 'Paris', value: 'Paris' }
  ]}
  selected={[{ label: 'New York', value: 'New York' }]}
  optionLabel="label"
  dataKey="value"
  freeze={false}
  visualize={true}
  provenanceChange={console.log} // hardcoded
  selectedChange={console.log} // hardcoded
/>

Result

Loading...

info

The above example uses React JSX and Web Components. See corresponding (static) examples for Angular and Web Components below.

multiselect.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'multiselect-root',
    templateUrl: './multiselect.component.html',
    styleUrls: ['./multiselect.component.css']
})
export class MultiselectComponent {
    data = [
        { label: 'New York', value: 'New York' },
        { label: 'Rome', value: 'Rome' },
        { label: 'London', value: 'London' },
        { label: 'Istanbul', value: 'Istanbul' },
        { label: 'Paris', value: 'Paris' }
    ];
    selected = data.slice(0, 1);
    freeze = false;
    visualize = true;

    provenanceChange(event) {
        console.log(event.detail);
    }

    selectedChange(event) {
        console.log(event.detail);
        // Mandatory to update the selected property manually, or use two-way binding
        selected = event.detail;
    }
}

multiselect.component.html

<provenance-multiselect 
    id="html-provenance-multiselect"
    name="html-provenance-multiselect"
    [data]="data"
    [selected]="selected"
    optionLabel="label"
    dataKey="value"
    [freeze]="freeze"
    [visualize]="visualize"
    (provenanceChange)="provenanceChange($event)"
    (selectedChange)="selectedChange($event)"
></provenance-multiselect>

multiselect.webcomponent.ts

import { MultiselectComponent } from 'provenance-widgets';
import type { NgElement, WithProperties } from '@angular/elements'

// Create a new instance of the Multiselect
const multiselect = document.createElement("web-provenance-multiselect") as NgElement & WithProperties<MultiselectComponent>;

const data = [
    { label: 'New York', value: 'New York' },
    { label: 'Rome', value: 'Rome' },
    { label: 'London', value: 'London' },
    { label: 'Istanbul', value: 'Istanbul' },
    { label: 'Paris', value: 'Paris' }
];
// Set the properties
multiselect.options = data;
multiselect.selected = data[0];
multiselect.optionLabel = 'label';
multiselect.dataKey = 'value';
multiselect.freeze = false;
multiselect.visualize = true;

multiselect.addEventListener('provenanceChange', (event) => {
    console.log(event.detail);
});

multiselect.addEventListener('selectedChange', (event) => {
    console.log(event.detail);
    // Mandatory to update the selected property manually
    multiselect.selected = event.detail;
});

// Append it to the DOM
document.body.appendChild(multiselect);

API

info

All widgets extend a third-party library component. See the extends property below for more information about the base component's API.

Extends	p-multiselect
Angular Selector	provenance-multiselect
Web Component Tag	web-provenance-multiselect

Properties

Name	Type	Default	Required	Description
id	string	""	Yes	Unique identifier for the element. Used by ProvenanceWidgets for internal state management and visualizations.
options	any[]	undefined	Yes	An array of objects to display as options
optionLabel	string		Yes	Name of the label field in the option object
dataKey	string		Yes	Name of the value field in the option object
selected	any[]		No	The selected options. It must have the same structure as the options array. Two-way binding is supported.
freeze	boolean	false	No	Whether to freeze the provenance. If true, the widget will not record any provenance, and interactions will not create/update any visualizations. NOTE: The widget does not update when the property is changed.
visualize	boolean	true	No	Whether to visualize the provenance. NOTE: The widget does not update when the property is changed.
provenance	Provenance	undefined	No	The provenance of interactions recorded by the widget. Use this property to persist, restore, modify, or reconstruct the provenance of interactions for the widget. To override the provenance, revalidate must be set to true. Two-way binding is supported.

Events

Name	EventEmitter<T>	Description
selectedChange	any[]	Emits the updated selected values when the multiselect selection changes.
provenanceChange	<Provenance>	Emits the provenance when the multiselect selection changes.