Skip to main content

TableHeaderRow

<ui5-table-header-row> | Since 2.0.0
info

This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change.

The ui5-table-header-row component represents the table headers of a ui5-table.

It is tightly coupled to the ui5-table and should therefore be used in the ui5-table only. The header row is placed in the headerRow slot of the table.

ES6 Module Import​

import "@ui5/webcomponents/dist/TableHeaderRow.js";

Properties​

sticky​

DescriptionSticks the ui5-table-header-row to the top of a table.
Note: If used in combination with overflowMode "Scroll", the table needs a defined height for the sticky header to work as expected.
Typeboolean
Defaultfalse

Slots​

default​

DescriptionDefines the cells of the component.
Note: Use ui5-table-header-cell for the intended design.
TypeArray<TableHeaderCell>

Events​

No events available for this component.

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.

Sticky Header Row​

Enable a sticky header by utilizing the properties sticky and sticky-top.

Sticky Behavior with scrollable table​

Sticky Behavior with scrollable container​

If your table is located inside of a scrollable container, you have other sticky content and your table is in Scroll mode, provide a height for the table for the sticky header to work as expected.