Merge branch 'main' into gmurcia/tearsheet

Author: GAUNSD

packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTable.md

@@ -74,6 +74,14 @@ To simulate this loading process, click the "Reload table" button and wait for t
 
 ```
 
+### Without header
+
+To render a skeleton table without a header (for example, when the real table header is already rendered above the loading state), set the `hasHeader` prop to `false`.
+
+```js file="./SkeletonTableNoHeaderExample.tsx"
+
+```
+
 ### Skeleton table head
 
 You can render only the `<Thead>` part of the skeleton table by using the `<SkeletonTableHead/>`.

packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableNoHeaderExample.tsx

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import SkeletonTable from '@patternfly/react-component-groups/dist/dynamic/SkeletonTable';
+
+export const SkeletonTableNoHeaderExample: FC = () => <SkeletonTable columnsCount={3} rowsCount={5} hasHeader={false} />;

packages/module/src/SkeletonTable/SkeletonTable.test.tsx

@@ -9,4 +9,16 @@ describe('SkeletonTable component', () => {
   it('should render correctly with rows', () => {
     expect(render(<SkeletonTable columns={[ 'First', 'Second' ]} rows={10} />)).toMatchSnapshot();
   });
+
+  it('should render without header when hasHeader is false', () => {
+    const { container } = render(<SkeletonTable columnsCount={2} hasHeader={false} />);
+    expect(container.querySelectorAll('thead')).toHaveLength(0);
+    expect(container.querySelectorAll('tbody')).toHaveLength(1);
+  });
+
+  it('should render with header by default', () => {
+    const { container } = render(<SkeletonTable columnsCount={2} />);
+    expect(container.querySelectorAll('thead')).toHaveLength(1);
+    expect(container.querySelectorAll('tbody')).toHaveLength(1);
+  });
 });

packages/module/src/SkeletonTable/SkeletonTable.tsx

@@ -28,6 +28,8 @@ export interface SkeletonTableProps
   columns?: (ReactNode | { cell: ReactNode; props?: ThProps })[];
   /** Number of columns in the table */
   columnsCount?: number;
+  /** Flag indicating if the table header skeleton should be rendered */
+  hasHeader?: boolean;
 }
 
 const SkeletonTable: FunctionComponent<SkeletonTableProps> = ({
@@ -42,21 +44,24 @@ const SkeletonTable: FunctionComponent<SkeletonTableProps> = ({
   columns,
   columnsCount,
   isTreeTable,
+  hasHeader = true,
   ...rest
 }: SkeletonTableProps) => {
   const rowCellsCount = Array.isArray(columns) ? columns.length : columnsCount;
 
   return (
     <Table aria-label="Loading" variant={variant} borders={borders} ouiaId={ouiaId} {...rest}>
       {caption && <Caption>{caption}</Caption>}
-      <SkeletonTableHead
-        ouiaId={ouiaId}
-        isSelectable={isSelectable}
-        isExpandable={isExpandable}
-        columnsCount={columnsCount}
-        columns={columns}
-        isTreeTable={isTreeTable}
-      />
+      {hasHeader && (
+        <SkeletonTableHead
+          ouiaId={ouiaId}
+          isSelectable={isSelectable}
+          isExpandable={isExpandable}
+          columnsCount={columnsCount}
+          columns={columns}
+          isTreeTable={isTreeTable}
+        />
+      )}
       <SkeletonTableBody
         columnsCount={rowCellsCount ?? 0}
         rowsCount={rowsCount}