Skip to main content

TableCell

<ui5-table-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-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​

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

Slots​

default​

DescriptionDefines the content of the component.
TypeArray<Node>

Events​

No events available for this component.

Methods​

No methods available for this component.

CSS Parts​

No CSS parts 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.