OrderList

OrderList is used to sort a collection.

Import#


import { OrderList } from 'primereact/orderlist';

Basic#

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

Products


<OrderList value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products"></OrderList>

Filter#

Items are filtered using an input field by enabling the filter property. Filter value is checked against the property of an object configured with the filterBy property and the filtering match mode with filterMatchMode e.g. contains.

Products


<OrderList value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" filter filterBy="name"></OrderList>

DragDrop#

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

Products


<OrderList value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} 
    header="Products" dragdrop></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
p-orderlist-filter-container	Container of filter input.
p-orderlist-filter	Filter element.
p-orderlist-filter-icon	Filter icon.

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

Accessibility#

Screen Reader

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 locale API by default, alternatively you may usemoveTopButtonProps, moveUpButtonProps, moveDownButtonProps and moveBottomButtonProps to customize the buttons like overriding the default aria-label attributes.


<span id="lb">Options</span>
<OrderList aria-labelledby="lb" />

<OrderList aria-label="City" />

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