OrderList OrderList is used to sort a collection. When the position of an item changes, the backend array is updated as well.
  • {{car.brand}} - {{car.year}} - {{car.color}}

Import


import {OrderList} from 'primeng/primeng';

Getting Started

OrderList requires an array as its value and a template for its content. Template should contain a wrapper li element having ui-orderlist-item style class. Each item in the array can be accessed inside the template using a local template variable.


<p-orderList [value]="cars">
    <template #car>
        <li class="ui-orderlist-item ui-helper-clearfix">
            Content of an item
        </li>
    </template>
</p-orderList>


export class MyComponent {

    cars: Car[];
    
    ngOnInit() {
        this.cars = //initialize cars
    }
}

Responsive

In responsive mode, orderlist adjusts its controls based on screen size. To activate this mode, set responsive as true.


<p-orderList [value]="cars" [responsive]="true">

Attributes

Name Type Default Description
value array null An array of objects to reorder.
header string null Text for the caption
style string null Inline style of the component.
styleClass string null Style class of the component.
listStyle string null Inline style of the list element.
responsive boolean false When enabled orderlist adjusts its controls based on screen size.

Events

Name Parameters Description
onReorder event: browser event Callback to invoke when list is reordered.

Styling

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

Name Element
ui-orderlist Container element.
ui-orderlist-list List container.
ui-orderlist-item An item in the list.

Dependencies

Native component that only requires css of PrimeUI OrderList.


<div class="ui-grid ui-grid-responsive">
    <div class="ui-grid-row">
        <div class="ui-grid-col-6">
            <p-orderList [value]="cars" listStyle="height:250px" [responsive]="true" header="Responsive Cars">
                <template #car>
                    <li class="ui-orderlist-item ui-helper-clearfix">
                        <img src="showcase/resources/demo/images/car/{{car.brand}}.gif" style="display:inline-block;margin:2px 0 2px 2px"/>
                        <div style="font-size:14px;float:right;margin:15px 5px 0 0">{{car.brand}} - {{car.year}} - {{car.color}}</div>
                    </li>
                </template>
            </p-orderList>
        </div>
        <div class="ui-grid-col-6">
            <ul>
                <li *ngFor="#car of cars" style="list-style-type:none">{{car.brand}} - {{car.year}} - {{car.color}}</li>
            </ul>
        </div>
    </div>
</div>


export class OrderListDemo {

    cars: Car[];
    
    constructor(private carService: CarService) { }

    ngOnInit() {
        this.carService.getCarsSmall().then(cars => this.cars = cars);
    }
}