TableSkeleton

TableSkeleton — заглушки ячеек Table на время загрузки: шиммер-плашка внутри обычной ячейки тела (TableSkeleton.Cell) или шапки (TableSkeleton.Head).

Своих Root, Header, Body и Row у скелетона нет: у таблицы нет зон, кроме разметки HTML, поэтому таблицу и строки собирают частями Table, а заглушками заменяют только ячейки. Так шапка может остаться настоящей, пока грузятся строки, а служебные колонки — пустыми ячейками со своей шириной.

Высоту строки, паддинги и высоту плашек задаёт size на Table.Root: плашка — одна строка шрифта ступени таблицы, поэтому строка-скелетон совпадает по высоте с настоящей.

Ячейки принимают атрибуты td и th (className, colSpan).

Анатомия

Table.Root
Table.Header
Table.Row
TableSkeleton.Head | Table.Head
Table.Body
Table.Row
TableSkeleton.Cell

Примеры

Настоящая шапка

Типовой сценарий: столбцы уже известны, грузятся только строки. Шапка рендерится как есть, тело — строками из TableSkeleton.Cell. Плашки скрыты от скринридеров (aria-hidden), поэтому признак загрузки — aria-busy на таблице.

ЗадачаИсполнительСтатус

API

Наследуется от ComponentProps<"td">

TableSkeleton.Head

Ячейка шапки (th) с плашкой вместо подписи — когда неизвестны и сами столбцы.

Наследуется от ComponentProps<"th">