refactor: simplify header key retrieval logic in table component

Refs: #6890
public-ui · Nov 25, 2024 · b72d614 · b72d614
1 parent 544a467
commit b72d614
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 28 deletions.
diff --git a/packages/components/src/components/table-stateless/component.tsx b/packages/components/src/components/table-stateless/component.tsx
@@ -21,7 +21,6 @@ import type {
 	TableStatelessStates,
 } from '../../schema';
 import {
-	devHint,
 	validateLabel,
 	validateTableCallbacks,
 	validateTableData,
@@ -259,30 +258,17 @@ export class KolTableStateless implements TableStatelessAPI {
 		return max;
 	}
 
-	/**
-	 * Header keys are only the keys that are in the last header line,
-	 * because the columns are divided into the most granular form in this line.
-	 */
 	private getThePrimaryHeadersWithKeysIfExists(headers: KoliBriTableHeaderCell[][]): KoliBriTableHeaderCell[] {
 		const primaryHeadersWithKeys: KoliBriTableHeaderCell[] = [];
-		const lastIdx = headers.length - 1;
-		const lastRow = headers[lastIdx];
-		if (!Array.isArray(lastRow)) {
-			devHint('The header is not an array.');
-			return primaryHeadersWithKeys;
-		}
-		lastRow.forEach((cell, idx) => {
-			if (typeof cell.key === 'string') {
-				/**
-				 * Interessting cases
-				 * - An empty key should also work.
-				 * - The key property is duplicated in the header cell.
-				 */
-				primaryHeadersWithKeys.push(cell);
-			} else {
-				devHint(`The key property is missing in the header cell (${idx}).`);
-			}
+
+		headers.forEach((cells) => {
+			cells.forEach((cell) => {
+				if (typeof cell.key === 'string') {
+					primaryHeadersWithKeys.push(cell);
+				}
+			});
 		});
+
 		return primaryHeadersWithKeys;
 	}
 

diff --git a/packages/samples/react/src/components/table/complex-headers.tsx b/packages/samples/react/src/components/table/complex-headers.tsx
@@ -53,8 +53,9 @@ export const TableComplexHeaders: FC = () => (
 					horizontal: [
 						[
 							{
-								label: '',
-								asTd: true,
+								label: 'District',
+								rowSpan: 2,
+								key: 'asp',
 							},
 							{
 								label: 'Workdays',
@@ -66,10 +67,6 @@ export const TableComplexHeaders: FC = () => (
 							},
 						],
 						[
-							{
-								label: 'District',
-								key: 'asp',
-							},
 							{
 								label: 'Monday',
 								key: 'monday',