diff --git a/packages/main/src/Table.ts b/packages/main/src/Table.ts
index feea14032107..8ea5bce6b201 100644
--- a/packages/main/src/Table.ts
+++ b/packages/main/src/Table.ts
@@ -13,7 +13,7 @@ import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
import TableTemplate from "./generated/templates/TableTemplate.lit.js";
import TableStyles from "./generated/themes/Table.css.js";
import TableRow from "./TableRow.js";
-import type TableHeaderRow from "./TableHeaderRow.js";
+import TableHeaderRow from "./TableHeaderRow.js";
import type TableHeaderCell from "./TableHeaderCell.js";
import TableExtension from "./TableExtension.js";
import type TableSelection from "./TableSelection.js";
@@ -160,6 +160,7 @@ type TableRowClickEventDetail = {
fastNavigation: true,
dependencies: [
BusyIndicator,
+ TableHeaderRow,
TableCell,
TableRow,
],
diff --git a/packages/main/src/TableRow.hbs b/packages/main/src/TableRow.hbs
index 9ce5f7951a41..21d9b81a4f2f 100644
--- a/packages/main/src/TableRow.hbs
+++ b/packages/main/src/TableRow.hbs
@@ -22,7 +22,9 @@
{{/each}}
{{#if _renderNavigated}}
-
+
+
+
{{/if}}
{{#if _popinCells.length}}
diff --git a/packages/main/src/themes/Table.css b/packages/main/src/themes/Table.css
index c602f2eb3b02..ffab6b155632 100644
--- a/packages/main/src/themes/Table.css
+++ b/packages/main/src/themes/Table.css
@@ -39,4 +39,8 @@
inset: 0;
height: 100%;
z-index: 2;
+}
+
+#loading[_is-busy] {
+ background-color: var(--_ui5_busy_indicator_block_layer);
}
\ No newline at end of file
diff --git a/packages/main/src/themes/TableHeaderRow.css b/packages/main/src/themes/TableHeaderRow.css
index 861ce99a3133..de8760eb9dd7 100644
--- a/packages/main/src/themes/TableHeaderRow.css
+++ b/packages/main/src/themes/TableHeaderRow.css
@@ -1,6 +1,5 @@
:host {
background: var(--sapList_HeaderBackground);
- grid-template-rows: var(--_ui5_list_item_base_height);
border-bottom: var(--sapList_BorderWidth) solid var(--sapList_HeaderBorderColor);
}
diff --git a/packages/main/src/themes/TableRow.css b/packages/main/src/themes/TableRow.css
index 27e968660340..6b5ef4b5aae1 100644
--- a/packages/main/src/themes/TableRow.css
+++ b/packages/main/src/themes/TableRow.css
@@ -34,15 +34,29 @@
}
#navigated-cell {
+ position: relative;
+ overflow: visible;
grid-row: span 2;
min-width: 0;
padding: 0;
}
-:host([navigated]) #navigated-cell {
+:host([navigated]) #navigated {
+ position: absolute;
+ inset: 0;
background-color: var(--sapList_SelectionBorderColor);
}
+:host([tabindex]:focus) #navigated {
+ transform: translateX(calc(var(--_ui5_table_navigated_cell_width) * -1));
+ bottom: 2px;
+ top: 3px;
+}
+
+:host([tabindex]:focus) #navigated:dir(rtl) {
+ transform: translateX(var(--_ui5_table_navigated_cell_width));
+}
+
:host([navigated]) #popin-cell {
grid-column: 1 / -2;
}
diff --git a/packages/main/src/themes/base/Table-parameters.css b/packages/main/src/themes/base/Table-parameters.css
index 970efb577542..202a244990da 100644
--- a/packages/main/src/themes/base/Table-parameters.css
+++ b/packages/main/src/themes/base/Table-parameters.css
@@ -1,5 +1,5 @@
:root {
--_ui5_table_cell_valign: center;
--_ui5_table_cell_min_width: 2.75rem;
- --_ui5_table_navigated_cell_width: 0.25rem;
+ --_ui5_table_navigated_cell_width: 0.1875rem;
}
\ No newline at end of file
diff --git a/packages/main/test/specs/Table.spec.js b/packages/main/test/specs/Table.spec.js
index 632e779b698e..90b3dbafb343 100644
--- a/packages/main/test/specs/Table.spec.js
+++ b/packages/main/test/specs/Table.spec.js
@@ -220,13 +220,13 @@ describe("Table - Navigated Rows", async () => {
assert.strictEqual(await navigatedCell1.getAttribute("excluded-from-navigation"), "", "The navigated cell is excluded from item navigation");
assert.strictEqual(await navigatedCell2.getAttribute("excluded-from-navigation"), "", "The navigated cell is excluded from item navigation");
- const navigatedCell1BG = await browser.executeAsync(done => {
- done(getComputedStyle(document.getElementById("row1").shadowRoot.querySelector("#navigated-cell")).backgroundColor);
+ const navigated1BG = await browser.executeAsync(done => {
+ done(getComputedStyle(document.getElementById("row1").shadowRoot.querySelector("#navigated")).backgroundColor);
});
- const navigatedCell2BG = await browser.executeAsync(done => {
- done(getComputedStyle(document.getElementById("row2").shadowRoot.querySelector("#navigated-cell")).backgroundColor);
+ const navigated2BG = await browser.executeAsync(done => {
+ done(getComputedStyle(document.getElementById("row2").shadowRoot.querySelector("#navigated")).backgroundColor);
});
- assert.notEqual(navigatedCell1BG, navigatedCell2BG, "Background color of navigated cell is different from the one of non-navigated cell");
+ assert.notEqual(navigated1BG, navigated2BG, "Background color of navigated cell is different from the one of non-navigated cell");
const gridTemplateColumns = await browser.executeAsync(done => {
done(document.getElementById("table1").shadowRoot.querySelector("#table").style.gridTemplateColumns);
diff --git a/packages/website/docs/_samples/main/Table/Selection/main.js b/packages/website/docs/_samples/main/Table/Selection/main.js
index a2ed3ca89189..89d32b1a8118 100644
--- a/packages/website/docs/_samples/main/Table/Selection/main.js
+++ b/packages/website/docs/_samples/main/Table/Selection/main.js
@@ -1,6 +1,7 @@
import "@ui5/webcomponents/dist/Table.js";
import "@ui5/webcomponents/dist/TableHeaderRow.js";
import "@ui5/webcomponents/dist/TableHeaderCell.js";
+import "@ui5/webcomponents/dist/TableSelection.js";
import "@ui5/webcomponents/dist/Label.js";
import "@ui5/webcomponents/dist/Input.js";
import "@ui5/webcomponents/dist/ComboBox.js";
diff --git a/packages/website/docs/_samples/main/Table/Selection/sample.html b/packages/website/docs/_samples/main/Table/Selection/sample.html
index e3cba7abef26..8a3ab932c9aa 100644
--- a/packages/website/docs/_samples/main/Table/Selection/sample.html
+++ b/packages/website/docs/_samples/main/Table/Selection/sample.html
@@ -12,7 +12,7 @@