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.
<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 value is checked against the property of an object configured with the filterBy property
<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>
Items can be reordered using drag and drop by enabling dragdrop property.
<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>
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. |
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>
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. |
Key | Function |
---|---|
enter | Executes button action. |
space | Executes button action. |
API defines helper props, events and others for the PrimeNG OrderList module.
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. |
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. |
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 | - |
Name | Parameters | Description |
---|---|---|
resetFilter | - | Resets the filter of the list. |