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.

List of Products


<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 #

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

List of Products


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

DragDrop #

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

List of Products


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

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 #

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

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.

OrderList #

OrderList is used to managed the order of a collection.

Properties #

Defines the input properties of the component.

name	type	default	description
header	string	null	Text for the caption.
style	Object	null	Inline style of the component.
styleClass	string	null	Style class of the component.
tabindex	number	null	Index of the element in tabbing order.
ariaLabel	string	null	Defines a string that labels the input for accessibility.
ariaLabelledBy	string	null	Specifies one or more IDs in the DOM that labels the input field.
listStyle	Object	null	Inline style of the list element.
responsive	boolean	false	A boolean value that indicates whether the component should be responsive.
filterBy	string	null	When specified displays an input field to filter the items on keyup and decides which fields to search against.
filterPlaceholder	string	null	Placeholder of the filter input.
filterLocale	string	null	Locale to use in filtering. The default locale is the host environment's current locale.
metaKeySelection	boolean	false	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.
controlsPosition	"left" \| "right"	left	Defines the location of the buttons with respect to the list.
ariaFilterLabel	string	null	Defines a string that labels the filter input.
filterMatchMode	"endsWith" \| "startsWith" \| "contains" \| "equals" \| "notEquals" \| "in" \| "lt" \| "lte" \| "gt" \| "gte"	contains	Defines how the items are filtered.
breakpoint	string	960px	Indicates the width of the screen at which the component should change its behavior.
stripedRows	boolean	false	Whether to displays rows with alternating colors.
disabled	boolean	false	When present, it specifies that the component should be disabled.
trackBy	Function	...	Function to optimize the dom operations by delegating to ngForTrackBy, default algorithm checks for object identity.
selection	any[]	null	A list of values that are currently selected.
value	any[]	null	Array of values to be displayed in the component. It represents the data source for the list of items.

Emitters #

Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.

name	parameters	description
selectionChange	value : any	Callback to invoke on selection change.
onReorder	value : any	Callback to invoke when list is reordered.
onSelectionChange	event : OrderListSelectionChangeEvent	Callback to invoke when selection changes.
onFilterEvent	event : OrderListFilterEvent	Callback to invoke when filtering occurs.
onFocus	event : Event	Callback to invoke when the list is focused
onBlur	event : Event	Callback to invoke when the list is blurred

Methods #

Defines methods that can be accessed by the component's reference.

name	parameters	description
resetFilter		Callback to invoke on filter reset.

Templates #

Defines the templates used by the component.

name	parameters	description
item	context : { $implicit: any, // Item instance. index: number, // Index of the item. }	Custom header template.
header		Custom header template.
filter	context : { options: OrderListFilterOptions, // Filter options. }	Custom filter template.
emptyfilter		Custom empty filter template.
empty		Custom empty template.
clearicon		Custom clear icon template.
filtericon		Custom filter icon template.
moveupicon		Custom move up icon template.
movetopicon		Custom move top icon template.
movedownicon		Custom move down icon template.
movebottomicon		Custom move bottom icon template.

Events #

Defines the custom events used by the component's emitters.

OrderListSelectionChangeEvent #

Custom change event.

name	type	description
originalEvent	Event	Browser event.
value	any[]	Current selected values.

OrderListFilterEvent #

Custom change event.

name	type	description
originalEvent	Event	Browser event.
value	any[]	Filtered options.

Interfaces #

Defines the custom interfaces used by the module.

OrderListFilterOptions #

Callbacks to invoke on filter.

name	type	description
filter	Function
reset	Function