import OrderList from 'primevue/orderlist';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/orderlist/orderlist.min.js"></script>
OrderList requires an array as its value bound with the v-model directive and a template for its content.
Header of the component is defined with the "header" template and to define the content of an item in the list a named template called "item" needs to be defined which gets the item and the index via slotProps.
<OrderList v-model="cars" listStyle="height:auto" dataKey="vin">
<template #header>
List of Cars
</template>
<template #item="slotProps">
<div class="p-caritem">
<img :src="'demo/images/car/' + slotProps.item.brand + '.png'">
<div>
<span class="p-caritem-vin">{{slotProps.item.vin}}</span>
<span>{{slotProps.item.year}} - {{slotProps.item.color}}</span>
</div>
</div>
</template>
</OrderList>
In case you'd need to access the selected items in the list, define a binding to the selection property with the v-model directive so that it gets updated when the user makes a selection. Since it is two-way binding enabled, your changes to the selection will be reflected as well. Note that this is optional and only necessary when you need to access the selection.
Use the v-model directive to enable two-way binding.
<OrderList v-model="cars" dataKey="vin" v-model:selection="selection">
<template #header>
List of Cars
</template>
<template #item="slotProps">
<div class="p-caritem">
<img :src="'demo/images/car/' + slotProps.item.brand + '.png'">
<div>
<span class="p-caritem-vin">{{slotProps.item.vin}}</span>
<span>{{slotProps.item.year}} - {{slotProps.item.color}}</span>
</div>
</div>
</template>
</OrderList>
It is recommended to provide the name of the field that uniquely identifies the a record in the data via the dataKey property for better performance.
In addition to the item template, header is provided to place custom content at the list header. Controls section can also be customized to place content before and after the buttons with controlsstart and controlsend slots respectively.
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
| Name | Type | Default | Description |
|---|---|---|---|
| modelValue | array | null | Value of the component. |
| selection | any | null | Selected items in the list. |
| metaKeySelection | boolean | true |
Defines whether metaKey is requred or not for the selection. 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. |
| dataKey | string | null | Name of the field that uniquely identifies the a record in the data. |
| listStyle | object | null | Inline style of the the list element. |
| responsive | boolean | true | Whether the list optimizes layout based on screen size. |
| breakpoint | string | 960px | The breakpoint to define the maximum width boundary when responsiveness is enabled. |
| stripedRows | boolean | false | Whether to displays rows with alternating colors. |
| tabindex | number | 0 | Index of the element in tabbing order. |
| moveUpButtonProps | object | null | Uses to pass all properties of the HTMLButtonElement to the move up button inside the component. |
| moveTopButtonProps | object | null | Uses to pass all properties of the HTMLButtonElement to the move top button inside the component. |
| moveDownButtonProps | object | null | Uses to pass all properties of the HTMLButtonElement to the move down button inside the component. |
| moveBottomButtonProps | object | null | Uses to pass all properties of the HTMLButtonElement to the move bottom button inside the component. |
| aria-label | string | null | Defines a string value that labels an interactive list element. |
| aria-labelledby | string | null | Identifier of the underlying list element. |
| Name | Parameters | Description |
|---|---|---|
| reorder |
event.originalEvent: browser event event.value: Ordered list event.direction: Direction of the change; "up", "down", "bottom", "top" |
Callback to invoke when the list is reordered. |
| selection-change |
event.originalEvent: browser event event.value: Ordered list |
Callback to invoke when selection changes. |
| Name | Parameters |
|---|---|
| header | - |
| item |
item: Item of the component index: Index of the item |
| controlsstart | - |
| controlsend | - |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-orderlist | Container element. |
| p-orderlist-list | List container. |
| p-orderlist-item | An item in the list |
Value to describe the listbox can be provided with listProps by passing aria-labelledby or aria-label props. The list element 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 and aria.moveBottom properties of the
<span id="lb">Options</span>
<OrderList aria-labelledby="lb" />
<OrderList aria-label="City" />
| 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. |
None.