TableHeaderCell

<ui5-table-header-cell> | 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-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.

ES6 Module Import

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

Properties

width

Description	Defines the width of column.
Type	string
Default	"auto"

minWidth

Description	Defines the minimum width of the column. If the table is in Popin mode, the column will move into the popin when when the minimum width does not fit anymore.
Type	string
Default	"auto"

maxWidth

Description	Defines the maximum width of the column.
Type	string
Default	"auto"

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

horizontalAlign

Description	Determines the horizontal alignment of table cells. Note: All values valid for justify-content can be used not just the ones inside the enum.
Type	"Left" | "Start" | "Right" | "End" | "Center" | undefined
Default	undefined

Slots

default

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

Events

No events available for this component.

Methods

No methods available for this component.

CSS Parts

No CSS parts available for this component.

Column widths

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

Popin Configuration

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 the popin area, by defining the importance of each column.

Horizontal cell alignment

Control the horizontal alignment of cells by utilizing the horizontalAlign property.

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

1. horizontalAlign is set on TableHeaderCell level
   Changes the horizontal alignment of the TableHeaderCell and their corresponding TableCells.
2. horizontalAlign is set on TableCell level only
   The horizontal alignment is only changed for this one TableCell
3. horizontalAlign is set on TableHeaderCell and TableCell level
   Changing the horizontalAlign property on TableHeaderCell level changes only the TableHeaderCell itself and those TableCells without a horizontalAlign property.