Vue3 OrderList

Vue3 OrderList is used to managed the order of a collection. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.

Setup

Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.

Import

import OrderList from 'primevue/orderlist';

Getting Started

OrderList requires an array as its value bound with the v-model directive and a template for its content.

Header of the component is defined with the "header" template and to define the content of an item in the list a named template called "item" needs to be defined which gets the item and the index via slotProps.

<OrderList v-model="cars" listStyle="height:auto" dataKey="vin">
    <template #header>
        List of Cars
    </template>
    <template #item="slotProps">
        <div class="p-caritem">
            <img :src="'demo/images/car/' + slotProps.item.brand + '.png'">
            <div>
                <span class="p-caritem-vin">{{slotProps.item.vin}}</span>
                <span>{{slotProps.item.year}} - {{slotProps.item.color}}</span>
            </div>
        </div>
    </template>
</OrderList>

Selection

In case you'd need to access the selected items in the list, define a binding to the selection property with the v-model directive so that it gets updated when the user makes a selection. Since it is two-way binding enabled, your changes to the selection will be reflected as well. Note that this is optional and only necessary when you need to access the selection.

Use the v-model directive to enable two-way binding.

<OrderList v-model="cars" dataKey="vin" v-model:selection="selection">
    <template #header>
        List of Cars
    </template>
    <template #item="slotProps">
        <div class="p-caritem">
            <img :src="'demo/images/car/' + slotProps.item.brand + '.png'">
            <div>
                <span class="p-caritem-vin">{{slotProps.item.vin}}</span>
                <span>{{slotProps.item.year}} - {{slotProps.item.color}}</span>
            </div>
        </div>
    </template>
</OrderList>

DataKey

It is recommended to provide the name of the field that uniquely identifies the a record in the data via the dataKey property for better performance.

Theming

OrderList supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeVue OrderList showcase for demos and documentation.