Перейти к содержимому

CoreDataTable

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

Табличный список однотипных записей: пользователь сканирует данные по строкам и сравнивает по колонкам быстрее, чем в карточках. Операционные данные — заказы, пользователи, платежи, логи; любая ячейка может показывать не просто текст, а кастомный элемент.

Семантика и доступность из коробки: table/th/td со scope, rowHeader-колонка — th scope="row" (связывает ячейку со строкой для скринридеров), caption/ariaLabel — имя таблицы и скролл-региона (region с tabindex — таблицу доезжает табом и листает стрелками, scrollable-region-focusable). Выбор строк: чекбоксы с именами из данных («Выбрать строку: Анна» — разные строки различимы в списке контролов), «выбрать все» с честным indeterminate при частичном выборе. Действия строк — кнопки «Удалить: Анна».

Сортировка управляемая: родитель держит состояние и сортирует rows, таблица объявляет намерение (sort) и направление через aria-sort на th; заголовок сортируемой колонки — кнопка, доступная с клавиатуры. Слоты: #<key> для любой ячейки (row + value), #empty вместо локализованного «Нет данных» (coreDataTable.empty); null/undefined показываются тире — пустая ячейка не выглядит дефектом вёрстки.

Асинхронная подгрузка — проп loading: indeterminate-прогресс вместо тела таблицы и aria-busy — «Нет данных» при загрузке не показывается, ведь грузящаяся таблица не пустая. Пагинация — за пределами компонента: страницы режет родитель, управление страницами — CorePagination (та же философия, что и у сортировки: данные и их разбивку владеет потребитель).

Активные объявления
Действия
Galaxy S22255 000,00 ₽Астана
iPhone 13320 000,00 ₽Алматы
Pixel 7210 000,00 ₽Минск
A
Нет данных

async-паттерн: в таблице indeterminate-прогресс вместо «Нет данных»