fix(ui5-table): fixes noData slot issue (#11397)

aborjinik · web-flow · commit 1dda953a79a0 · 2025-04-23T22:45:59.000+02:00
diff --git a/packages/main/cypress/specs/Table.cy.tsx b/packages/main/cypress/specs/Table.cy.tsx
@@ -64,6 +64,26 @@ describe("Table - Rendering", () => {
 		cy.wait(500);
 	});
 
+	it("tests if table is rendered with no data slot", () => {
+		cy.mount(
+			<Table id="table">
+				<TableHeaderRow slot="headerRow">
+					<TableHeaderCell></TableHeaderCell>
+				</TableHeaderRow>
+				<div slot="noData" id="noData">
+					<Label>No data found</Label>
+				</div>
+			</Table>
+		);
+
+		cy.get("#table").shadow().find('slot[name=noData]').as("noDataSlot");
+		cy.get("@noDataSlot").should("exist");
+		cy.get("@noDataSlot").then(($noDataSlot) => {
+			const noDataElement = ($noDataSlot[0] as HTMLSlotElement).assignedElements()[0];
+			cy.wrap(noDataElement).should("have.attr", "id", "noData")
+		});
+	});
+
 	it("columns have equal widths width default width", () => {
 		cy.mount(
 			<Table style="width: 400px;" id="table">
diff --git a/packages/main/src/TableTemplate.tsx b/packages/main/src/TableTemplate.tsx
@@ -27,7 +27,7 @@ export default function TableTemplate(this: Table) {
 					<TableRow id="no-data-row">
 						<TableCell id="no-data-cell" data-excluded-from-navigation horizontal-align="Center">
 							{ this.noData.length > 0 ?
-								<slot name="no-data"></slot>
+								<slot name="noData"></slot>
 								:
 								this._effectiveNoDataText
 							}
diff --git a/packages/website/docs/_components_pages/main/Table/Table.mdx b/packages/website/docs/_components_pages/main/Table/Table.mdx
@@ -46,7 +46,7 @@ Enable a sticky header by utilizing the properties `sticky` and `sticky-top` of
 
 ### No Data
 
-You can provide an illustration or a custom text, that is shown when the table has no data using the `no-data` slot.
+You can provide an illustration or a custom text, that is shown when the table has no data using the `noData` slot.
 
 <NoDataSlot />
 
diff --git a/packages/website/docs/_samples/main/Table/NoDataSlot/sample.html b/packages/website/docs/_samples/main/Table/NoDataSlot/sample.html
@@ -11,7 +11,7 @@
 <body style="background-color: var(--sapBackgroundColor)">
 <!-- playground-fold-end -->
 	<ui5-table id="table" overflow-mode="Popin">
-		<ui5-illustrated-message slot="no-data" name="NoData"></ui5-illustrated-message>
+		<ui5-illustrated-message slot="noData" name="NoData"></ui5-illustrated-message>
 <!-- playground-fold -->
 		<ui5-table-header-row slot="headerRow">
 			<ui5-table-header-cell id="produtCol" width="300px"><span>Product</span></ui5-table-header-cell>

Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@ export default function TableTemplate(this: Table) {`
`27`	`27`	`<TableRow id="no-data-row">`
`28`	`28`	`<TableCell id="no-data-cell" data-excluded-from-navigation horizontal-align="Center">`
`29`	`29`	`{ this.noData.length > 0 ?`
`30`		`- <slot name="no-data"></slot>`
	`30`	`+ <slot name="noData"></slot>`
`31`	`31`	`:`
`32`	`32`	`this._effectiveNoDataText`
`33`	`33`	`}`