Source: https://primereact.org/orderlist/

Introducing PrimeReact v11 Alpha 🥁Learn More

SearchK
10.9.7
FEATURES
API
THEMING
PASS THROUGH

OrderList

OrderList is used to sort a collection.

Import#

import { OrderList } from 'primereact/orderlist';

Copy

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

Bamboo Watch

Accessories

$65
Black Watch

Accessories

$72
Blue Band

Fitness

$79
Blue T-Shirt

Clothing

$29
Bracelet

Accessories

$15
Brown Purse

Accessories

$120
Chakra Bracelet

Accessories

$32
Galaxy Earrings

Accessories

$34
Game Controller

Electronics

$99
Gaming Set

Electronics

$299

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

Copy

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

Bamboo Watch

Accessories

$65
Black Watch

Accessories

$72
Blue Band

Fitness

$79
Blue T-Shirt

Clothing

$29
Bracelet

Accessories

$15
Brown Purse

Accessories

$120
Chakra Bracelet

Accessories

$32
Galaxy Earrings

Accessories

$34
Game Controller

Electronics

$99
Gaming Set

Electronics

$299

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

Copy

DragDrop#

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

Products

Bamboo Watch

Accessories

$65
Black Watch

Accessories

$72
Blue Band

Fitness

$79
Blue T-Shirt

Clothing

$29
Bracelet

Accessories

$15
Brown Purse

Accessories

$120
Chakra Bracelet

Accessories

$32
Galaxy Earrings

Accessories

$34
Game Controller

Electronics

$99
Gaming Set

Electronics

$299

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

Copy

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 use_moveTopButtonProps_, 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" />

Copy

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

Import
Basic
Filter
DragDrop
Accessibility

PrimeReact 10.9.7 by PrimeTek