> For the complete documentation index, see [llms.txt](https://bogdanov-inc.gitbook.io/ui-konstruktor-oktell/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bogdanov-inc.gitbook.io/ui-konstruktor-oktell/kontroly/dinamicheskii-spisok.md).

# Динамический список

<div align="left"><figure><img src="https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2F8QutqUMep0LiJJdQjceb%2Fimage.png?alt=media&amp;token=3d6e9987-1394-4ff2-9474-f1711d3af003" alt=""><figcaption><p>Иконка в списке компонентов</p></figcaption></figure></div>

Компонент для отрисовки группы компонентов на основе массива данных

#### Свойства:

* *<mark style="color:purple;">placeholder</mark>* - текст, отображаемый в компоненте, если в нём отсутствуют данные *<mark style="color:purple;">data</mark>*
* *<mark style="color:purple;">dataConfig</mark>* - настройки отображения элементов:
  * *<mark style="color:purple;">identifierKey</mark>* - поле элемента массива, которое необходимо использовать в качестве идентификатора при вызове событий внутренних компонентов. При пустом значении будет использован индекс элемента массива.
  * *<mark style="color:purple;">childData</mark>* - путь до вложенного массива, в случае, если текущий компонент динамического списка является дочерним элементом другого динамического списка
  * *<mark style="color:purple;">horizontal</mark>* - горизонтальный вариант отрисовки списка
  * *<mark style="color:purple;">gridGap</mark>* - отступ между элементами списка
* *<mark style="color:purple;">data</mark>* - массив данных, на основе которых будет отрисован список элементов

Пример данных *<mark style="color:purple;">data</mark>* :

```javascript
[
    {
      "id": 124,
      "name": "Очередь 1",
      "type": "queue_all",
      "timestartutc": "2023-05-20T12:45",
      "timestoputc": "2023-05-20T12:55",
      "status": "status_1",
      "load": 90,      
      "calls": [
        {
          "id": "248852",
          "timestartutc": "2023-10-02T09:07:49+00:00",
          "timestoputc": "2023-10-02T09:12:34+00:00",
          "duration": 20,
          "avatar": "https://placehold.co/60x60",
          "title": "Морозов А.",
          "direction": "out",
          "calltype": "waiting"
        },
        {
          "id": "952774",
          "timestartutc": "2023-10-02T11:05:49+00:00",
          "timestoputc": "2023-10-02T12:45:11+00:00",
          "duration": 115,
          "avatar": "https://placehold.co/60x60",
          "title": "Гаспарян Э.",
          "direction": "in",
          "calltype": "ivr"
        }
      ],
      "summary": [
        {
          "title": "Активные",
          "value": "25"
        },
        {
          "title": "В очереди",
          "value": "5"
        },
        {
          "title": "На этапе IVR",
          "value": "2"
        }
      ],
    },
    {
      "id": 123,
      "name": "Очередь ожидания",
      "type": "queue_waiting",
      "timestartutc": "2023-05-24T13:15",
      "timestoputc": "2023-05-24T14:20",
      "status": "status_2",
      "load": 150
    },
]
```

Подробнее о практическом применении компонента рассказано в разделе Примеры