React OrderList is used to sort a collection.
Setup
Refer to PrimeReact setup documentation for download and installation steps for your environment.
Import
import { OrderList } from 'primereact/orderlist';
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 onChange callback 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>
Theming
OrderList supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeReact OrderList showcase for demos and documentation.