GrSortableList

Примеры 3 у каждого — живое демо и его код

• Колонки выгрузки в CSV

  Порядок здесь и есть значение: он становится первой строкой файла. В строках свои флажки и кнопки, поэтому перенос начинается только с ручки — handle-only по умолчанию; item-key следит за колонкой по id. move сообщает одну операцию вместо всего списка, а открытые move() и focusItem() ставят колонку первой той же механикой.

  Columns of the CSV export

  Invoice numberINV-2026-0418

  CustomerNorthwind TradersFirst

  Issue date02 Oct 2026First

  Due date01 Nov 2026First

  Total€1,284.50First

  VAT€240.18First

  Drag a handle, or focus the list and press Space on a row

  The first line of the fileInvoice number;Customer;Issue date;Total
  Код и пропы

• Кого будят первым

  В строках нечего нажимать, поэтому :handle-only="false" разрешает тянуть строку целиком. max-height превращает список в собственный скроллер, который сам прокручивается у краёв, пока строку несут; change сообщает о завершённом переносе — момент сохранить, — а слот item получает dragging и grabbed, чтобы отметить несомую строку.

  Escalation order · payments incidentsOrder saved · 7 people

  1MOMina OrtizPayments · +351 912 004 118first

  2DKDaniel KimBilling · +44 7700 900 431

  3GWGrace WuPlatform · +353 87 555 0192

  4JWJonas WeberPlatform · +49 151 2345 6789

  5ATAiko TanakaBilling · +351 913 552 701

  6LMLucas MartinPayments · +33 6 12 34 56 78

  7SLSara LindqvistSupport · +46 70 123 45 67
  Код и пропы

• Обложка объявления

  orientation="horizontal" раскладывает фотографии рядом с переносом и переводит клавиатуру на ←/→; первая — обложка. Плиткам линии не нужны, поэтому divided выключен. Опубликованное объявление держит порядок — disabled оставляет его читаемым, — а когда удалены все фотографии, слот empty объясняет, что это значит, и предлагает вернуть.

  2-room flat in Alfama · photosPublished

  CoverLiving room

  Kitchen

  Bedroom

  Balcony
  Код и пропы

API порождается из пакета · разойтись не может

import type { GrSortableListProps, GrSortableListEmits, GrSortableOrientation } from '@feugene/granularity/components/GrSortableList'

interface GrSortableListProps<TItem = unknown> {
    /** Набор в текущем порядке. `v-model`: наружу уходит новый массив, вход не мутируется. */
    modelValue: TItem[];
    /** Ключ элемента: имя поля или функция. Без него — индекс. */
    itemKey?: string | ((item: TItem, index: number) => string | number);

interface GrSortableListEmits<TItem = unknown> {
    /** Новый порядок после переноса — новый массив; исходный не мутируется. */
    (e: 'update:modelValue', value: TItem[]): void;
    /** Строка перенесена с индекса `from` на `to`. Шлётся только по завершении переноса. */
    (e: 'move', from: number, to: number): void;
    /** Перестановка завершена — тот же массив, что ушёл в `update:modelValue`. */
    (e: 'change', value: TItem[]): void;
}

type GrSortableOrientation = 'horizontal' | 'vertical';

const grSortableListConfig: import("@feugene/granum/contract").GranumComponentDescriptor<"GrSortableList">;

const grSortableListSafelist: string[];

type GrSortableListInstance = ComponentExposed<typeof GrSortableListComponent>;

Доступность

Полный контракт пакета: docs/keyboard.md ↗

Связанные четвёртый вопрос: когда не это

• GrTransferФормы

  Переносить между двумя списками

• GrListДанные

  Порядок фиксирован

• GrTreeДанные

  Элементы вложены

• GrDataTableДанные

  Строки только выбирают, не двигают

• GrDashboardДашборд

  Виджеты на двумерной сетке

• GrCarouselДанныессылается сюда

  Берут, когда галерея товара или объекта.

• GrChipДанныессылается сюда

  Берут, когда снимаемая метка у сущности.

• GrFormFileФормыссылается сюда

  Берут, когда файл — значение поля.