lara-light-indigo

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>
     
    Properties
    NameTypeDefaultDescription
    idstringnullUnique identifier of the element.
    valuearraynullAn array of objects to reorder.
    dataKeystringnullName of the field that uniquely identifies the a record in the data.
    headerstringnullText for the caption
    stylestringnullInline style of the element.
    classNamestringnullStyle class of the element.
    listStylestringnullInline style of the list element.
    dragdropbooleanfalseWhether to enable dragdrop based reordering.
    dragdropScopestringnullUnique key of drag drop events to avoid conflict with other drag drop events on the page.
    itemTemplatefunctionnullFunction that gets an item in the list and returns the content for it.
    tabIndexnumbernullIndex of the element in tabbing order.
    Events
    NameParametersDescription
    onChangeevent.originalEvent: Browser event
    event.value: Reordered list
    Callback to invoke when list is reordered.
    Styling

    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
    Dependencies

    None.

    Component Scale

    Input Style

    Ripple Effect

    Free Themes

    Built-in component themes created by the PrimeReact Theme Designer.

    Bootstrap
    Blue
    Purple
    Blue
    Purple
    Material Design
    Indigo
    Deep Purple
    Indigo
    Deep Purple
    Material Design Compact
    Indigo
    Deep Purple
    Indigo
    Deep Purple
    Tailwind
    Tailwind Light
    Fluent UI
    Blue
    PrimeOne Design - 2022 NEW
    Lara Indigo
    Lara Blue
    Lara Purple
    Lara Teal
    Lara Indigo
    Lara Blue
    Lara Purple
    Lara Teal
    PrimeOne Design - 2021
    Saga Blue
    Saga Green
    Saga Orange
    Saga Purple
    Vela Blue
    Vela Green
    Vela Orange
    Vela Purple
    Arya Blue
    Arya Green
    Arya Orange
    Arya Purple
    Premium Themes

    Premium themes are only available exclusively for PrimeReact Theme Designer subscribers and therefore not included in PrimeReact core.

    Soho Light
    Soho Dark
    Viva Light
    Viva Dark
    Mira
    Nano

    Legacy Free Themes

    Nova
    Nova Alt
    Nova Accent
    Luna Blue
    Luna Green
    Luna Amber
    Luna Pink
    Rhea

    Premium Create-React-App Templates

    Beautifully crafted premium create-react-app application templates by the PrimeTek design team.

    Sakai
    Atlantis
    Freya
    Ultima
    Diamond
    Sapphire
    Serenity
    Babylon
    Avalon
    Apollo
    Roma