> 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/primery/grid.md).
# Грид
Пример использования компонента
Рассмотрим пример создания подобной таблицы в конструкторе:
Добавим компонент  в рабочую область конструктора.
По умолчанию в таблице установлен тестовый набор данных для ускорения прототипирования компонента, который имеет вид:
```javascript
[
{
"id": 124,
"name": "Очередь 1",
"type": "queue_all",
"timestartutc": "2023-05-20T12:45",
"timestoputc": "2023-05-20T12:55",
"status": "status_1",
"load": 90
},
{
"id": 123,
"name": "Очередь ожидания",
"type": "queue_waiting",
"timestartutc": "2023-05-24T13:15",
"timestoputc": "2023-05-24T14:20",
"status": "status_2",
"load": 150
},
]
```
Для того, чтобы установить собственный набор данных, необходимо добавить их напрямую во вкладке редактора **JSON** (форматирование также должно быть **JSON**). Либо получить их с бекенда и установить в значение соответствующего поля таблицы (*data*).
Сначала добавим необходимые столбцы, и сформируем тело таблицы. В *columns* зададим параметр *headerBg* выбрав цвет по усмотрению. Добавим колонку с отображением id строки. В опциях *columns* добавляем элемент, присваиваем его свойствам следующие значения:
```javascript
{
"key": "id",
"title": "ID",
"order": 10,
"hidden": false,
"sortable": true
},
```
Аналогичным образом настраиваем остальные столбцы. Для объединенного столбца **Продолжительность** настройки будут немного отличаться:
```javascript
{
"key": "time",
"title": "Продолжительность",
"valueType": "datetime",
"order": 20,
"childColumns": [
{
"key": "timestartutc",
"title": "С",
"valueType": "date",
"order": 10,
"width": "170px",
"sortable": true
},
{
"key": "timestoputc",
"title": "По",
"valueType": "datetime",
"order": 30,
"width": "170px"
}
],
"icon": {
"prefix": "oktell",
"name": "clock",
"id": "oktell-clock"
}
},
```
Для столбцов **timestartutc** и **timestoputc** указываем преобразование значения **date** или **datetime** по усмотрению.
Должна получиться таблица:
Добавим дочерние элементы таблицы для их привязки к ячейкам. Нам потребуются:
* Индикатор высокой загрузки . Является простым контейнером с размещённым в нём текстовым блоком, стилизованным согласно требуемому UI
* Индикатор средней загрузки . Аналогично предыдущему блоку.
* Числовые блоки отображения уровня загрузки  Являются также контейнерами с дочерними текстовыми блоками. Чтобы поглощаемое значение таблицы не переопределяло весь текст, а только числовое значение, имеет смысл разделить их на два отдельных текстовых блока "100" и "%". Активировать свойство *valueConsumer* для текстового блока "100"
* Блок управления очередью  . Всплывающее меню с набором действий. Более подробно о построении данного компонента можно узнать в описании компонента Кнопка
* Блок стилизованного названия очереди 
{% hint style="info" %}
На данный момент привязка элементов осуществляется вручную через указание id элемента. В будущем планируется упростить данное действие с помощью вспомогательного UI/UX. В текущей реализации имеет смысл задавать привязываемым элементам осмысленные id, для упрощения процесса их привязки, например **load\_high**, **load\_mid** и т.д.
{% endhint %}
Далее нам необходимо добавить привязки данных элементов к ячейкам таблицы в свойстве *cellLinks* раздела настроек *columns\[n]*. В настройках столбца с *key*: **load** откроем список *cellLinks*, затем добавим в него необходимые элементы:
Рассмотрим на примере привязки индикатора высокой загрузки. Устанавливаем следующие значения полей элемента привязки:
```javascript
{
"conditionType": "range",
"childId": "load_high",
"conditionValue": "201, 9999",
"order": 200
},
```
Таким образом, компонент будет отображаться в ячейках столбца **load**, в случае, если значение в соответствующей строке таблицы будет больше или равно **201**, но меньше **9999**
Для блока индикатора средней загрузки настройки аналогичны, кроме диапазона значений - устанавливаем его в **80**, **200**. Важно установить диапазоны таким образом, чтобы они не пересекались, если необходимо отображение только одного такого элемента в ячейке.
В блоке *cellLinks* этого же столбца добавим элемент числового отображения уровня загрузки. Сначала в настройках элемента *columns\[n]* активируем режим инъекции данных *valueInjection*, а затем добавим привязки необходимых элементов аналогично блокам индикации загрузки. Поскольку ранее мы активировали режим поглощения данных в текстовом блоке "100", то его значение будет заменено на значение **load** в конкретной ячейке.
Установим необходимые значения *order* для добавленных привязок для достижения желаемого расположения в ячейке Если все вышеописанные манипуляции выполнены корректно, то ячейки столбца **load** должны принять следующий вид:
Добавим столбец управления очередью. Ключ столбца можно указывать произвольный, т.к. в данном столбце нам не потребуются значения из таблицы. Добавим привязку элемента управления в данном столбце. Поскольку отображение данного компонента не предполагает условий, выбираем тип привязки **constant.** В ячейке отобразится элемент управления, по нажатию на который будет открыто всплывающее меню с набором действий с очередью соответствующей текущей строке таблицы.
{% hint style="info" %}
Во все дочерние компоненты строки таблицы передаётся **id** элемента *data*, соответствующего данной строке. Таким образом, при выполнении событий компонентов внутри строки они передают в поле *value* **id** данной строки, что позволяет на стороне **API** сервера идентифицировать к какому элементу относится данное действие. На данный момент это поддерживается только в событии *onClick.* т.к. сценарии с использованием прочих событий внутри таблицы маловероятны и неочевидны
{% endhint %}
Привязка стилизованного блока названия очереди аналогична блокам числовой индикации загрузки, поэтому рассматривать её не будем.
Добавим группировку строк по дате. Для этого установим соответствующие свойства в *rowsGrouping*:
```javascript
{
"key": "timestartutc",
"valueType": "date",
"sortDirection": "descending"
}
```
Итогом всех этих действий должна стать таблица вида:
