OrderList

OrderList is used to sort a collection.


import { OrderList } from 'primereact/orderlist';
         

OrderList requires an array as its value, a template for its content where each item in the array can be accessed inside the template and onChange callback to update the value after reorder.

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

    Items can be filtered using an input field by enabling the filter property. By default filtering is done against label of the items and filterBy property is available to choose one or more properties of the options. In addition filterMatchMode can be utilized to define the filtering algorithm, valid options are "contains" (default), "startsWith", "endsWith", "equals" and "notEquals".

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

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

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

        OrderList requires an array as its value, a template for its content where each item in the array can be accessed inside the template and onChangecallback to update the value after reorder.

        List of Products
          
          <OrderList value={products} header="List of Products" dataKey="id" itemTemplate={itemTemplate} filter filterBy="name" filterTemplate={filterTemplate}></OrderList>
                   

          Following is the list of structural style classes, for theming classes visit theming page.

          NameElement
          p-orderlistContainer element.
          p-orderlist-listList container.
          p-orderlist-itemAn item in the list
          p-orderlist-filter-containerContainer of filter input.
          p-orderlist-filterFilter element.
          p-orderlist-filter-iconFilter icon.
          Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

          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

          KeyFunction
          tabMoves focus to the first selected option, if there is none then first option receives the focus.
          up arrowMoves focus to the previous option.
          down arrowMoves focus to the next option.
          enterToggles the selected state of the focused option.
          spaceToggles the selected state of the focused option.
          homeMoves focus to the first option.
          endMoves focus to the last option.
          shift + down arrowMoves focus to the next option and toggles the selection state.
          shift + up arrowMoves focus to the previous option and toggles the selection state.
          shift + spaceSelects the items between the most recently selected option and the focused option.
          control + shift + homeSelects the focused options and all the options up to the first one.
          control + shift + endSelects the focused options and all the options down to the first one.
          control + aSelects all options.

          Buttons Keyboard Support

          KeyFunction
          enterExecutes button action.
          spaceExecutes button action.
          Visit the API documentation for detailed information about all the properties, events and methods of the component.