diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTable.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTable.md index 3b6b70a7..ec226938 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTable.md +++ b/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 `` part of the skeleton table by using the ``. diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableNoHeaderExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTableNoHeaderExample.tsx new file mode 100644 index 00000000..ac0a41b7 --- /dev/null +++ b/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 = () => ; diff --git a/packages/module/src/SkeletonTable/SkeletonTable.test.tsx b/packages/module/src/SkeletonTable/SkeletonTable.test.tsx index 4c7b8ba8..aaebd281 100644 --- a/packages/module/src/SkeletonTable/SkeletonTable.test.tsx +++ b/packages/module/src/SkeletonTable/SkeletonTable.test.tsx @@ -9,4 +9,16 @@ describe('SkeletonTable component', () => { it('should render correctly with rows', () => { expect(render()).toMatchSnapshot(); }); + + it('should render without header when hasHeader is false', () => { + const { container } = render(); + expect(container.querySelectorAll('thead')).toHaveLength(0); + expect(container.querySelectorAll('tbody')).toHaveLength(1); + }); + + it('should render with header by default', () => { + const { container } = render(); + expect(container.querySelectorAll('thead')).toHaveLength(1); + expect(container.querySelectorAll('tbody')).toHaveLength(1); + }); }); diff --git a/packages/module/src/SkeletonTable/SkeletonTable.tsx b/packages/module/src/SkeletonTable/SkeletonTable.tsx index 46a2c1ca..78dbd3dd 100644 --- a/packages/module/src/SkeletonTable/SkeletonTable.tsx +++ b/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 = ({ @@ -42,6 +44,7 @@ const SkeletonTable: FunctionComponent = ({ columns, columnsCount, isTreeTable, + hasHeader = true, ...rest }: SkeletonTableProps) => { const rowCellsCount = Array.isArray(columns) ? columns.length : columnsCount; @@ -49,14 +52,16 @@ const SkeletonTable: FunctionComponent = ({ return ( {caption && } - + {hasHeader && ( + + )}
{caption}