TableHeaderCell

<ui5-table-header-cell> | Since 2.0.0

The ui5-table-header-cell component represents a column in the ui5-table.

As it is tightly coupled to the ui5-table, it should only be used in the ui5-table-header-row to ensure correct layout and design.

Accessibility

When the header-click event is used to open a menu or a dialog, set the aria-haspopup attribute on the ui5-table-header-cell correspondingly. This allows assistive technologies to properly announce the associated popup.

<ui5-table-header-cell interactive aria-haspopup="menu">Column Header</ui5-table-header-cell>

ES6 Module Import

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

Basic Sample

The Popin mode is a responsive design feature tailored to adapt column layouts in UI grids or tables, particularly for smaller screens or constrained container widths.

When screen space becomes limited, Popin mode seamlessly reorganizes columns. Those that cannot fit within the available width are intelligently relocated to the "popin area", an allocated space designed specifically for accommodating additional columns.

You can influence the order of columns appearing in the pop-in area by defining the importance of each column.

You can hide specific columns in the popin by using the popinHidden property on the ui5-table-header-cell. Note: Hiding columns in the popin leads to accessibility issues as information is lost on smaller screens.

Properties

horizontalAlign

Description	Determines the horizontal alignment of table cells.
Type	"Center" | "End" | "Left" | "Right" | "Start" | undefined (value descriptions in: TableCellHorizontalAlign)
Default	undefined

importance

Description	Defines the importance of the column. This property affects the popin behaviour. Columns with higher importance will move into the popin area later then less important columns.
Type	number
Default	0

interactive

Description	Defines whether the column header is interactive. If set to true, the column header can be activated by a click, Enter or Space, which fires the header-click event and can be used, for example, to open a column menu. A hover effect is shown to signal the interactivity to the user. Note: If the click opens a menu or dialog, set the aria-haspopup attribute on the ui5-table-header-cell correspondingly. This allows assistive technologies to properly announce the associated popup.
Type	boolean
Default	false
Since	2.29.0

minWidth

Description	Defines the minimum width of the column. If the table is in Popin mode and the minimum width does not fit anymore, the column will move into the popin. By default, the table prevents the column from becoming too small. Changing this value to a small value might lead to accessibility issues. Note: This property only takes effect for columns with a <percentage> value or the default width.
Type	string | undefined
Default	undefined

popinHidden

Description	Defines if the column is hidden in the popin. Note: Please be aware that hiding the column in the popin might lead to accessibility issues as users might not be able to access the content of the column on small screens.
Type	boolean
Default	false
Since	2.8.0

popinText

Description	The text for the column when it pops in.
Type	string | undefined
Default	undefined
Since	2.7.0

sortIndicator

Description	Defines the sort indicator of the column.
Type	"Ascending" | "Descending" | "None"
Default	"None"
Since	2.8.0

width

Description	Defines the width of the column. By default, the column will grow and shrink according to the available space. This will distribute the space proportionally among all columns with no specific width set. See <length> and <percentage> for possible width values.
Type	string | undefined
Default	undefined

Slots

action

Description	Defines the action of the column. Note: While multiple actions are technically possible, this is not supported.
Type	Array<TableHeaderCellActionBase>
Since	2.8.0

default

Description	Defines the content of the component.
Type	Array<Node>

Events

header-click

Description	Fired when the column header is activated by a click, Enter or Space. Note: This event is only fired if the interactive property is set to true.
Type	CustomEvent
Since	2.29.0
Bubbles	No
Cancelable	No

Methods

No methods available for this component.

CSS Parts

No CSS parts available for this component.

CSS Custom States

No CSS custom states available for this component.

More Samples

Column widths

You are able to set the width of the columns by using the width, minWidth and maxWidth property.

By default, columns will take up the available space if no width is defined. The ui5-table additionally ensures that the columns cannot become too small.

Horizontal cell alignment

Controls the horizontal alignment of cells by using the horizontalAlign property.

Please note that the behavior of horizontalAlign depends on where you set it:

• horizontalAlign is set on TableHeaderCell level
  Changes the horizontal alignment of the TableHeaderCell and its corresponding TableCell.
• horizontalAlign is set on TableCell level only
  The horizontal alignment is only changed for this one TableCell
• horizontalAlign is set at the TableHeaderCell and TableCell level
  Changing the horizontalAlign property at the TableHeaderCell level changes only the TableHeaderCell itself and those TableCell properties without a horizontalAlign property.