React PickList

React PickList is used to reorder items between different lists.

Setup

Refer to PrimeReact setup documentation for download and installation steps for your environment.

Import

import { PickList } from 'primereact/picklist';

Getting Started

PickList requires two arrays as source and target lists, an itemTemplate for the item content and onChange callback to update the value after reorder or transfer.

const onChange = (e) => {
    setSource(e.source);
    setTarget(e.target);
}

<PickList source={source} target={target} itemTemplate={itemTemplate}
    onChange={onChange} />

Headers

sourceHeader and targetHeader properties are used to define captions for the lists that accept simple strings or JSX for custom content.

<PickList source={source} target={target} itemTemplate={itemTemplate}
    onChange={onChange} sourceHeader="Available" targetHeader="Seleced"/>

Theming

PickList supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeReact PickList showcase for demos and documentation.