OrderList

OrderList is used to sort a collection.

List of Products

Import via Module


import { OrderList } from 'primereact/orderlist';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/orderlist/orderlist.min.js"></script>

Getting Started

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.


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

DragDrop

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


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

Filtering

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


<OrderList value={products} filter filterBy="name" />

Custom Content

For custom content support define an itemTemplate function that gets the item instance as a parameter and returns the content. For custom filter support define a filterTemplate function that gets the option instance as a parameter and returns the content for the filter element.


const [filterValue, setFilterValue] = useState('');
const filterInputRef = useRef();

const itemTemplate = (item) => {
    // custom content
}

const filterTemplate = (options) => {
    let {filterOptions} = options;

    return (
        <div className="flex gap-2">
            <InputText value={filterValue} ref={filterInputRef} onChange={(e) => myFilterFunction(e, filterOptions)} />
            <Button label="Reset" onClick={() => myResetFunction(filterOptions)} />
        </div>
    )
}

const myResetFunction = (options) => {
    setFilterValue('');
    options.reset();
    filterInputRef && filterInputRef.current.focus()
}

const myFilterFunction = (event, options) => {
    let _filterValue = event.target.value;
    setFilterValue(_filterValue);
    options.filter(event);
}


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

Properties

Name	Type	Default	Description
id	string	null	Unique identifier of the element.
value	array	null	An array of objects to reorder.
dataKey	string	null	Name of the field that uniquely identifies the a record in the data.
header	string	null	Text for the caption
style	string	null	Inline style of the element.
className	string	null	Style class of the element.
listStyle	string	null	Inline style of the list element.
dragdrop	boolean	false	Whether to enable dragdrop based reordering.
dragdropScope	string	null	Unique key of drag drop events to avoid conflict with other drag drop events on the page.
itemTemplate	function	null	Function that gets an item in the list and returns the content for it.
filterTemplate	any	null	The template of filter element.
filter	boolean	false	When specified, displays an input field to filter the items on keyup.
filterBy	string	label	When filtering is enabled, filterBy decides which field or fields (comma separated) to search against.
filterMatchMode	string	contains	Defines how the items are filtered, valid values are "contains" (default), "startsWith", "endsWith", "equals" and "notEquals".
filterPlaceholder	string	null	Placeholder text to show when filter input is empty.
filterLocale	string	undefined	Locale to use in filtering. The default locale is the host environment's current locale.
tabIndex	number	null	Index of the element in tabbing order.

Events

Name	Parameters	Description
onChange	event.originalEvent: Browser event event.value: Reordered list	Callback to invoke when list is reordered.
onFilter	event.originalEvent: Original event event.filter: Value of the filter input	Callback to invoke when the value is filtered.

Methods

Name	Parameters	Description
resetFilter	-	Reset the options filter.

Styling

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.