> 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/grid.md).

# Грид

![](https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2FqvvFFu6xYiP838B7Wr17%2Fimage.png?alt=media\&token=b1b38386-e357-475c-a832-01168b79122d)

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

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

* *<mark style="color:purple;">showChildren</mark>* - отображение рабочей зоны компонента - используется для быстрого доступа к компонентам,  участвующим в отрисовке интерфейса строк таблицы
* *<mark style="color:purple;">placeholder</mark>* - текст, отображаемый в таблице, если в ней отсутствуют данные *<mark style="color:purple;">data</mark>*
* *<mark style="color:purple;">rowsAmount</mark>* - количество строк, одновременно отображающихся в таблице. Если массив данных *<mark style="color:purple;">data</mark>* имеет большее количество элементов, отобразится элемент пагинации, позволяющий переключать отображаемые строки
* *<mark style="color:purple;">selectableRows</mark>* - активирует режим выделения строк
* *<mark style="color:purple;">selectedRows</mark>* - массив id выделенных строк
* *<mark style="color:purple;">rowPaddings</mark>* - внутренние отступы строк. Аналогично общим настройкам отступов, но имеет два поля:
  * *<mark style="color:purple;">vertical</mark>* - отступы сверху и снизу
  * *<mark style="color:purple;">horizontal</mark>* - отступы слева и справа (Отступы в крайних левых/правых ячейках устанавливаются удвоенными от данного значения, чтобы визуальные промежутки ячеек соответствовали отступам по краям таблицы)
* *<mark style="color:purple;">borders</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
    },
    {
      "id": 123,
      "name": "Очередь ожидания",
      "type": "queue_waiting",
      "timestartutc": "2023-05-24T13:15",
      "timestoputc": "2023-05-24T14:20",
      "status": "status_2",
      "load": 150
    },
]
```

{% hint style="info" %} <mark style="color:red;">Важно</mark>: Параметр **id** в элементах данных является обязательным. Остальные названия параметров могут быть произвольные.
{% endhint %}

* *<mark style="color:purple;">headers</mark>* - настройки шапки таблицы
  * *<mark style="color:purple;">headerBg</mark>* - цвет фона шапки таблицы и разделителей, при активной группировке строк
  * *<mark style="color:purple;">columns</mark>* - наборные элементы ячеек шапки таблицы

#### Настройка столбцов

**Свойства** элементов *<mark style="color:purple;">columns</mark>***:**

* *<mark style="color:purple;">key</mark>* - ключ поля в элементе массива *<mark style="color:purple;">data</mark>*, данные которого будут отображаться в ячейках строк данного столбца
* *<mark style="color:purple;">title</mark>* - заголовок столбца таблицы
* *<mark style="color:purple;">valueType</mark>* - преобразование значения из data. поддерживает следующие варианты выбора:
  * **text** (или без значения) - значение выводится "как есть"
  * **number** - компонент попытается преобразовать значение в числовой формат. (например **"23 оператора"** преобразуется в **23**)
  * **date** - преобразование в дату формата **ГГГГ.ММ.ДД**&#x20;
  * **time** - преобразование в время формата **ЧЧ.мм**
  * **datetime** - комбинированное преобразование в **ГГГГ.ММ.ДД** **ЧЧ.мм**. Например, значение **2023-05-23T12:45** будет преобразовано в **23.05.2023 12:45**
* *<mark style="color:purple;">width</mark>* - ширина столбца таблицы
* *<mark style="color:purple;">hidden</mark>* - скрытие столбца таблицы.
* *<mark style="color:purple;">align</mark>* - выравнивание текста столбца таблицы. Выравниваться будет как заголовок, так и содержимое ячеек строк таблицы в данном столбце
* *<mark style="color:purple;">order</mark>* - приоритет отображения столбца таблицы. Столбцы таблицы отображаются отсортированными по данному значению в порядке возрастания.
* *<mark style="color:purple;">sortable</mark>* - активирует возможность сортировки строк таблицы по значению из элемента *<mark style="color:purple;">data</mark>* для данного столбца.

{% hint style="info" %}
При активном режиме группировки строк таблицы, отдельная сортировка по столбцу принудительно отключается
{% endhint %}

* *<mark style="color:purple;">icon</mark>* - иконка заголовка столбца таблицы
* *<mark style="color:purple;">childColumns</mark>* - вложенные колонки. Используется для случаев, когда несколько колонок таблицы объединены общим заголовком. В таком сценарии родительский заголовок отображается общим для всех дочерних столбцов, а под ним отображаются заголовки дочерних ячеек, при их наличии. Данные, передаваемые в ячейки строк таблицы в таком случае определяются настройками дочерних колонок.
* *<mark style="color:purple;">cellLinks</mark>* - привязки дочерних контролов таблицы к ячейкам строк

#### Привязка компонентов

**Свойства** элементов *<mark style="color:purple;">cellLinks</mark>***:**

* *<mark style="color:purple;">childId</mark>* - **id** дочернего компонента, который необходимо привязать к ячейке строки текущего столбца. Возможно также использовать любой доступный компонент из *<mark style="color:purple;">**state**</mark><mark style="color:purple;">.controls</mark>*, хоть такой подход и не рекомендуется
* *<mark style="color:purple;">key</mark>* - ключ элемента в массиве *<mark style="color:purple;">data</mark>*, со значением которого будет выполняться сравнение  условия отображения. По умолчанию сравнивается значение, указанное в настройках столбца таблицы. Используется в случаях, когда необходимо сравнить значение, отличное от того, которое настроено в столбце.
* *<mark style="color:purple;">conditionType</mark>* - условие отображения контрола в ячейке. Если описанное условие выполняется, то привязанный контрол будет отображен:
  * **constant** - всегда
  * **match** - в случае, когда значение в ячейке совпадает со значением, указанным в поле *<mark style="color:purple;">conditionValue</mark>*. В данном поле можно указывать несколько значений через запятую, тогда, при совпадении с любым из них, условие будет выполнено
  * **range** - в случае, когда значение в ячейке попадает в промежуток между указанными через запятую в *<mark style="color:purple;">conditionValue</mark>* значениями. Работает только если значение ячейки имеет числовой формат
  * **boolean** - в случае, когда [приведённое к булевому типу](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean#boolean_coercion) значение ячейки совпадает с указанным в *<mark style="color:purple;">conditionValue</mark>*
* *<mark style="color:purple;">conditionValue</mark>* - референсное значение для условия сравнения из *<mark style="color:purple;">conditionType</mark>*
* *<mark style="color:purple;">valueInjection</mark>* - активирует режим инъекции данных ячейки в дочерние контролы привязанные к текущей ячейке. Необходимо для того, чтобы иметь возможность отображать данные из таблицы в комплексных компонентах, состоящих из нескольких элементов. На данный момент поглощение таких значений поддерживается только для текстовых контролов, для чего в их настройках необходимо активировать соответствующее свойство *<mark style="color:purple;">valueConsumer</mark>*
* *<mark style="color:purple;">order</mark>* - порядок отображения компонента в ячейке. Аналогичен такому же параметру в настройках *<mark style="color:purple;">columns</mark>*

#### Группировка строк

* *<mark style="color:purple;">rowsGrouping</mark>* - настройки для режима группировки строк
  * *<mark style="color:purple;">key</mark>* - ключ элемента данных data используемый для группировки
  * *<mark style="color:purple;">valueType</mark>* - тип группировки
    * **plain** - строки будут сгруппированы по указанному в *<mark style="color:purple;">key</mark>* параметру по полному совпадению. В заголовке группы будет указано полное значение параметра
    * **alphabetic** - строки будут сгруппированы по первому символу указанного параметра. В заголовке будет отображён данных символ
    * **date** - строки будут сгруппированы по дате, по дням. В заголовке группы будет отображена дата. Используется для значений, которые корректно преобразуются в дату (например **2023-05-23T12:45**)&#x20;
  * *<mark style="color:purple;">sortDirection</mark>* - направление сортировки
    * **ascending** (по умолчанию) - по возрастанию
    * **descending** - по убыванию

#### События:

В компоненте поддерживаются следующие типы событий:

* *<mark style="background-color:purple;">onInit</mark>* - при первичной отрисовке компонента
* *<mark style="background-color:purple;">onSelect</mark>* - при выборе строки таблицы в режиме *<mark style="color:purple;">selectableRows.</mark>* в *<mark style="color:purple;">value</mark>* события отправляется массив **id** всех выделенных строк

Подробнее о практическом применении компонента рассказано в разделе [Примеры](/ui-konstruktor-oktell/primery/grid.md)