OrderList

OrderList is used to sort a collection.

Import #


import { OrderListModule } from 'primeng/orderlist';

Basic #

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.

Products

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



<p-orderList [value]="products" [listStyle]="{ 'max-height': '30rem' }" header="Products">
    <ng-template let-product pTemplate="item">
        <div class="flex align-items-center p-2 w-full flex-wrap">
            <div class="w-full text-center lg:w-auto lg:text-left">
                <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="mr-3 shadow-3 w-7rem mb-3 lg:w-5rem lg:mb-auto" />
            </div>
            <div class="flex-1">
                <h5 class="mb-2">{{ product.name }}</h5>
                <i class="pi pi-tag vertical-align-middle mr-2"></i>
                <span class="vertical-align-middle line-height-1">{{ product.category }}</span>
            </div>
            <div class="flex flex-column align-items-end">
                <h6 class="mb-2">{{ '$ ' + product.price }}</h6>
                <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
            </div>
        </div>
    </ng-template>
</p-orderList>

Filter #

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

Products

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



<p-orderList [value]="products" [listStyle]="{ 'max-height': '30rem' }" header="Products" filterBy="name" filterPlaceholder="Filter by name">
    <ng-template let-product pTemplate="item">
        <div class="flex align-items-center p-2 w-full flex-wrap">
            <div class="w-full text-center lg:w-auto lg:text-left">
                <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="mr-3 shadow-3 w-7rem mb-3 lg:w-5rem lg:mb-auto" />
            </div>
            <div class="flex-1">
                <h5 class="mb-2">{{ product.name }}</h5>
                <i class="pi pi-tag vertical-align-middle mr-2"></i>
                <span class="vertical-align-middle line-height-1">{{ product.category }}</span>
            </div>
            <div class="flex flex-column align-items-end">
                <h6 class="mb-2">{{ '$ ' + product.price }}</h6>
                <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
            </div>
        </div>
    </ng-template>
</p-orderList>

DragDrop #

Items can be reordered using drag and drop by enabling dragdrop property.

Products

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



<p-orderList [value]="products" [listStyle]="{ 'max-height': '30rem' }" header="Products" [dragdrop]="true">
    <ng-template let-product pTemplate="item">
        <div class="flex align-items-center p-2 w-full flex-wrap">
            <div class="w-full text-center lg:w-auto lg:text-left">
                <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="mr-3 shadow-3 w-7rem mb-3 lg:w-5rem lg:mb-auto" />
            </div>
            <div class="flex-1">
                <h5 class="mb-2">{{ product.name }}</h5>
                <i class="pi pi-tag vertical-align-middle mr-2"></i>
                <span class="vertical-align-middle line-height-1">{{ product.category }}</span>
            </div>
            <div class="flex flex-column align-items-end">
                <h6 class="mb-2">{{ '$ ' + product.price }}</h6>
                <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
            </div>
        </div>
    </ng-template>
</p-orderList>

Style #

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

Name	Element
p-orderlist	Container element.
p-orderlist-list	List container.
p-orderlist-item	An item in the list.

Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

Accessibility #

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 aria-labelledby="lb"></p-orderList>

<p-orderList aria-label="City"></p-orderList>

OrderList Keyboard Support

Key	Function
tab	Moves focus to the first selected option, if there is none then first option receives the focus.
up arrow	Moves focus to the previous option.
down arrow	Moves focus to the next option.
enter	Toggles the selected state of the focused option.
space	Toggles the selected state of the focused option.
home	Moves focus to the first option.
end	Moves focus to the last option.
shift + down arrow	Moves focus to the next option and toggles the selection state.
shift + up arrow	Moves focus to the previous option and toggles the selection state.
shift + space	Selects the items between the most recently selected option and the focused option.
control + shift + home	Selects the focused options and all the options up to the first one.
control + shift + end	Selects the focused options and all the options down to the first one.
control + a	Selects all options.

Buttons Keyboard Support

Key	Function
enter	Executes button action.
space	Executes button action.

OrderList API

API defines helper props, events and others for the PrimeNG OrderList module.

Properties #

Name	Type	Default	Description
value	array	null	An array of objects to reorder.
selection	array	null	An array of objects to bind the selections.
header	string	null	Text for the caption
style	string	null	Inline style of the component.
styleClass	string	null	Style class of the component.
listStyle	string	null	Inline style of the list element.
filterBy	string	null	When specified displays an input field to filter the items on keyup and decides which fields to search against.
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.
metaKeySelection	boolean	true	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.
dragdrop	boolean	false	Whether to enable dragdrop based reordering.
filterPlaceHolder	string	null	Placeholder text on filter input.
disabled	boolean	false	When present, it specifies that the component should be disabled.
trackBy	Function	null	Function to optimize the dom operations by delegating to ngForTrackBy, default algorithm checks for object identity.
controlsPosition	string	left	Defines the location of the buttons with respect to the list, valid values are "left" or "right".
ariaFilterLabel	string	null	Defines a string that labels the filter input.
stripedRows	boolean	false	Whether to displays rows with alternating colors.

Events #

Name	Parameters	Description
onReorder	event: browser event	Callback to invoke when list is reordered.
onSelectionChange	originalEvent: browser event value: Current selection	Callback to invoke when selection changes.
onFilterEvent	originalEvent: browser event value: Current filter values	Callback to invoke when filtering occurs.

Templates #

Name	Parameters
item	$implicit: Data of the item
header	-
empty	-
emptyfilter	-
filter	options.filter: Callback to filter data by the value param options.reset: Resets the filter.
moveupicon	-
movetopicon	-
movedownicon	-
movebottomicon	-
filtericon	-

Methods #

Name	Parameters	Description
resetFilter	-	Resets the filter of the list.

OrderList

Import #

Basic #

Bamboo Watch

$ 65

Black Watch

$ 72

Blue Band

$ 79

Blue T-Shirt

$ 29

Bracelet

$ 15

Brown Purse

$ 120

Chakra Bracelet

$ 32

Galaxy Earrings

$ 34

Game Controller

$ 99

Gaming Set

$ 299

Filter #

Bamboo Watch

$ 65

Black Watch

$ 72

Blue Band

$ 79

Blue T-Shirt

$ 29

Bracelet

$ 15

Brown Purse

$ 120

Chakra Bracelet

$ 32

Galaxy Earrings

$ 34

Game Controller

$ 99

Gaming Set

$ 299

DragDrop #

Bamboo Watch

$ 65

Black Watch

$ 72

Blue Band

$ 79

Blue T-Shirt

$ 29

Bracelet

$ 15

Brown Purse

$ 120

Chakra Bracelet

$ 32

Galaxy Earrings

$ 34

Game Controller

$ 99

Gaming Set

$ 299

Style #

Accessibility #

Screen Reader

OrderList Keyboard Support

Buttons Keyboard Support

OrderList API

Properties #

Events #

Templates #

Methods #