TableCell

<ui5-table-cell> | Since 2.0.0

The ui5-table-cell represents a cell inside of a ui5-table. It is tightly coupled to the ui5-table and thus should only be used in the table component.

ES6 Module Import

import @ui5/webcomponents/dist/TableCell.js;

Properties

horizontalAlign

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

merged

Description	Defines whether the cell is visually merged with the cell directly above it. This is useful if consecutive cells in a column have the same value and should visually appear as a single merged cell. Although the cell is visually merged with the previous one, its content must still be provided for accessibility purposes. Note: This feature is disabled when cells are rendered as a popin, and should remain false for interactive cell content.
Type	boolean
Default	false
Since	2.21.0

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.

CSS Custom States

No CSS custom states available for this component.

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.

Merged cells

Set the merged property on a TableCell to visually merge it with the cell directly above it in the same column. If a cell is merged, its content is hidden and the border becomes transparent, giving the appearance of a single spanning cell. This is useful if consecutive rows share the same value in a column.

To ensure usability, merged cell styling is automatically disabled in these cases:

• Popin mode: If the table is narrow, and cells are rendered in the pop-in area, merged styling is removed so each row's content remains visible.
• Hover and focus: When the user hovers over or focuses within the row, merged styling is temporarily removed, making the merged content visible.

Note: Avoid using merged on cells that contain interactive content (for example, buttons, or inputs).