diff --git a/packages/module/src/SkeletonTableHead/SkeletonTableHead.test.tsx b/packages/module/src/SkeletonTableHead/SkeletonTableHead.test.tsx
index ae81e3ad..5daaf3a1 100644
--- a/packages/module/src/SkeletonTableHead/SkeletonTableHead.test.tsx
+++ b/packages/module/src/SkeletonTableHead/SkeletonTableHead.test.tsx
@@ -1,13 +1,35 @@
import { render } from '@testing-library/react';
import SkeletonTableHead from './SkeletonTableHead';
-import { Table } from '@patternfly/react-table';
+import { Table, Th } from '@patternfly/react-table';
describe('SkeletonTableHead component', () => {
it('should render correctly with count', () => {
expect(render()).toMatchSnapshot();
});
- it('should render correctly with count', () => {
+ it('should render correctly with string columns', () => {
expect(render()).toMatchSnapshot();
});
+
+ it('should render correctly with Th element columns without nesting', () => {
+ const { container } = render(
+
+ First,
+ | Second |
+ ]}
+ />
+
+ );
+
+ // Ensure there are no nested elements
+ const theadCells = container.querySelectorAll('thead th');
+ theadCells.forEach(th => {
+ const nestedTh = th.querySelector('th');
+ expect(nestedTh).toBeNull();
+ });
+
+ expect(container).toMatchSnapshot();
+ });
});
diff --git a/packages/module/src/SkeletonTableHead/SkeletonTableHead.tsx b/packages/module/src/SkeletonTableHead/SkeletonTableHead.tsx
index 7cacc135..907caf1b 100644
--- a/packages/module/src/SkeletonTableHead/SkeletonTableHead.tsx
+++ b/packages/module/src/SkeletonTableHead/SkeletonTableHead.tsx
@@ -1,5 +1,5 @@
-import type { FunctionComponent } from 'react';
-import { ReactNode, useMemo } from 'react';
+import type { FunctionComponent, ReactElement } from 'react';
+import { ReactNode, useMemo, isValidElement } from 'react';
import {
Th,
ThProps,
@@ -10,6 +10,8 @@ import { Skeleton } from '@patternfly/react-core';
export const isThObject = (value: ReactNode | { cell: ReactNode; props?: ThProps }): value is { cell: ReactNode; props?: ThProps } => value != null && typeof value === 'object' && 'cell' in value;
+export const isReactElement = (value: ReactNode): value is ReactElement => isValidElement(value);
+
export interface SkeletonTableHeadProps {
/** Custom columns for the table */
columns?: (ReactNode | { cell: ReactNode; props?: ThProps })[];
@@ -41,18 +43,33 @@ export const SkeletonTableHead: FunctionComponent = ({
...(isExpandable ? [ | ] : []),
...(isSelectable && !isTreeTable ? [ | ] : []),
...(hasCustomColumns ? (
- columns.map((column, index) => (
-
- {isThObject(column) ? column.cell : column}
- |
- ))
+ columns.map((column, index) => {
+ // If the column is an object with cell and props, wrap in Th
+ if (isThObject(column)) {
+ return (
+
+ {column.cell}
+ |
+ );
+ }
+ // If the column is already a React element (like ), render it directly
+ if (isReactElement(column)) {
+ return column;
+ }
+ // Otherwise, wrap the content in Th
+ return (
+ |
+ {column}
+ |
+ );
+ })
) : (
[ ...Array(rowCellsCount) ].map((_, index) => (
|
))
- ))
+ ))
]
, [ hasCustomColumns, isExpandable, isSelectable, isTreeTable, columns, rowCellsCount, ouiaId ]);
diff --git a/packages/module/src/SkeletonTableHead/__snapshots__/SkeletonTableHead.test.tsx.snap b/packages/module/src/SkeletonTableHead/__snapshots__/SkeletonTableHead.test.tsx.snap
index 257d1fcb..399a9d7d 100644
--- a/packages/module/src/SkeletonTableHead/__snapshots__/SkeletonTableHead.test.tsx.snap
+++ b/packages/module/src/SkeletonTableHead/__snapshots__/SkeletonTableHead.test.tsx.snap
@@ -1,5 +1,104 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`SkeletonTableHead component should render correctly with Th element columns without nesting 1`] = `
+
+
+
+
+ |
+
+ |
+
+
+ |
+
+
+
+ |