lara-light-indigo

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
      NameTypeDefaultDescription
      idstringnullUnique identifier of the element.
      sourcearraynullAn array of objects for the source list.
      targetarraynullAn array of objects for the target list.
      sourceHeaderanynullTemplate for the source list caption.
      targetHeaderanynullTemplate for the target list caption.
      stylestringnullInline style of the element.
      classNamestringnullStyle class of the element.
      sourceStylestringnullInline style of the source list element.
      targetStylestringnullInline style of the target list element.
      sourceSelectionanynullSelected item in the source list.
      targetSelectionanynullSelected items in the target list.
      showSourceControlsbooleantrueWhether to show buttons of source list.
      showTargetControlsbooleantrueWhether to show buttons of target list.
      itemTemplatefunctionnullFunction that gets the option and returns the content for it.
      metaKeySelectionbooleantrueDefines 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.
      tabIndexnumbernullIndex of the element in tabbing order.
      dataKeystringnullName of the field that uniquely identifies the a record in the data.
      Events
      NameParametersDescription
      onChangeevent.originalEvent: Browser event
      event.source: Source list
      event.target: Target list
      Callback to invoke when items are moved from source to target.
      onMoveToSourceevent.originalEvent: Browser event
      event.value: Moved items
      Callback to invoke when items are moved from target to source.
      onMoveAllToSourceevent.originalEvent: Browser event
      event.value: Moved items
      Callback to invoke when all items are moved from target to source.
      onMoveToTargetevent.originalEvent: Browser event
      event.value: Moved items
      Callback to invoke when items are moved from source to target.
      onMoveAllToTargetevent.originalEvent: Browser event
      event.value: Moved items
      Callback to invoke when all items are moved from source to target.
      onSourceSelectionChangeevent.originalEvent: Browser event
      items: Selected items array
      Callback to invoke when items are selected within source list.
      onTargetSelectionChangeevent.originalEvent: Browser event
      items: Selected items array
      Callback to invoke when items are selected within target list.
      Styling

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

      NameElement
      p-picklistContainer element.
      p-picklist-source-controlsContainer of source list buttons.
      p-picklist-target-controlsContainer of target list buttons.
      p-picklist-buttonsContainer of buttons.
      p-picklist-listwrapperParent of a list element.
      p-picklist-listList element.
      p-picklist-itemAn item in the list.
      Dependencies

      None.

      Component Scale

      Input Style

      Ripple Effect

      Free Themes

      Built-in component themes created by the PrimeReact Theme Designer.

      Bootstrap
      Blue
      Purple
      Blue
      Purple
      Material Design
      Indigo
      Deep Purple
      Indigo
      Deep Purple
      Material Design Compact
      Indigo
      Deep Purple
      Indigo
      Deep Purple
      Tailwind
      Tailwind Light
      Fluent UI
      Blue
      PrimeOne Design - 2022 NEW
      Lara Indigo
      Lara Blue
      Lara Purple
      Lara Teal
      Lara Indigo
      Lara Blue
      Lara Purple
      Lara Teal
      PrimeOne Design - 2021
      Saga Blue
      Saga Green
      Saga Orange
      Saga Purple
      Vela Blue
      Vela Green
      Vela Orange
      Vela Purple
      Arya Blue
      Arya Green
      Arya Orange
      Arya Purple
      Premium Themes

      Premium themes are only available exclusively for PrimeReact Theme Designer subscribers and therefore not included in PrimeReact core.

      Soho Light
      Soho Dark
      Viva Light
      Viva Dark
      Mira
      Nano

      Legacy Free Themes

      Nova
      Nova Alt
      Nova Accent
      Luna Blue
      Luna Green
      Luna Amber
      Luna Pink
      Rhea

      Premium Create-React-App Templates

      Beautifully crafted premium create-react-app application templates by the PrimeTek design team.

      Sakai
      Atlantis
      Freya
      Ultima
      Diamond
      Sapphire
      Serenity
      Babylon
      Avalon
      Apollo
      Roma