refactor(ui5-table): remove some unnessary code

packages/main/cypress/specs/Table.cy.tsx

@@ -780,6 +780,7 @@ describe("Table - HeaderCell", () => {
 		cy.get("@headerCell1").contains("Column A");
 		cy.get("@headerCell2").should("have.attr", "aria-sort", "ascending");
 		cy.get("@headerCell2").find("ui5-table-header-cell-action-ai").as("actionB");
+		cy.get("@actionB").should("not.have.attr", "_popin");
 		cy.get("@actionB").shadow().find("ui5-button").as("actionBbutton");
 		cy.get("@actionBbutton").should("have.attr", "icon", "ai");
 		cy.get("@actionBbutton").should("have.attr", "tooltip", "Generated by AI");
@@ -805,6 +806,7 @@ describe("Table - HeaderCell", () => {
 		cy.get("@row1").find("ui5-table-cell[_popin]").as("row1popins");
 		cy.get("@row1popins").first().as("row1popinB");
 		cy.get("@row1popinB").shadow().find("ui5-table-header-cell-action-ai").as("row1popinBaction");
+		cy.get("@row1popinBaction").should("have.attr", "_popin");
 		cy.get("@row1popinBaction").shadow().find("ui5-button").as("row1popinBbutton");
 		cy.get("@row1popinBbutton").should("have.attr", "icon", "ai");
 		cy.get("@row1popinBbutton").should("have.attr", "design", "Transparent");

packages/main/src/Table.ts

@@ -2,6 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import {
 	customElement, slot, property, eventStrict, i18n,
 } from "@ui5/webcomponents-base/dist/decorators.js";
+import query from "@ui5/webcomponents-base/dist/decorators/query.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import TableTemplate from "./TableTemplate.js";
 import TableStyles from "./generated/themes/Table.css.js";
@@ -251,6 +252,7 @@ class Table extends UI5Element {
 		"move": TableMoveEventDetail;
 		"row-action-click": TableRowActionClickEventDetail;
 	}
+
 	/**
 	 * Defines the rows of the component.
 	 *
@@ -327,7 +329,6 @@ class Table extends UI5Element {
 	 * Available options are:
 	 *
 	 * <code>Scroll</code> - Columns are shown as regular columns and horizontal scrolling is enabled.
-	 *
 	 * <code>Popin</code> - Columns are shown as pop-ins instead of regular columns.
 	 *
 	 * @default "Scroll"
@@ -340,6 +341,7 @@ class Table extends UI5Element {
 	 * Defines if the loading indicator should be shown.
 	 *
 	 * **Note:** When the component is loading, it is not interactive.
+	 *
 	 * @default false
 	 * @public
 	 */
@@ -355,12 +357,6 @@ class Table extends UI5Element {
 	@property({ type: Number })
 	loadingDelay = 1000;
 
-	/**
-	 * Defines the sticky top offset of the table, if other sticky elements outside of the table exist.
-	 */
-	@property()
-	stickyTop = "0";
-
 	/**
 	 * Defines the maximum number of row actions that is displayed, which determines the width of the row action column.
 	 *
@@ -373,12 +369,39 @@ class Table extends UI5Element {
 	@property({ type: Number })
 	rowActionCount = 0;
 
+	/**
+	 * Defines the sticky top offset of the table, if other sticky elements outside of the table exist.
+	 */
+	@property()
+	stickyTop = "0";
+
 	@property({ type: Number, noAttribute: true })
 	_invalidate = 0;
 
 	@property({ type: Boolean, noAttribute: true })
 	_renderNavigated = false;
 
+	@query("[ui5-drop-indicator]")
+	dropIndicatorDOM!: DropIndicator;
+
+	@query("#nodata-row")
+	_nodataRow?: TableRow;
+
+	@query("#table-end-row")
+	_endRow!: TableRow;
+
+	@query("#table")
+	_tableElement!: HTMLElement;
+
+	@query("#before")
+	_beforeElement!: HTMLElement;
+
+	@query("#after")
+	_afterElement!: HTMLElement;
+
+	@query("#loading")
+	_loadingElement!: HTMLElement;
+
 	@i18n("@ui5/webcomponents")
 	static i18nBundle: I18nBundle;
 
@@ -417,10 +440,7 @@ class Table extends UI5Element {
 
 	onBeforeRendering(): void {
 		this._renderNavigated = this.rows.some(row => row.navigated);
-		if (this.headerRow[0]) {
-			this.headerRow[0]._rowActionCount = this.rowActionCount;
-		}
-		this.rows.forEach(row => {
+		[...this.headerRow, ...this.rows].forEach(row => {
 			row._renderNavigated = this._renderNavigated;
 			row._rowActionCount = this.rowActionCount;
 		});
@@ -616,32 +636,14 @@ class Table extends UI5Element {
 		return widths.join(" ");
 	}
 
-	get _tableOverflowX() {
-		return (this.overflowMode === TableOverflowMode.Popin) ? "clip" : "auto";
-	}
-
-	get _tableOverflowY() {
-		return "auto";
-	}
-
-	get _nodataRow() {
-		return this.shadowRoot!.getElementById("nodata-row") as TableRow;
-	}
-
-	get _beforeElement() {
-		return this.shadowRoot!.getElementById("before") as HTMLElement;
-	}
-
-	get _afterElement() {
-		return this.shadowRoot!.getElementById("after") as HTMLElement;
-	}
-
-	get _tableElement() {
-		return this.shadowRoot!.getElementById("table") as HTMLElement;
+	get _scrollContainer() {
+		return this._getVirtualizer() ? this._tableElement : findVerticalScrollContainer(this);
 	}
 
-	get _loadingElement() {
-		return this.shadowRoot!.getElementById("loading") as HTMLElement;
+	get _stickyElements() {
+		const stickyRows = this.headerRow.filter(row => row.sticky);
+		const stickyColumns = this.headerRow[0]._stickyCells as TableHeaderCell[];
+		return [...stickyRows, ...stickyColumns];
 	}
 
 	get _effectiveNoDataText() {
@@ -661,28 +663,9 @@ class Table extends UI5Element {
 		return (selection?.isSelectable() && this.rows.length) ? selection.isMultiSelectable() : undefined;
 	}
 
-	get _stickyElements() {
-		const stickyRows = this.headerRow.filter(row => row.sticky);
-		const stickyColumns = this.headerRow[0]._stickyCells as TableHeaderCell[];
-
-		return [...stickyRows, ...stickyColumns];
-	}
-
-	get _scrollContainer() {
-		return this._getVirtualizer() ? this._tableElement : findVerticalScrollContainer(this);
-	}
-
 	get isTable() {
 		return true;
 	}
-
-	get dropIndicatorDOM(): DropIndicator | null {
-		return this.shadowRoot!.querySelector("[ui5-drop-indicator]");
-	}
-
-	get _hasRowActions() {
-		return this.rowActionCount > 0;
-	}
 }
 
 Table.define();

packages/main/src/TableCell.ts

@@ -1,5 +1,4 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import TableCellTemplate from "./TableCellTemplate.js";
 import TableCellStyles from "./generated/themes/TableCell.css.js";
 import TableCellBase from "./TableCellBase.js";
@@ -27,7 +26,6 @@ import { LABEL_COLON } from "./generated/i18n/i18n-defaults.js";
  */
 @customElement({
 	tag: "ui5-table-cell",
-	renderer: jsxRenderer,
 	styles: [TableCellBase.styles, TableCellStyles],
 	template: TableCellTemplate,
 })

packages/main/src/TableCellBase.ts

@@ -1,11 +1,11 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import {
+	customElement, slot, property, i18n,
+} from "@ui5/webcomponents-base/dist/decorators.js";
+import { toggleAttribute } from "./TableUtils.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import TableCellBaseStyles from "./generated/themes/TableCellBase.css.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type TableCellHorizontalAlign from "./types/TableCellHorizontalAlign.js";
 
 /**
@@ -24,6 +24,7 @@ import type TableCellHorizontalAlign from "./types/TableCellHorizontalAlign.js";
 abstract class TableCellBase extends UI5Element {
 	/**
 	 * Defines the content of the component.
+	 *
 	 * @public
 	 */
 	@slot({ type: Node, "default": true })
@@ -54,11 +55,7 @@ abstract class TableCellBase extends UI5Element {
 	}
 
 	onBeforeRendering() {
-		if (this._popin) {
-			this.removeAttribute("role");
-		} else {
-			this.setAttribute("role", this.ariaRole);
-		}
+		toggleAttribute(this, "role", !this._popin, this.ariaRole);
 	}
 
 	getFocusDomRef() {

packages/main/src/TableDragAndDrop.ts

@@ -3,9 +3,8 @@ import { findClosestPosition } from "@ui5/webcomponents-base/dist/util/dragAndDr
 import Orientation from "@ui5/webcomponents-base/dist/types/Orientation.js";
 import handleDragOver from "@ui5/webcomponents-base/dist/util/dragAndDrop/handleDragOver.js";
 import handleDrop from "@ui5/webcomponents-base/dist/util/dragAndDrop/handleDrop.js";
-
-import type Table from "./Table.js";
 import TableExtension from "./TableExtension.js";
+import type Table from "./Table.js";
 
 export default class TableDragAndDrop extends TableExtension {
 	_table: Table;
@@ -25,7 +24,7 @@ export default class TableDragAndDrop extends TableExtension {
 			return;
 		}
 
-		this._table.dropIndicatorDOM!.targetReference = null;
+		this._table.dropIndicatorDOM.targetReference = null;
 	}
 
 	_ondragover(e: DragEvent) {
@@ -40,13 +39,13 @@ export default class TableDragAndDrop extends TableExtension {
 		);
 
 		if (!closestPosition) {
-			this._table.dropIndicatorDOM!.targetReference = null;
+			this._table.dropIndicatorDOM.targetReference = null;
 			return;
 		}
 
 		const { targetReference, placement } = handleDragOver(e, this._table, closestPosition, closestPosition.element, { crossDnD: true, originalEvent: true });
-		this._table.dropIndicatorDOM!.targetReference = targetReference;
-		this._table.dropIndicatorDOM!.placement = placement;
+		this._table.dropIndicatorDOM.targetReference = targetReference;
+		this._table.dropIndicatorDOM.placement = placement;
 	}
 
 	_ondrop(e: DragEvent) {

packages/main/src/TableGrowing.ts

@@ -1,21 +1,15 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
-import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-
-import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import {
-	isSpace,
-	isEnter,
-} from "@ui5/webcomponents-base/dist/Keys.js";
-
-import type Table from "./Table.js";
-import type { ITableGrowing } from "./Table.js";
+	customElement, property, eventStrict, i18n,
+} from "@ui5/webcomponents-base/dist/decorators.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import TableGrowingMode from "./types/TableGrowingMode.js";
 import TableGrowingTemplate from "./TableGrowingTemplate.js";
 import TableGrowingCss from "./generated/themes/TableGrowing.css.js";
+import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import type Table from "./Table.js";
+import type { ITableGrowing } from "./Table.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
 	TABLE_MORE,
 	TABLE_MORE_DESCRIPTION,
@@ -74,8 +68,8 @@ import {
  *
  * @public
  */
-@event("load-more", {
-	bubbles: true,
+@eventStrict("load-more", {
+	bubbles: false,
 })
 
 class TableGrowing extends UI5Element implements ITableGrowing {
@@ -221,10 +215,7 @@ class TableGrowing extends UI5Element implements ITableGrowing {
 			return;
 		}
 
-		const lastElement = this._table.shadowRoot?.querySelector("#table-end-row");
-		if (lastElement) {
-			this._getIntersectionObserver().observe(lastElement);
-		}
+		this._getIntersectionObserver().observe(this._table._endRow);
 	}
 
 	/**

packages/main/src/TableHeaderCell.ts

@@ -1,4 +1,5 @@
 import { customElement, property, slot } from "@ui5/webcomponents-base/dist/decorators.js";
+import { toggleAttribute } from "./TableUtils.js";
 import TableCellBase from "./TableCellBase.js";
 import TableHeaderCellTemplate from "./TableHeaderCellTemplate.js";
 import TableHeaderCellStyles from "./generated/themes/TableHeaderCell.css.js";
@@ -139,11 +140,7 @@ class TableHeaderCell extends TableCellBase {
 			// overwrite setting of TableCellBase so that the TableHeaderCell always uses the slot variable
 			this.style.justifyContent = `var(--horizontal-align-${this._individualSlot})`;
 		}
-		if (this.sortIndicator !== SortOrder.None) {
-			this.setAttribute("aria-sort", this.sortIndicator.toLowerCase());
-		} else if (this.hasAttribute("aria-sort")) {
-			this.removeAttribute("aria-sort");
-		}
+		toggleAttribute(this, "aria-sort", this.sortIndicator !== SortOrder.None, this.sortIndicator.toLowerCase());
 	}
 }
 

packages/main/src/TableHeaderCellActionAI.ts

@@ -27,6 +27,11 @@ class TableHeaderCellActionAI extends TableHeaderCellActionBase {
 	@i18n("@ui5/webcomponents")
 	static i18nBundle: I18nBundle;
 
+	onAfterRendering() {
+		super.onAfterRendering();
+		this.toggleAttribute("_popin", !this.parentElement?.hasAttribute("ui5-table-header-cell"));
+	}
+
 	getRenderInfo() {
 		return {
 			icon: "ai",

packages/main/src/TableHeaderCellActionBaseTemplate.tsx

@@ -1,4 +1,5 @@
 import Button from "./Button.js";
+import ButtonDesign from "./types/ButtonDesign.js";
 import type TableHeaderCellActionBase from "./TableHeaderCellActionBase.js";
 
 export default function TableHeaderCellActionBaseTemplate(this: TableHeaderCellActionBase) {
@@ -7,7 +8,7 @@ export default function TableHeaderCellActionBaseTemplate(this: TableHeaderCellA
 			icon={this._icon}
 			tooltip={this._tooltip}
 			onClick={this._onClick}
-			design="Transparent"
+			design={ButtonDesign.Transparent}
 		></Button>
 	);
 }

packages/main/src/TableHeaderCellTemplate.tsx

@@ -1,9 +1,8 @@
 import Icon from "./Icon.js";
 import SortOrder from "@ui5/webcomponents-base/dist/types/SortOrder.js";
-import type TableHeaderCell from "./TableHeaderCell.js";
-
 import SortAscending from "@ui5/webcomponents-icons/dist/sort-ascending.js";
 import SortDescending from "@ui5/webcomponents-icons/dist/sort-descending.js";
+import type TableHeaderCell from "./TableHeaderCell.js";
 
 export default function TableHeaderCellTemplate(this: TableHeaderCell) {
 	return (

packages/main/src/TableHeaderRow.ts

@@ -89,10 +89,6 @@ class TableHeaderRow extends TableRowBase {
 		return true;
 	}
 
-	get _hasRowActions() {
-		return this._table ? this._table._hasRowActions : false;
-	}
-
 	get _isSelectable() {
 		return this._isMultiSelect;
 	}

packages/main/src/TableHeaderRowTemplate.tsx

@@ -27,7 +27,7 @@ export default function TableHeaderRowTemplate(this: TableHeaderRow) {
 				<slot name={cell._individualSlot} key={cell._individualSlot}></slot>
 			))}
 
-			{ this._hasRowActions &&
+			{ this._rowActionCount > 0 &&
 				<TableHeaderCell id="actions-cell"
 					aria-label={this._i18nRowActions}
 				></TableHeaderCell>

packages/main/src/TableNavigation.ts

@@ -4,10 +4,10 @@ import {
 import isElementHidden from "@ui5/webcomponents-base/dist/util/isElementHidden.js";
 import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
 import { getTabbableElements } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
-import type Table from "./Table.js";
-import type TableRowBase from "./TableRowBase.js";
 import TableExtension from "./TableExtension.js";
 import GridWalker from "./GridWalker.js";
+import type TableRowBase from "./TableRowBase.js";
+import type Table from "./Table.js";
 
 /**
  * Handles the keyboard navigation for the ui5-table.
@@ -55,7 +55,7 @@ class TableNavigation extends TableExtension {
 
 		if (this._table.rows.length) {
 			this._table.rows.forEach(row => items.push(this._getNavigationItemsOfRow(row)));
-		} else {
+		} else if (this._table._nodataRow) {
 			items.push(this._getNavigationItemsOfRow(this._table._nodataRow));
 		}
 

packages/main/src/TableRow.ts

@@ -1,7 +1,6 @@
-import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import { customElement, slot, property } from "@ui5/webcomponents-base/dist/decorators.js";
 import { isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import { toggleAttribute } from "./TableUtils.js";
 import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
 import TableRowTemplate from "./TableRowTemplate.js";
 import TableRowBase from "./TableRowBase.js";
@@ -79,12 +78,12 @@ class TableRow extends TableRowBase {
 	/**
 	 * Defines the position of the row related to the total number of rows within the table when the `ui5-table-virtualizer` feature is used.
 	 *
-     * @default -1
+     * @default undefined
 	 * @since 2.5.0
      * @public
      */
 	@property({ type: Number })
-	position = -1;
+	position?: number;
 
 	/**
 	 * Defines the interactive state of the row.
@@ -114,25 +113,12 @@ class TableRow extends TableRowBase {
 	@property({ type: Boolean })
 	movable = false;
 
-	@property({ type: Boolean, noAttribute: true })
-	_renderNavigated = false;
-
 	onBeforeRendering() {
 		super.onBeforeRendering();
-		this.toggleAttribute("_interactive", this._isInteractive);
-		if (this.position !== -1) {
-			this.setAttribute("aria-rowindex", `${this.position + 1}`);
-		}
-		if (this._renderNavigated && this.navigated) {
-			this.setAttribute("aria-current", "true");
-		} else {
-			this.removeAttribute("aria-current");
-		}
-		if (this.movable) {
-			this.setAttribute("draggable", "true");
-		} else {
-			this.removeAttribute("draggable");
-		}
+		toggleAttribute(this, "_interactive", this._isInteractive);
+		toggleAttribute(this, "aria-rowindex", this.position !== undefined, `${this.position! + 1}`);
+		toggleAttribute(this, "aria-current", this._renderNavigated && this.navigated, "true");
+		toggleAttribute(this, "draggable", this.movable, "true");
 	}
 
 	async focus(focusOptions?: FocusOptions | undefined): Promise<void> {
@@ -176,11 +162,6 @@ class TableRow extends TableRowBase {
 		return this.interactive;
 	}
 
-	get _hasRowActions() {
-		// even if there are no actions visible or fixed, we still need to render the action cell to ensure alignment
-		return this._rowActionCount > 0;
-	}
-
 	get _hasOverflowActions() {
 		let renderedActionsCount = 0;
 		return this.actions.some(action => {

packages/main/src/TableRowActionBaseTemplate.tsx

@@ -1,5 +1,7 @@
 import Button from "./Button.js";
+import ButtonDesign from "./types/ButtonDesign.js";
 import Icon from "./Icon.js";
+import IconDesign from "./types/IconDesign.js";
 import type TableRowActionBase from "./TableRowActionBase.js";
 
 export default function TableRowActionBaseTemplate(this: TableRowActionBase) {
@@ -13,14 +15,14 @@ export default function TableRowActionBaseTemplate(this: TableRowActionBase) {
 						icon={this._icon}
 						tooltip={this._text}
 						onClick={this._onActionClick}
-						design="Transparent"
+						design={ButtonDesign.Transparent}
 					></Button>
 					:
 					<Icon
 						name={this._icon}
 						accessibleName={this._text}
 						showTooltip={true}
-						design="NonInteractive"
+						design={IconDesign.NonInteractive}
 					></Icon>
 			}
 		</>

packages/main/src/TableRowActionNavigation.ts

@@ -1,8 +1,8 @@
 import { customElement, property, i18n } from "@ui5/webcomponents-base/dist/decorators.js";
 import TableRowActionBase from "./TableRowActionBase.js";
-import { TABLE_NAVIGATION } from "./generated/i18n/i18n-defaults.js";
 import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { TABLE_NAVIGATION } from "./generated/i18n/i18n-defaults.js";
 
 /**
  * @class
@@ -36,6 +36,10 @@ class TableRowActionNavigation extends TableRowActionBase {
 	@i18n("@ui5/webcomponents")
 	static i18nBundle: I18nBundle;
 
+	isFixedAction() {
+		return true;
+	}
+
 	getRenderInfo() {
 		return {
 			text: this._i18nNavigation,
@@ -44,10 +48,6 @@ class TableRowActionNavigation extends TableRowActionBase {
 		};
 	}
 
-	isFixedAction() {
-		return true;
-	}
-
 	get _i18nNavigation() {
 		return TableRowActionNavigation.i18nBundle.getText(TABLE_NAVIGATION);
 	}

packages/main/src/TableRowBase.ts

@@ -1,14 +1,13 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { customElement, property, i18n } from "@ui5/webcomponents-base/dist/decorators.js";
 import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isInstanceOfTable, toggleAttribute } from "./TableUtils.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
-import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import TableRowBaseCss from "./generated/themes/TableRowBase.css.js";
+import query from "@ui5/webcomponents-base/dist/decorators/query.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type TableCellBase from "./TableCellBase.js";
-import TableRowBaseCss from "./generated/themes/TableRowBase.css.js";
 import type Table from "./Table.js";
-import { isInstanceOfTable } from "./TableUtils.js";
 import {
 	TABLE_ROW_SELECTOR,
 } from "./generated/i18n/i18n-defaults.js";
@@ -35,6 +34,15 @@ abstract class TableRowBase extends UI5Element {
 	@property({ type: Number, noAttribute: true })
 	_rowActionCount = 0;
 
+	@property({ type: Boolean, noAttribute: true })
+	_renderNavigated = false;
+
+	@query("#selection-cell")
+	_selectionCell?: HTMLElement;
+
+	@query("#navigated-cell")
+	_navigatedCell?: HTMLElement;
+
 	@i18n("@ui5/webcomponents")
 	static i18nBundle: I18nBundle;
 
@@ -44,11 +52,7 @@ abstract class TableRowBase extends UI5Element {
 	}
 
 	onBeforeRendering() {
-		if (this._isSelectable) {
-			this.setAttribute("aria-selected", `${this._isSelected}`);
-		} else {
-			this.removeAttribute("aria-selected");
-		}
+		toggleAttribute(this, "aria-selected", this._isSelectable, `${this._isSelected}`);
 	}
 
 	getFocusDomRef() {
@@ -101,10 +105,6 @@ abstract class TableRowBase extends UI5Element {
 		return !!this._tableSelection?.isRowSelectorRequired();
 	}
 
-	get _selectionCell() {
-		return this.shadowRoot!.getElementById("selection-cell");
-	}
-
 	get _visibleCells() {
 		return this.cells.filter(c => !c._popin);
 	}
@@ -114,11 +114,7 @@ abstract class TableRowBase extends UI5Element {
 	}
 
 	get _stickyCells() {
-		const selectionCell = this.shadowRoot?.querySelector("#selection-cell"),
-			navigatedCell = this.shadowRoot?.querySelector("#navigated-cell");
-
-		// filter out null/undefined
-		return [selectionCell, ...this.cells, navigatedCell].filter(cell => cell?.hasAttribute("fixed"));
+		return [this._selectionCell, ...this.cells, this._navigatedCell].filter(cell => cell?.hasAttribute("fixed"));
 	}
 
 	get _i18nRowSelector(): string {

packages/main/src/TableRowTemplate.tsx

@@ -1,8 +1,9 @@
-import type TableRow from "./TableRow.js";
 import TableCell from "./TableCell.js";
 import CheckBox from "./CheckBox.js";
 import RadioButton from "./RadioButton.js";
 import Button from "./Button.js";
+import ButtonDesign from "./types/ButtonDesign.js";
+import type TableRow from "./TableRow.js";
 
 export default function TableRowTemplate(this: TableRow) {
 	return (
@@ -37,7 +38,7 @@ export default function TableRowTemplate(this: TableRow) {
 				<slot name={cell._individualSlot}></slot>
 			))}
 
-			{ this._hasRowActions &&
+			{ this._rowActionCount > 0 &&
 				<TableCell id="actions-cell">
 					{ this._flexibleActions.map(action => (
 						<slot name={action._individualSlot}></slot>
@@ -47,7 +48,7 @@ export default function TableRowTemplate(this: TableRow) {
 						<Button
 							id="overflow"
 							icon="overflow"
-							design="Transparent"
+							design={ButtonDesign.Transparent}
 							onClick={this._onOverflowButtonClick}
 						></Button>
 					}

packages/main/src/TableUtils.ts

@@ -87,6 +87,18 @@ const throttle = (callback: () => void) => {
 	};
 };
 
+const toggleAttribute = (element: HTMLElement, attribute: string, condition: boolean | undefined, value?: string) => {
+	if (condition) {
+		if (value === undefined) {
+			element.toggleAttribute(attribute, true);
+		} else {
+			element.setAttribute(attribute, value);
+		}
+	} else if (element.hasAttribute(attribute)) {
+		element.removeAttribute(attribute);
+	}
+};
+
 export {
 	isInstanceOfTable,
 	isSelectionCheckbox,
@@ -96,4 +108,5 @@ export {
 	scrollElementIntoView,
 	isFeature,
 	throttle,
+	toggleAttribute,
 };

packages/main/src/TableVirtualizer.ts

@@ -219,7 +219,7 @@ class TableVirtualizer extends UI5Element implements ITableFeature {
 		}
 
 		const firstRow = this._table.rows[0];
-		if (firstRow && firstRow.position > 0) {
+		if (firstRow && firstRow.position !== undefined && firstRow.position > 0) {
 			const transform = firstRow.position * this.rowHeight;
 			return `translateY(${transform}px)`;
 		}