diff --git a/packages/main/src/TableHeaderCell.ts b/packages/main/src/TableHeaderCell.ts
index 5107c46ffadfc..46dcb4dd5fe1c 100644
--- a/packages/main/src/TableHeaderCell.ts
+++ b/packages/main/src/TableHeaderCell.ts
@@ -4,6 +4,9 @@ import TableCellBase from "./TableCellBase.js";
import TableHeaderCellTemplate from "./TableHeaderCellTemplate.js";
import TableHeaderCellStyles from "./generated/themes/TableHeaderCell.css.js";
import SortOrder from "@ui5/webcomponents-base/dist/types/SortOrder.js";
+import Icon from "./Icon.js";
+import SortAscending from "@ui5/webcomponents-icons/dist/sort-ascending.js";
+import SortDescending from "@ui5/webcomponents-icons/dist/sort-descending.js";
import query from "@ui5/webcomponents-base/dist/decorators/query.js";
import type TableHeaderCellActionBase from "./TableHeaderCellActionBase.js";
import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
@@ -132,6 +135,21 @@ class TableHeaderCell extends TableCellBase {
ariaRole: string = "columnheader";
_popinWidth: number = 0;
+ get _sortIconComponent(): typeof Icon | undefined {
+ return this.sortIndicator === SortOrder.None ? undefined : Icon;
+ }
+
+ get _sortIcon(): string | undefined {
+ switch (this.sortIndicator) {
+ case SortOrder.Ascending:
+ return SortAscending;
+ case SortOrder.Descending:
+ return SortDescending;
+ default:
+ return undefined;
+ }
+ }
+
onBeforeRendering() {
super.onBeforeRendering();
this.style.textAlign = this.horizontalAlign || "";
diff --git a/packages/main/src/TableHeaderCellTemplate.tsx b/packages/main/src/TableHeaderCellTemplate.tsx
index 9f05d0ad74f14..2e1c7d5706fda 100644
--- a/packages/main/src/TableHeaderCellTemplate.tsx
+++ b/packages/main/src/TableHeaderCellTemplate.tsx
@@ -1,26 +1,14 @@
-import Icon from "./Icon.js";
-import SortOrder from "@ui5/webcomponents-base/dist/types/SortOrder.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) {
+ const SortIconComponent = this._sortIconComponent;
return (
<>
- { sortIcon.call(this) }
+ { SortIconComponent &&
+
+ }
>
);
}
-
-function sortIcon(this: TableHeaderCell) {
- switch (this.sortIndicator) {
- case SortOrder.Ascending:
- return ;
- case SortOrder.Descending:
- return ;
- default:
- return <>>;
- }
-}
diff --git a/packages/main/src/TableHeaderRow.ts b/packages/main/src/TableHeaderRow.ts
index b74ed87b799a6..9352f77d52297 100644
--- a/packages/main/src/TableHeaderRow.ts
+++ b/packages/main/src/TableHeaderRow.ts
@@ -105,6 +105,14 @@ class TableHeaderRow extends TableRowBase {
return (this._tableSelection as TableSelectionMulti).headerSelector === "ClearAll";
}
+ get _clearAllComponent() {
+ return this._tableSelection?.getClearAllComponent();
+ }
+
+ get _clearAllIcon() {
+ return this._tableSelection?.getClearAllIcon();
+ }
+
get _selectionCellAriaDescription() {
return this._tableSelection?.getAriaDescriptionForColumnHeader();
}
diff --git a/packages/main/src/TableHeaderRowTemplate.tsx b/packages/main/src/TableHeaderRowTemplate.tsx
index 68b4e4595eeb6..c41ea3d9559d5 100644
--- a/packages/main/src/TableHeaderRowTemplate.tsx
+++ b/packages/main/src/TableHeaderRowTemplate.tsx
@@ -1,12 +1,9 @@
-import CheckBox from "./CheckBox.js";
import TableHeaderCell from "./TableHeaderCell.js";
-import Icon from "./Icon.js";
-import IconMode from "./types/IconMode.js";
-import ClearAll from "@ui5/webcomponents-icons/dist/clear-all.js";
-import IconDesign from "./types/IconDesign.js";
import type TableHeaderRow from "./TableHeaderRow.js";
export default function TableHeaderRowTemplate(this: TableHeaderRow, ariaColIndex: number = 1) {
+ const SelectionComponent = this._selectionComponent;
+ const ClearAllComponent = this._clearAllComponent;
return (
<>
{ this._hasSelector &&
@@ -22,22 +19,25 @@ export default function TableHeaderRowTemplate(this: TableHeaderRow, ariaColInde
<>>
:
this._shouldRenderClearAll ?
-
+ (ClearAllComponent &&
+
+ )
:
-
+ >
}
}
diff --git a/packages/main/src/TableRow.ts b/packages/main/src/TableRow.ts
index 58d58ca40639c..0fcfdbeb854a9 100644
--- a/packages/main/src/TableRow.ts
+++ b/packages/main/src/TableRow.ts
@@ -212,6 +212,14 @@ class TableRow extends TableRowBase {
return TableRowBase.i18nBundle.getText(TABLE_ROW_OVERFLOW_BUTTON);
}
+ get _overflowButtonComponent(): typeof Button | undefined {
+ return this.actions.at(0)?.overflowButtonComponent;
+ }
+
+ get _overflowButtonIcon(): string | undefined {
+ return this.actions.at(0)?.overflowButtonIcon;
+ }
+
get _flexibleActions() {
const flexibleActions = this.actions.filter(action => !action.isFixedAction());
const fixedActionsCount = this.actions.length - flexibleActions.length;
diff --git a/packages/main/src/TableRowActionBase.ts b/packages/main/src/TableRowActionBase.ts
index 4c83b15aacf7d..561b34148518e 100644
--- a/packages/main/src/TableRowActionBase.ts
+++ b/packages/main/src/TableRowActionBase.ts
@@ -5,12 +5,13 @@ import type { UI5CustomEvent } from "@ui5/webcomponents-base";
import TableRowActionBaseTemplate from "./TableRowActionBaseTemplate.js";
import TableRowActionBaseStyles from "./generated/themes/TableRowActionBase.css.js";
+import Button from "./Button.js";
+import iconOverflow from "@ui5/webcomponents-icons/dist/overflow.js";
import type Menu from "./Menu.js";
import type MenuItem from "./MenuItem.js";
import type Table from "./Table.js";
import type TableRow from "./TableRow.js";
import type TableRowAction from "./TableRowAction.js";
-import type Button from "./Button.js";
let MenuConstructor: new () => Menu;
let MenuItemConstructor: new () => MenuItem;
@@ -56,6 +57,14 @@ abstract class TableRowActionBase extends UI5Element {
@property({ type: Boolean })
invisible = false;
+ get overflowButtonComponent(): typeof Button {
+ return Button;
+ }
+
+ get overflowButtonIcon(): string {
+ return iconOverflow;
+ }
+
private static _menu: Menu;
private static _menuItems = new WeakMap();
static async showMenu(actions: TableRowActionBase[], opener: HTMLElement) {
diff --git a/packages/main/src/TableRowBase.ts b/packages/main/src/TableRowBase.ts
index 0186d191132d6..4b021af3ea21d 100644
--- a/packages/main/src/TableRowBase.ts
+++ b/packages/main/src/TableRowBase.ts
@@ -144,6 +144,10 @@ abstract class TableRowBase extends
return !!this._tableSelection?.isMultiSelectable();
}
+ get _selectionComponent() {
+ return this._tableSelection?.getSelectionComponent();
+ }
+
get _hasSelector() {
return this._table?._isRowSelectorRequired;
}
diff --git a/packages/main/src/TableRowTemplate.tsx b/packages/main/src/TableRowTemplate.tsx
index 17a0850f863b5..f2f3b17f3a5ce 100644
--- a/packages/main/src/TableRowTemplate.tsx
+++ b/packages/main/src/TableRowTemplate.tsx
@@ -1,12 +1,9 @@
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 iconOverflow from "@ui5/webcomponents-icons/dist/overflow.js";
import type TableRow from "./TableRow.js";
export default function TableRowTemplate(this: TableRow, ariaColIndex: number = 1) {
+ const SelectionComponent = this._selectionComponent;
+ const OverflowButton = this._overflowButtonComponent;
return (
<>
{ this._hasSelector &&
@@ -17,20 +14,13 @@ export default function TableRowTemplate(this: TableRow, ariaColIndex: number =
data-ui5-table-selection-cell
data-ui5-acc-text=""
>
- { this._isMultiSelect ?
-
- :
-
+ >
}
}
@@ -62,13 +52,13 @@ export default function TableRowTemplate(this: TableRow, ariaColIndex: number =
))}
- { this._hasOverflowActions &&
-
+ >
}
{ this._fixedActions.map(action => (
diff --git a/packages/main/src/TableSelection.ts b/packages/main/src/TableSelection.ts
index e65c3d2392f47..33d2068ef227a 100644
--- a/packages/main/src/TableSelection.ts
+++ b/packages/main/src/TableSelection.ts
@@ -7,6 +7,8 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
import property from "@ui5/webcomponents-base/dist/decorators/property.js";
import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
import TableSelectionMode from "./types/TableSelectionMode.js";
+import CheckBox from "./CheckBox.js";
+import RadioButton from "./RadioButton.js";
import { isSelectionCell, isHeaderSelectionCell, findRowInPath } from "./TableUtils.js";
import type Table from "./Table.js";
import type { ITableFeature } from "./Table.js";
@@ -135,6 +137,18 @@ class TableSelection extends UI5Element implements ITableFeature {
return this.mode !== TableSelectionMode.None;
}
+ getSelectionComponent(): typeof CheckBox | typeof RadioButton {
+ return this.isMultiSelectable() ? CheckBox : RadioButton;
+ }
+
+ getClearAllComponent(): undefined {
+ return undefined;
+ }
+
+ getClearAllIcon(): undefined {
+ return undefined;
+ }
+
getAriaDescriptionForTable(): string | undefined {
return undefined;
}
diff --git a/packages/main/src/TableSelectionBase.ts b/packages/main/src/TableSelectionBase.ts
index 7578210a1c2d5..168e5de018257 100644
--- a/packages/main/src/TableSelectionBase.ts
+++ b/packages/main/src/TableSelectionBase.ts
@@ -1,6 +1,7 @@
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
import { property, eventStrict } from "@ui5/webcomponents-base/dist/decorators.js";
import { isInstanceOfTable } from "./TableUtils.js";
+import type Icon from "./Icon.js";
import type Table from "./Table.js";
import type TableRowBase from "./TableRowBase.js";
import type TableRow from "./TableRow.js";
@@ -106,6 +107,27 @@ abstract class TableSelectionBase extends UI5Element implements ITableFeature {
return this.behavior === TableSelectionBehavior.RowSelector;
}
+ /**
+ * Returns the component used to render the row selector (for example, `CheckBox` or `RadioButton`).
+ */
+ getSelectionComponent(): typeof UI5Element | undefined {
+ return undefined;
+ }
+
+ /**
+ * Returns the component used to render the "Clear All" selector in the column header.
+ */
+ getClearAllComponent(): typeof Icon | undefined {
+ return undefined;
+ }
+
+ /**
+ * Returns the icon name used for the "Clear All" selector in the column header.
+ */
+ getClearAllIcon(): string | undefined {
+ return undefined;
+ }
+
/**
* Returns the ARIA description of the Table as an alternative to aria-multiselectable.
*/
diff --git a/packages/main/src/TableSelectionMulti.ts b/packages/main/src/TableSelectionMulti.ts
index 34e46b5377d82..36a95db2d23d4 100644
--- a/packages/main/src/TableSelectionMulti.ts
+++ b/packages/main/src/TableSelectionMulti.ts
@@ -1,5 +1,8 @@
import { customElement, property } from "@ui5/webcomponents-base/dist/decorators.js";
import TableSelectionBase from "./TableSelectionBase.js";
+import CheckBox from "./CheckBox.js";
+import Icon from "./Icon.js";
+import ClearAll from "@ui5/webcomponents-icons/dist/clear-all.js";
import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
import { isSelectionCell, isHeaderSelectionCell, findRowInPath } from "./TableUtils.js";
import { isUpShift } from "@ui5/webcomponents-base/dist/Keys.js";
@@ -94,6 +97,18 @@ class TableSelectionMulti extends TableSelectionBase {
return true;
}
+ getSelectionComponent(): typeof CheckBox {
+ return CheckBox;
+ }
+
+ getClearAllComponent(): typeof Icon {
+ return Icon;
+ }
+
+ getClearAllIcon(): string {
+ return ClearAll;
+ }
+
isSelected(row: TableRowBase): boolean {
if (row.isHeaderRow()) {
return this.headerSelector === "ClearAll" ? true : this.areAllRowsSelected();
diff --git a/packages/main/src/TableSelectionSingle.ts b/packages/main/src/TableSelectionSingle.ts
index 85332ec173ecc..782befbb3b0ed 100644
--- a/packages/main/src/TableSelectionSingle.ts
+++ b/packages/main/src/TableSelectionSingle.ts
@@ -1,5 +1,6 @@
import { customElement, property } from "@ui5/webcomponents-base/dist/decorators.js";
import TableSelectionBase from "./TableSelectionBase.js";
+import RadioButton from "./RadioButton.js";
import type TableRow from "./TableRow.js";
/**
@@ -48,6 +49,10 @@ class TableSelectionSingle extends TableSelectionBase {
return rowKey ? this.selected === rowKey : false;
}
+ getSelectionComponent(): typeof RadioButton {
+ return RadioButton;
+ }
+
setSelected(row: TableRow, selected: boolean, fireEvent: boolean = false) {
const rowKey = this.getRowKey(row);
if (rowKey) {