PickList

PickList is used to reorder items between different lists.

Available

Selected

Import via Module


import { PickList } from 'primereact/picklist';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/picklist/picklist.min.js"></script>

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"/>

Properties

Name	Type	Default	Description
id	string	null	Unique identifier of the element.
source	array	null	An array of objects for the source list.
target	array	null	An array of objects for the target list.
sourceHeader	any	null	Template for the source list caption.
targetHeader	any	null	Template for the target list caption.
style	string	null	Inline style of the element.
className	string	null	Style class of the element.
sourceStyle	string	null	Inline style of the source list element.
targetStyle	string	null	Inline style of the target list element.
sourceSelection	any	null	Selected item in the source list.
targetSelection	any	null	Selected items in the target list.
showSourceControls	boolean	true	Whether to show buttons of source list.
showTargetControls	boolean	true	Whether to show buttons of target list.
itemTemplate	function	null	Template that gets the options for both source and target items and returns the content for it. Useful if you want the same template for both lists else use the custom sourceItemTemplate or targetItemTemplate properties.
sourceItemTemplate	function	null	Template that gets the options for the source items and returns the content for it.
targetItemTemplate	function	null	Template that gets the options for the target items and returns the content for it.
metaKeySelection	boolean	true	Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.
filterBy	string	null	When specified displays an input field to filter the items on keyup and decides which field to search (Accepts multiple fields with a comma).
filterMatchMode	string	contains	Defines how the items are filtered, valid values are "contains" (default) "startsWith", "endsWith", "equals", "notEquals", "in", "lt", "lte", "gt" and "gte".
filterLocale	string	undefined	Locale to use in filtering. The default locale is the host environment's current locale.
sourceFilterValue	string	null	Filter value in the target list.
targetFilterValue	string	null	Filter value in the source list.
showSourceFilter	boolean	true	Whether to show filter input for source list when filterBy is enabled.
showTargetFilter	boolean	true	Whether to show filter input for target list when filterBy is enabled.
sourceFilterPlaceholder	string	null	Placeholder text on source filter input.
targetFilterPlaceholder	string	null	Placeholder text on target filter input.
sourceFilterTemplate	any	null	Template for the source filter content.
targetFilterTemplate	any	null	Template for the target filter content.
tabIndex	number	null	Index of the element in tabbing order.
dataKey	string	null	Name of the field that uniquely identifies the a record in the data.

Events

Name	Parameters	Description
onChange	event.originalEvent: Browser event event.source: Source list event.target: Target list	Callback to invoke when items are moved from source to target.
onMoveToSource	event.originalEvent: Browser event event.value: Moved items	Callback to invoke when items are moved from target to source.
onMoveAllToSource	event.originalEvent: Browser event event.value: Moved items	Callback to invoke when all items are moved from target to source.
onMoveToTarget	event.originalEvent: Browser event event.value: Moved items	Callback to invoke when items are moved from source to target.
onMoveAllToTarget	event.originalEvent: Browser event event.value: Moved items	Callback to invoke when all items are moved from source to target.
onSourceSelectionChange	event.originalEvent: Browser event items: Selected items array	Callback to invoke when items are selected within source list.
onTargetSelectionChange	event.originalEvent: Browser event items: Selected items array	Callback to invoke when items are selected within target list.
onSourceFilterChange	event.originalEvent: Browser event event.value: Filtered value	Callback to invoke when items are filtered within source list.
onTargetFilterChange	event.originalEvent: Browser event event.value: Filtered value	Callback to invoke when items are filtered within target list.

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name	Element
p-picklist	Container element.
p-picklist-source-controls	Container of source list buttons.
p-picklist-target-controls	Container of target list buttons.
p-picklist-buttons	Container of buttons.
p-picklist-listwrapper	Parent of a list element.
p-picklist-list	List element.
p-picklist-item	An item in the list.