<script setup lang="ts">
const firstGroups = ref([
  { id: "g1", title: "Первая группа", rows: [{ id: "r1", name: "Элемент один", disabled: false }, { id: "r2", name: "Элемент два", disabled: false }, { id: "r3", name: "Элемент три", disabled: false }] },
])
const secondGroups = ref([
  { id: "g4", title: "Вторая группа", rows: [{ id: "r8", name: "Элемент четыре", disabled: false }] },
])
</script>

<template>
  <CoreSortableList
    v-model:items="firstGroups"
    group-id="sandbox-sortable-groups"
    list-label="Колонка 1"
    :item-label="(group) => group.title"
    drag-by-item
  >
    <template #default="{ item: group }">
      <CoreInput v-model="group.title" label="Группа" />
      <CoreSortableList v-model:items="group.rows" group-id="sandbox-sortable-rows"
        :list-label="group.title" :item-label="(row) => row.name"
        :is-item-disabled="(row) => row.disabled" drag-by-item>
        <template #default="{ item }">{{ item.name }}</template>
      </CoreSortableList>
    </template>
  </CoreSortableList>
</template>

::core-sortable-list
```yaml [props]
groupId: sandbox-sortable-groups
listLabel: Колонка 1
items:
  - id: g1
    title: Первая группа
    rows:
      - id: r1
        name: Элемент один
      - id: r2
        name: Элемент два
      - id: r3
        name: Элемент три
```
::


::core-sortable-list
```yaml [props]
groupId: sandbox-sortable-groups
listLabel: Колонка 2
items:
  - id: g4
    title: Вторая группа
    rows:
      - id: r8
        name: Элемент четыре
```
::