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 when consecutive cells in a column have the same value and should visually appear as a single merged cell. Note: This feature is disabled when cells are rendered as 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 on TableHeaderCell and TableCell level
  Changing the horizontalAlign property on TableHeaderCell level changes only the TableHeaderCell itself and those TableCell 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. When a cell is merged, its content is hidden and the border becomes transparent, giving the appearance of a single spanning cell. This is useful when consecutive rows share the same value in a column.

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

• Popin mode: When the table is narrow and cells are rendered in the popin 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 (e.g., buttons, inputs, or links).