diff --git a/components/doc/picklist/index.js b/components/doc/picklist/index.js
index 888a4ffd26..5c481cf093 100644
--- a/components/doc/picklist/index.js
+++ b/components/doc/picklist/index.js
@@ -439,7 +439,21 @@ const onChange = (e) => {
itemTemplate |
function |
null |
- Function that gets the option and returns the content for it. |
+ 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 |
diff --git a/components/lib/picklist/PickList.d.ts b/components/lib/picklist/PickList.d.ts
index c8d563120d..069d312860 100755
--- a/components/lib/picklist/PickList.d.ts
+++ b/components/lib/picklist/PickList.d.ts
@@ -1,5 +1,7 @@
import * as React from 'react';
+type PickListItemTemplateType = React.ReactNode | ((item: any) => React.ReactNode);
+
interface PickListEventParams {
originalEvent: React.SyntheticEvent;
value: any;
@@ -28,7 +30,9 @@ export interface PickListProps {
metaKeySelection?: boolean;
tabIndex?: number;
dataKey?: string;
- itemTemplate?(item: any): React.ReactNode;
+ itemTemplate?: PickListItemTemplateType;
+ sourceItemTemplate?: PickListItemTemplateType;
+ targetItemTemplate?: PickListItemTemplateType;
onChange?(e: PickListChangeParams): void;
onMoveToSource?(e: PickListEventParams): void;
onMoveAllToSource?(e: PickListEventParams): void;
diff --git a/components/lib/picklist/PickList.js b/components/lib/picklist/PickList.js
index b27d624e20..b8a685a85b 100644
--- a/components/lib/picklist/PickList.js
+++ b/components/lib/picklist/PickList.js
@@ -150,17 +150,19 @@ export const PickList = React.memo(React.forwardRef((props, ref) => {
const otherProps = ObjectUtils.findDiffKeys(props, PickList.defaultProps);
const className = classNames('p-picklist p-component', props.className);
+ const sourceItemTemplate = props.sourceItemTemplate ? props.sourceItemTemplate : props.itemTemplate;
+ const targetItemTemplate = props.targetItemTemplate ? props.targetItemTemplate : props.itemTemplate;
return (
{props.showSourceControls &&
}
-
onSelectionChange(e, 'sourceSelection', props.onSourceSelectionChange)} itemTemplate={props.itemTemplate}
+ onSelectionChange(e, 'sourceSelection', props.onSourceSelectionChange)} itemTemplate={sourceItemTemplate}
header={props.sourceHeader} style={props.sourceStyle} className="p-picklist-source-wrapper" listClassName="p-picklist-source" metaKeySelection={props.metaKeySelection} tabIndex={props.tabIndex} dataKey={props.dataKey} />
- onSelectionChange(e, 'targetSelection', props.onTargetSelectionChange)} itemTemplate={props.itemTemplate}
+ onSelectionChange(e, 'targetSelection', props.onTargetSelectionChange)} itemTemplate={targetItemTemplate}
header={props.targetHeader} style={props.targetStyle} className="p-picklist-target-wrapper" listClassName="p-picklist-target" metaKeySelection={props.metaKeySelection} tabIndex={props.tabIndex} dataKey={props.dataKey} />
{props.showTargetControls && }
@@ -189,6 +191,8 @@ PickList.defaultProps = {
tabIndex: 0,
dataKey: null,
itemTemplate: null,
+ sourceItemTemplate: null,
+ targetItemTemplate: null,
onChange: null,
onMoveToSource: null,
onMoveAllToSource: null,