OrderList

New

Arrange a collection in the order that matters to your application.

Custom templatesKeyboard supportImmutable updates

Overview

Select a task, then move it up, down, to the start or to the end.

Task priority5 items

Select an item to change its position.

Current order: Review requirements → Design the interface → Build components → Write tests → Prepare documentation

Keyboard

Tab into the list. Up and Down select an item; Home and End select the first and last item. Hold Alt with those keys to move the selected item. The move buttons are also keyboard accessible.

Usage and API

Import AvOrderList and AvOrderListItem from avero-ui. Bind value to a collection and selection to the selected item. Each move creates a new array; the original array is not mutated.

HTMLTyped item template

<av-order-list inputId="tasks" label="Task priority"
  [(value)]="tasks" [(selection)]="selection"
  (onReorder)="reordered($event)">
  <ng-template [avOrderListItem]="tasks()" let-task>
    <strong>{{ task.name }}</strong>
    <span>{{ task.category }}</span>
  </ng-template>
</av-order-list>

Events. valueChange emits the new array, selectionChange emits the selected item, and onReorder emits { value, item, from, to } with zero-based indexes. Programmatic updates do not emit user events.

Selection. Items are matched by identity. Use unique items, and clear or update selection when replacing objects. Item templates receive the item, index and selected state; use non-interactive content inside listbox options.

Scope. This version supports single selection and button or keyboard reordering. Drag and drop, multiple selection and filtering are not included.

Theme. Customize --av-order-list-accent, --av-order-list-selection, --av-order-list-background, --av-order-list-border, --av-order-list-radius and --av-order-list-height.