refactor(ui5-table): use generics for table cell types

- Background of the growing button is also set
Fixes: #12765

Author: aborjinik

packages/main/src/Table.ts

@@ -634,7 +634,7 @@ class Table extends UI5Element {
 		}
 
 		const widths = [];
-		const visibleHeaderCells = this.headerRow[0]._visibleCells as TableHeaderCell[];
+		const visibleHeaderCells = this.headerRow[0]._visibleCells;
 
 		// Selection Cell Width
 		if (this._isRowSelectorRequired) {

packages/main/src/TableCustomAnnouncement.ts

@@ -202,7 +202,7 @@ class TableCustomAnnouncement extends TableExtension {
 			descriptions.push(i18nBundle.getText(TABLE_ROW_ACTIVE));
 		}
 
-		const cells = [...row._visibleCells, ...row._popinCells] as TableCell[];
+		const cells = [...row._visibleCells, ...row._popinCells];
 		cells.flatMap(cell => {
 			return cell._popin ? [cell._popinHeader!, cell._popinContent!] : [cell._headerCell, cell];
 		}).forEach(node => {

packages/main/src/TableHeaderRow.ts

@@ -45,7 +45,7 @@ import {
  *
  * @public
  */
-class TableHeaderRow extends TableRowBase {
+class TableHeaderRow extends TableRowBase<TableHeaderCell> {
 	/**
 	 * Defines the cells of the component.
 	 *

packages/main/src/TableRow.ts

@@ -35,7 +35,7 @@ import {
 	styles: [TableRowBase.styles, TableRowCss],
 	template: TableRowTemplate,
 })
-class TableRow extends TableRowBase {
+class TableRow extends TableRowBase<TableCell> {
 	/**
 	 * Defines the cells of the component.
 	 *

packages/main/src/TableRowBase.ts

@@ -25,8 +25,8 @@ import {
 	renderer: jsxRenderer,
 	styles: TableRowBaseCss,
 })
-abstract class TableRowBase extends UI5Element {
-	cells!: Array<TableCellBase>;
+abstract class TableRowBase<TCell extends TableCellBase = TableCellBase> extends UI5Element {
+	cells!: Array<TCell>;
 
 	@property({ type: Number, noAttribute: true })
 	_invalidate = 0;

packages/main/src/themes/TableGrowing.css

@@ -6,6 +6,7 @@
 	flex-direction: column;
 	cursor: pointer;
 	border-bottom: 1px solid var(--sapList_BorderColor);
+	background: var(--sapList_Background);
 }
 
 #button:focus {