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 S22 | 255 000,00 ₽ | Астана | ||
| iPhone 13 | 320 000,00 ₽ | Алматы | ||
| Pixel 7 | 210 000,00 ₽ | Минск |
| A |
|---|
| Нет данных |
async-паттерн: в таблице indeterminate-прогресс вместо «Нет данных»