OrderList

OrderList is used to sort a collection.


import { OrderListModule } from 'primeng/orderlist';

OrderList is used as a controlled input with value properties. Content of a list item needs to be defined with the pTemplate property that receives an object in the list as parameter.

List of Products
  • Bamboo Watch
    Bamboo Watch
    Accessories
    $65
  • Black Watch
    Black Watch
    Accessories
    $72
  • Blue Band
    Blue Band
    Fitness
    $79
  • Blue T-Shirt
    Blue T-Shirt
    Clothing
    $29
  • Bracelet
    Bracelet
    Accessories
    $15
  • Brown Purse
    Brown Purse
    Accessories
    $120
  • Chakra Bracelet
    Chakra Bracelet
    Accessories
    $32
  • Galaxy Earrings
    Galaxy Earrings
    Accessories
    $34
  • Game Controller
    Game Controller
    Electronics
    $99
  • Gaming Set
    Gaming Set
    Electronics
    $299

<p-orderList 
    [value]="products" 
    [listStyle]="{ height: '25rem' }" 
    header="List of Products">
        <ng-template let-product pTemplate="item">
            <div class="flex flex-wrap p-2 align-items-center gap-3">
                <img 
                    src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" 
                    [alt]="product.name" 
                    class="w-4rem shadow-2 flex-shrink-0 border-round" />
                        <div class="flex-1 flex flex-column gap-2">
                            <span class="font-bold">{{ product.name }}</span>
                            <div class="flex align-items-center gap-2">
                                <i class="pi pi-tag text-sm"></i>
                                <span>
                                    {{ product.category }}
                                </span>
                            </div>
                        </div>
                <span class="font-bold text-900">
                    {{ '$' + product.price }}
                </span>
            </div>
        </ng-template>
</p-orderList>

Filter value is checked against the property of an object configured with the filterBy property

List of Products
  • Bamboo Watch
    Bamboo Watch
    Accessories
    $65
  • Black Watch
    Black Watch
    Accessories
    $72
  • Blue Band
    Blue Band
    Fitness
    $79
  • Blue T-Shirt
    Blue T-Shirt
    Clothing
    $29
  • Bracelet
    Bracelet
    Accessories
    $15
  • Brown Purse
    Brown Purse
    Accessories
    $120
  • Chakra Bracelet
    Chakra Bracelet
    Accessories
    $32
  • Galaxy Earrings
    Galaxy Earrings
    Accessories
    $34
  • Game Controller
    Game Controller
    Electronics
    $99
  • Gaming Set
    Gaming Set
    Electronics
    $299

<p-orderList 
    [value]="products" 
    [listStyle]="{ 'max-height': '30rem' }" 
    header="List of Products"
    filterBy="name" 
    filterPlaceholder="Filter by name">
        <ng-template let-product pTemplate="item">
            <div class="flex flex-wrap p-2 align-items-center gap-3">
                <img 
                    src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" 
                    [alt]="product.name" 
                    class="w-4rem shadow-2 flex-shrink-0 border-round" />
                    <div class="flex-1 flex flex-column gap-2">
                        <span class="font-bold">{{ product.name }}</span>
                        <div class="flex align-items-center gap-2">
                            <i class="pi pi-tag text-sm"></i>
                            <span>{{ product.category }}</span>
                        </div>
                    </div>
                <span class="font-bold text-900">
                    {{ '$' + product.price }}
                </span>
            </div>
        </ng-template>
</p-orderList>

Items can be reordered using drag and drop by enabling dragdrop property. Depends on @angular/cdk package.

List of Products
  • Bamboo Watch
    Bamboo Watch
    Accessories
    $65
  • Black Watch
    Black Watch
    Accessories
    $72
  • Blue Band
    Blue Band
    Fitness
    $79
  • Blue T-Shirt
    Blue T-Shirt
    Clothing
    $29
  • Bracelet
    Bracelet
    Accessories
    $15
  • Brown Purse
    Brown Purse
    Accessories
    $120
  • Chakra Bracelet
    Chakra Bracelet
    Accessories
    $32
  • Galaxy Earrings
    Galaxy Earrings
    Accessories
    $34
  • Game Controller
    Game Controller
    Electronics
    $99
  • Gaming Set
    Gaming Set
    Electronics
    $299

<p-orderList 
    [value]="products" 
    [listStyle]="{ 'max-height': '30rem' }" 
    header="List of Products" 
    [dragdrop]="true">
        <ng-template let-product pTemplate="item">
            <div class="flex flex-wrap p-2 align-items-center gap-3">
                <img 
                    src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" 
                    [alt]="product.name" 
                    class="w-4rem shadow-2 flex-shrink-0 border-round" />
                        <div class="flex-1 flex flex-column gap-2">
                            <span class="font-bold">{{ product.name }}</span>
                            <div class="flex align-items-center gap-2">
                                <i class="pi pi-tag text-sm"></i>
                                <span>
                                    {{ product.category }}
                                </span>
                            </div>
                        </div>
                <span class="font-bold text-900">
                    {{ '$' + product.price }}
                </span>
            </div>
        </ng-template>
</p-orderList>

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

NameElement
p-orderlistContainer element.
p-orderlist-listList container.
p-orderlist-itemAn item in the list.

Screen Reader

Value to describe the source listbox and target listbox can be provided with sourceListProps and targetListProps by passing aria-labelledby or aria-label props. The list elements has a listbox role with the aria-multiselectable attribute. Each list item has an option role with aria-selected and aria-disabled as their attributes.

Controls buttons are button elements with an aria-label that refers to the aria.moveTop, aria.moveUp, aria.moveDown, aria.moveBottom,aria.moveTo, aria.moveAllTo, aria.moveFrom and aria.moveAllFrom properties of the locale API by default, alternatively you may usemoveTopButtonProps, moveUpButtonProps, moveDownButtonProps, moveToButtonProps, moveAllToButtonProps, moveFromButtonProps, moveFromButtonProps and moveAllFromButtonProps to customize the buttons like overriding the default aria-label attributes.


<span id="lb">Options</span>        
<p-orderList ariaLabelledBy="lb" />

<p-orderList ariaLabel="City" />

OrderList Keyboard Support

KeyFunction
tabMoves focus to the first selected option, if there is none then first option receives the focus.
up arrowMoves focus to the previous option.
down arrowMoves focus to the next option.
enterToggles the selected state of the focused option.
spaceToggles the selected state of the focused option.
homeMoves focus to the first option.
endMoves focus to the last option.
shift + down arrowMoves focus to the next option and toggles the selection state.
shift + up arrowMoves focus to the previous option and toggles the selection state.
shift + spaceSelects the items between the most recently selected option and the focused option.
control + shift + homeSelects the focused options and all the options up to the first one.
control + shift + endSelects the focused options and all the options down to the first one.
control + aSelects all options.

Buttons Keyboard Support

KeyFunction
enterExecutes button action.
spaceExecutes button action.