Перейти к содержимому
v2.5.0
English
Русский
Документация

Table

Table — составной компонент для семантических табличных данных, когда нативная структура таблицы важнее взаимодействия с клавиатуры в стиле grid.

Пропсы корня

ПропТипПо умолчанию
dataAlign'start' | 'center' | 'end' | 'between''between'
Определяет стратегию выравнивания ячеек данных таблицы. 'start': выравнивает содержимое по левому краю; 'center': центрирует содержимое; 'end': выравнивает содержимое по правому краю; 'between': равномерно распределяет пространство между ячейками
edgePaddedbooleanfalse
Добавляет горизонтальные отступы по краям контейнера таблицы. Полезно, когда таблица не должна растягиваться до края области просмотра.
fullWidthboolean—
Растягивает таблицу на всю ширину контейнера.
fullHeightboolean—
Растягивает таблицу на всю высоту контейнера. Полезно для раскладок с прокручиваемыми или закреплёнными областями.
refRef<HTMLTableElement>—
Ref на нативный HTML-элемент <table>. Полезен для фокуса, измерений или императивного доступа.

Также принимает все атрибуты <table>.

Дочерние части

  • TableHead: семантическая секция заголовка.
  • TableBody: семантическая секция тела.
  • TableFoot: семантическая секция подвала.
  • TableRow: структура строки.
  • TableHeading: ячейка заголовка.
  • TableData: ячейка данных.

TableBody

Также принимает все атрибуты <tbody>.

TableData

ПропТипПо умолчанию
dataAlignTableProps['dataAlign']—
Управляет горизонтальным выравниванием содержимого ячейки. Наследуется от TableProps и обычно влияет на выравнивание текста или flex-раскладку. 'start' | 'center' | 'end' | 'between'

Также принимает все HTML-атрибуты.

TableFoot

Также принимает все атрибуты <tbody>.

TableHead

Также принимает все атрибуты <tbody>.

TableRow

Также принимает все атрибуты <tr>.

TableHeading

ПропТипПо умолчанию
dataAlignTableProps['dataAlign']—
Управляет горизонтальным выравниванием содержимого заголовка. Наследуется от TableProps и обычно влияет на выравнивание текста или раскладки. 'start' | 'center' | 'end' | 'between'

Также принимает все HTML-атрибуты.

Типы

  • TableProps
  • TableHeadProps
  • TableBodyProps
  • TableFootProps
  • TableRowProps
  • TableHeadingProps
  • TableDataProps

Модель состояния

  • Table не владеет интерактивным состоянием строк, как это делает DataGrid.
  • Корень передаёт частям-ячейкам контекст выравнивания и краевых отступов.
  • useTableContext доступен для продвинутых обёрток и собственных композиций.