ДокументацияРазделы, компоненты, системы и их подразделы
Data Grid
Интерактивные табличные данные
Data Display
Data Grid помогает работать с набором данных
Компонент подходит для таблиц, где пользователю нужны фильтрация, сортировка, группировка и быстрое изменение значений без перехода на отдельную страницу.
Фильтр и сортировка
Введите название проекта, владельца или статус. Нажмите на заголовок «Проект» или «Бюджет», чтобы изменить порядок строк. На узком экране удерживайте Shift и тяните таблицу мышью по горизонтали.
| Владелец | Статус | ||
|---|---|---|---|
|
ATAtlasАналитика
|
Анна | В норме | 840 000 ₽ |
BCBeaconМаркетинг |
Михаил | Нужна проверка | 460 000 ₽ |
CRCirrusИнфраструктура |
Ольга | Есть риск | 1 200 000 ₽ |
DLDeltaИсследование |
Илья | Завершён | 320 000 ₽ |
Статусы и изменение на месте
Статус задаётся модификатором бейджа. Ячейка владельца в первой строке редактируется двойным кликом или кнопкой «Изменить».
.ox-data-grid-badge.is-positiveПоложительный или завершённый статус..ox-data-grid-badge.is-warningСостояние, требующее внимания..ox-data-grid-badge.is-dangerОшибка, блокировка или высокий риск.data-ox-grid-editableРазрешает изменение ячейки по двойному клику или кнопке.
Минимальное подключение
Корневой атрибут запускает модуль. Строки и ячейки получают явные ключи, по которым компонент фильтрует и сортирует данные.
HTMLФильтр и сортировка
<div class="ox-data-grid" data-ox-ui="data-grid">
<input class="form-control" type="search" data-ox-grid-filter>
<div class="ox-data-grid-table-wrap">
<table class="ox-data-grid-table">
<thead>
<tr>
<th><button class="ox-data-grid-sort" data-ox-grid-sort="name">Проект</button></th>
</tr>
</thead>
<tbody>
<tr data-ox-grid-row>
<td data-ox-grid-cell="name" data-ox-grid-value="Atlas">Atlas</td>
</tr>
</tbody>
</table>
</div>
</div>data-ox-grid-filterПоле клиентского поиска по тексту строк.data-ox-grid-sort="name"Кнопка сортировки по ключу колонки.data-ox-grid-rowСтрока, участвующая в поиске и сортировке.data-ox-grid-valueЧистое значение для корректной числовой сортировки.