TableRowAction

<ui5-table-row-action> | Since 2.7.0

The ui5-table-row-action component defines an action for table rows.

ES6 Module Import

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

Properties

icon

Description	Defines the icon of the row action. Note: For row actions to work properly, this property is mandatory. Note: SAP-icons font provides numerous built-in icons. To find all the available icons, see the Icon Explorer.
Type	string
Default	""

text

Description	Defines the text of the row action. Note: For row actions to work properly, this property is mandatory.
Type	string
Default	""

invisible

Description	Defines the visibility of the row action. Note: Invisible row actions still take up space, allowing to hide the action while maintaining its position.
Type	boolean
Default	false

Slots

No slots available for this component.

Events

click

Description	Fired when a row action is clicked.
Type	CustomEvent
Since	2.9.0
Bubbles	Yes
Cancelable	No

Methods

No methods available for this component.

CSS Parts

No CSS parts available for this component.

Basic Sample

The ui5-table-row-action component lets you incorporate interactive elements into table rows, enabling users to take actions directly related to each row.

The row-action-count property of the ui5-table component determines the width of the row action column. A maximum value of 3 is recommended, as exceeding this limit may take up too much space on smaller screens. If the number of row actions exceeds the row-action-count, an overflow button will appear, providing access to the additional actions.

The invisible property of row actions allows you to hide specific row actions while preserving their space. This can be useful for consistent alignment of row actions across several rows.