Таблица данных

Таблицы позволяют собирать большое количество данных и представлять их в четкой и упорядоченной форме.

Простая таблица

Используется для отображения простых данных (строковых, числовых, дат), которые заполняются в свойстве data и представляют собой двумерный массив с простыми данными.

Слотовая таблица

Представляет собой более сложную реализацию в виде доступных слотов data и header. Используется для размещения сложных данных и компонентов (кнопок, лейблов) в заголовке и теле таблице.

Внутри слота data используются компоненты CdsDataTableBody, CdsDataTableRow и CdsDataTableCell.

Внутри слота header используются компоненты CdsDataTableRow и CdsDataTableHeader

Таблица с панелью

Панель в таблице используется для управления данными.

Наполнение панели компонентами происходит через slot toolbar.

Таблица с группировкой данных

В простой реализации таблицы при помощи управления свойством data, необходимо положить данные в трехмерный массив, где на первом уровне будут группы, а далее по аналогии с простой таблицей. Используется для группировки однородных данных.

Раскрывающаяся таблица

Представляет собой более сложную реализацию в виде доступных слотов data и header.

Слот expandableContent используется внутри компонента CdsDataTableRow

Без данных

Предусмотрено состояние, которое отображается вместо таблицы, если данные отсутствуют.

В таком случае в cлот empty-message необходимо установить сообщение, которое отобразится в негативном состоянии.

Новое мажорное обновление!
Мы активно разрабатываем дизайн систему CDS 3.0 на Vue 3