Vuetify0 is now in alpha! See the roadmap for details.

Theme

Mode

Palettes

Accessibility

createSortable API

API reference for the createSortable composable.

Explore these related pages for additional context and usage patterns.

Page	Category
createSortable	Data
createDataTable	Data
createRegistry	Registration
createModel	Selection
useDragDrop	System

Functions

createSortable

(_options?: SortableOptions) => SortableContext<Z, E>

Create an ordered-list state primitive.

Options

reactive

boolean | undefined

Enable reactive behavior for registry operations

Default: false

disabled

MaybeRefOrGetter<boolean> | undefined

Disabled state for the entire model instance

Default: false

enroll

MaybeRefOrGetter<boolean> | undefined

Auto-select tickets on registration

Default: true

multiple

MaybeRefOrGetter<boolean> | undefined

Allow multiple tickets to be selected simultaneously

Default: false

Properties

collection

ReadonlyMap<ID, E>

The collection of tickets in the registry

size

number

The number of tickets in the registry

selectedIds

Reactive<Set<ID>>

Set of currently selected ticket IDs

selectedItems

ComputedRef<Set<E>>

Computed Set of selected ticket instances

selectedValues

ComputedRef<Set<E["value"] extends Ref<infer U, infer U> ? U : E["value"]>>

Computed Set of selected ticket values

disabled

MaybeRefOrGetter<boolean>

Disabled state for the entire model instance

on

SortableEventListener<E>

Subscribe to the typed `move:ticket` event with a strongly-typed payload.

off

SortableEventListener<E>

Methods

clear

() => void

Clear the entire registry

has

(id: ID) => boolean

Check if a ticket exists by ID

keys

() => readonly ID[]

Get all registered IDs

browse

(value: E["value"]) => readonly ID[] | undefined

Browse for an ID(s) by value

lookup

(index: number) => ID | undefined

Lookup a ticket by index number

get

(id: ID) => E | undefined

Get a ticket by ID

upsert

(id: ID, ticket?: Partial<Z>, event?: string) => E

Update or insert a ticket by ID

values

() => readonly E[]

Get all values of registered tickets

entries

() => readonly [ID, E][]

Get all entries of registered tickets

unregister

(id: ID) => void

Unregister a ticket by ID

reindex

() => void

Reset the index directory and update all tickets

seek

(direction?: "first" | "last", from?: number, predicate?: (ticket) => boolean) => E | undefined

Seek for a ticket based on direction and optional predicate

emit

<K extends Extensible<RegistryEventName>>(event: K, data: EventPayload<E, K>) => void

Emit an event with data

dispose

() => void

Clears the registry and removes all listeners

onboard

(registrations: Partial<Z & RegistryTicket>[]) => E[]

Onboard multiple tickets at once

offboard

(ids: ID[]) => void

Offboard multiple tickets at once

batch

<R>(fn: () => R) => R

Execute operations in a batch, deferring cache invalidation and event emission until complete

reset

() => void

Reset selection state without destroying the registry

select

(id: ID) => void

Select a ticket by ID

unselect

(id: ID) => void

Unselect a ticket by ID

toggle

(id: ID) => void

Toggle a ticket's selection state

selected

(id: ID) => boolean

Check if a ticket is currently selected

apply

(values: unknown[], options?: { multiple?) => void

Apply external values to the model

register

(registration?: Partial<Z>) => E

Register a new ticket

move

(id: ID, toIndex: number) => E | undefined

Move a ticket to a target index. Other tickets shift to fill. Emits `move:ticket` once when the index actually changes — a move whose `toIndex` already equals the ticket's current index is a no-op. No-ops when the root sortable is disabled or when the ticket is disabled.

swap

(a: ID, b: ID) => void

Swap two tickets' positions. Emits `move:ticket` twice — once per ticket. No-ops when the root sortable is disabled or when either ticket is disabled.

reorder

(ids: ID[]) => void

Set the canonical order in one shot.

Was this page helpful?