@patternfly/react-table 6.5.0-prerelease.7 → 6.5.0-prerelease.71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "6.5.0-prerelease.7",
+  "version": "6.5.0-prerelease.71",
   "description": "This library provides a set of React table components for use with the PatternFly 4",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -40,16 +40,16 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-core": "^6.5.0-prerelease.7",
-    "@patternfly/react-icons": "^6.5.0-prerelease.3",
-    "@patternfly/react-styles": "^6.5.0-prerelease.3",
-    "@patternfly/react-tokens": "^6.5.0-prerelease.3",
-    "lodash": "^4.17.21",
+    "@patternfly/react-core": "^6.5.0-prerelease.68",
+    "@patternfly/react-icons": "^6.5.0-prerelease.30",
+    "@patternfly/react-styles": "^6.5.0-prerelease.21",
+    "@patternfly/react-tokens": "^6.5.0-prerelease.20",
+    "lodash": "^4.18.1",
     "tslib": "^2.8.1"
   },
   "peerDependencies": {
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "d09b3a3cb11d10807ada3c9fbde44254818f2fa2"
+  "gitHead": "3502b378ff6c4c1f59467079b3405dd1f7f0afde"
 }

package/src/components/Table/CollapseColumn.tsx

@@ -1,5 +1,5 @@
 import { Fragment } from 'react';
-import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
+import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
 import { css } from '@patternfly/react-styles';
 import { Button } from '@patternfly/react-core/dist/esm/components/Button';
 import styles from '@patternfly/react-styles/css/components/Table/table';
@@ -34,7 +34,7 @@ export const CollapseColumn: React.FunctionComponent<CollapseColumnProps> = ({
         aria-expanded={isOpen}
         icon={
           <div className={css(styles.tableToggleIcon)}>
-            <AngleDownIcon />
+            <RhMicronsCaretDownIcon />
           </div>
         }
       />

package/src/components/Table/EditColumn.tsx

@@ -2,7 +2,7 @@ import { Fragment } from 'react';
 import { Button } from '@patternfly/react-core/dist/esm/components/Button';
 import PencilAltIcon from '@patternfly/react-icons/dist/esm/icons/pencil-alt-icon';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 import { OnRowEdit } from './TableTypes';
 import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit';
 import { css } from '@patternfly/react-styles';
@@ -47,7 +47,7 @@ export const EditColumn: React.FunctionComponent<EditColumnProps> = ({
           {...props}
           onClick={(e) => onClick(e, 'cancel')}
           variant="plain"
-          icon={<TimesIcon />}
+          icon={<RhMicronsCloseIcon />}
         />
       </div>
     </div>

package/src/components/Table/EditableSelectInputCell.tsx

@@ -6,8 +6,10 @@ import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inl
 import formStyles from '@patternfly/react-styles/css/components/Form/form';
 import { EditableSelectInputProps } from './base/types';
 
-export interface IEditableSelectInputCell
-  extends Omit<React.HTMLProps<HTMLElement | HTMLDivElement>, 'onSelect' | 'onToggle'> {
+export interface IEditableSelectInputCell extends Omit<
+  React.HTMLProps<HTMLElement | HTMLDivElement>,
+  'onSelect' | 'onToggle'
+> {
   /** Row index of this select input cell */
   rowIndex: number;
   /** Cell index of this select input cell */

package/src/components/Table/InnerScrollContainer.tsx

@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table-scrollable';
 
@@ -6,16 +7,22 @@ export interface InnerScrollContainerProps extends React.HTMLProps<HTMLDivElemen
   children?: React.ReactNode;
   /** Additional classes added to the container */
   className?: string;
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<HTMLDivElement>;
 }
 
-export const InnerScrollContainer: React.FunctionComponent<InnerScrollContainerProps> = ({
+const InnerScrollContainerBase: React.FunctionComponent<InnerScrollContainerProps> = ({
   children,
   className,
+  innerRef,
   ...props
 }: InnerScrollContainerProps) => (
-  <div className={css(className, styles.scrollInnerWrapper)} {...props}>
+  <div ref={innerRef} className={css(className, styles.scrollInnerWrapper)} {...props}>
     {children}
   </div>
 );
 
+export const InnerScrollContainer = forwardRef((props: InnerScrollContainerProps, ref: React.Ref<HTMLDivElement>) => (
+  <InnerScrollContainerBase innerRef={ref} {...props} />
+));
 InnerScrollContainer.displayName = 'InnerScrollContainer';

package/src/components/Table/Table.tsx

@@ -50,8 +50,14 @@ export interface TableProps extends React.HTMLProps<HTMLTableElement>, OUIAProps
   role?: string;
   /** @beta Flag indicating if the table should have plain styling with a transparent background */
   isPlain?: boolean;
-  /** If set to true, the table header sticks to the top of its container */
+  /** @beta Flag indicating if the table should not have plain styling when in the glass theme */
+  isNoPlainOnGlass?: boolean;
+  /** If set to true, the table header sticks to the top of its container. This property applies both the sticky position and styling. */
   isStickyHeader?: boolean;
+  /** @beta Flag indicating the table header should have sticky positioning to the top of the parent InnerScrollContainer. */
+  isStickyHeaderBase?: boolean;
+  /** @beta Flag indicating the table header should have stuck styling, when the header is not at the top of the scroll container. */
+  isStickyHeaderStuck?: boolean;
   /** @hide Forwarded ref */
   innerRef?: React.RefObject<any>;
   /** Flag indicating table is a tree table */
@@ -96,7 +102,10 @@ const TableBase: React.FunctionComponent<TableProps> = ({
   variant,
   borders = true,
   isStickyHeader = false,
+  isStickyHeaderBase = false,
+  isStickyHeaderStuck = false,
   isPlain = false,
+  isNoPlainOnGlass = false,
   gridBreakPoint = TableGridBreakpoint.gridMd,
   'aria-label': ariaLabel,
   role = 'grid',
@@ -222,10 +231,13 @@ const TableBase: React.FunctionComponent<TableProps> = ({
           styles.modifiers[variant],
           !borders && styles.modifiers.noBorderRows,
           isStickyHeader && styles.modifiers.stickyHeader,
+          isStickyHeaderBase && styles.modifiers.stickyHeaderBase,
+          isStickyHeaderStuck && styles.modifiers.stickyHeaderStuck,
           isTreeTable && stylesTreeView.modifiers.treeView,
           isStriped && styles.modifiers.striped,
           isExpandable && styles.modifiers.expandable,
           isPlain && styles.modifiers.plain,
+          isNoPlainOnGlass && styles.modifiers.noPlainOnGlass,
           hasNoInset && stylesTreeView.modifiers.noInset,
           isNested && 'pf-m-nested',
           hasAnimations && styles.modifiers.animateExpand

package/src/components/Table/Th.tsx

@@ -15,8 +15,7 @@ import cssStickyCellInlineStart from '@patternfly/react-tokens/dist/esm/c_table_
 import cssStickyCellInlineEnd from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_InsetInlineEnd';
 
 export interface ThProps
-  extends BaseCellProps,
-    Omit<React.HTMLProps<HTMLTableHeaderCellElement>, 'onSelect' | 'width'> {
+  extends BaseCellProps, Omit<React.HTMLProps<HTMLTableHeaderCellElement>, 'onSelect' | 'width'> {
   /**
    * The column header the cell corresponds to. Applicable when this component is used as a direct child to <Tr>.
    * This attribute replaces table header in mobile viewport. It is rendered by ::before pseudo element.

package/src/components/Table/__tests__/Table.test.tsx

@@ -150,3 +150,75 @@ test('Renders expandable toggle button in Th with pf-m-small class when variant
     expect(button).toHaveClass('pf-m-small');
   });
 });
+
+test(`Renders with class ${styles.modifiers.plain} when isPlain is true`, () => {
+  render(<Table isPlain aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).toHaveClass(styles.modifiers.plain);
+});
+
+test(`Does not render with class ${styles.modifiers.plain} when isPlain is not defined`, () => {
+  render(<Table aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.plain);
+});
+
+test(`Does not render with class ${styles.modifiers.plain} when isPlain is false`, () => {
+  render(<Table isPlain={false} aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.plain);
+});
+
+test(`Renders with class ${styles.modifiers.noPlainOnGlass} when isNoPlainOnGlass is true`, () => {
+  render(<Table isNoPlainOnGlass aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).toHaveClass(styles.modifiers.noPlainOnGlass);
+});
+
+test(`Does not render with class ${styles.modifiers.noPlainOnGlass} when isNoPlainOnGlass is undefined`, () => {
+  render(<Table aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.noPlainOnGlass);
+});
+
+test(`Does not render with class ${styles.modifiers.noPlainOnGlass} when isNoPlainOnGlass is false`, () => {
+  render(<Table isNoPlainOnGlass={false} aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.noPlainOnGlass);
+});
+
+test(`Renders with class ${styles.modifiers.stickyHeaderBase} when isStickyHeaderBase is true`, () => {
+  render(<Table isStickyHeaderBase aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).toHaveClass(styles.modifiers.stickyHeaderBase);
+});
+
+test(`Does not render with class ${styles.modifiers.stickyHeaderBase} when isStickyHeaderBase is false`, () => {
+  render(<Table isStickyHeaderBase={false} aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.stickyHeaderBase);
+});
+
+test(`Does not render with class ${styles.modifiers.stickyHeaderBase} when isStickyHeaderBase is undefined`, () => {
+  render(<Table aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.stickyHeaderBase);
+});
+
+test(`Renders with class ${styles.modifiers.stickyHeaderStuck} when isStickyHeaderStuck is true`, () => {
+  render(<Table isStickyHeaderStuck aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).toHaveClass(styles.modifiers.stickyHeaderStuck);
+});
+
+test(`Does not render with class ${styles.modifiers.stickyHeaderStuck} when isStickyHeaderStuck is false`, () => {
+  render(<Table isStickyHeaderStuck={false} aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.stickyHeaderStuck);
+});
+
+test(`Does not render with class ${styles.modifiers.stickyHeaderStuck} when isStickyHeaderStuck is undefined`, () => {
+  render(<Table aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.stickyHeaderStuck);
+});

package/src/components/Table/__tests__/__snapshots__/RowWrapper.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`RowWrapper renders correctly 1`] = `
     <tbody>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-1"
+        data-ouia-component-id="OUIA-Generated-TableRow-:r0:"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       />
@@ -21,7 +21,7 @@ exports[`RowWrapper renders expanded correctly 1`] = `
     <tbody>
       <tr
         class="pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded"
-        data-ouia-component-id="OUIA-Generated-TableRow-2"
+        data-ouia-component-id="OUIA-Generated-TableRow-:r1:"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       />

package/src/components/Table/__tests__/__snapshots__/Table.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`Matches snapshot without children 1`] = `
 <DocumentFragment>
   <table
     class="pf-v6-c-table pf-m-grid-md"
-    data-ouia-component-id="OUIA-Generated-Table-12"
+    data-ouia-component-id="OUIA-Generated-Table-:rb:"
     data-ouia-component-type="PF6/Table"
     data-ouia-safe="true"
     role="grid"

package/src/components/Table/__tests__/__snapshots__/Tr.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`Matches snapshot with children 1`] = `
     <tbody>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-6"
+        data-ouia-component-id="OUIA-Generated-TableRow-:r5:"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -25,7 +25,7 @@ exports[`Matches snapshot without children 1`] = `
     <tbody>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-5"
+        data-ouia-component-id="OUIA-Generated-TableRow-:r4:"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       />

package/src/components/Table/examples/Table.md

@@ -41,7 +41,7 @@ The `Table` component takes an explicit and declarative approach, and its implem
 
 The documentation for the deprecated table implementation can be found under the [React deprecated](/components/table/react-deprecated) tab. It is configuration based and takes a less declarative and more implicit approach to laying out the table structure, such as the rows and cells within it.
 
-import { Fragment, isValidElement, useCallback, useEffect, useRef, useState } from 'react';
+import { Fragment, isValidElement, useCallback, useEffect, useRef, useState, useLayoutEffect } from 'react';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
@@ -50,11 +50,11 @@ import LeafIcon from '@patternfly/react-icons/dist/esm/icons/leaf-icon';
 import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
 import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
-import BlueprintIcon from '@patternfly/react-icons/dist/esm/icons/blueprint-icon';
+import RhUiBlueprintIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-blueprint-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import PencilAltIcon from '@patternfly/react-icons/dist/esm/icons/pencil-alt-icon';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
@@ -78,10 +78,13 @@ Some general notes:
 ```ts file="TableBasic.tsx"
 
 ```
-### Table Plain
-``` file="TablePlain.tsx"
+
+### Plain
+
+```ts file="TablePlain.tsx"
 
 ```
+
 ### Custom row wrapper, header tooltips & popovers
 
 - If you add the `noWrap` prop to `Thead`, it won't wrap it if there is no space
@@ -324,7 +327,6 @@ To enable a tree table:
    - `checkAriaLabel` - (optional) accessible label for the checkbox
    - `showDetailsAriaLabel` - (optional) accessible label for the show row details button in the responsive view
 4. The first `Td` in each row will pass the following to the `treeRow` prop:
-
    - `onCollapse` - Callback when user expands/collapses a row to reveal/hide the row's children.
    - `onCheckChange` - (optional) Callback when user changes the checkbox on a row.
    - `onToggleRowDetails` - (optional) Callback when user shows/hides the row details in responsive view.
@@ -416,6 +418,16 @@ To prevent the default text wrapping behavior and allow horizontal scrolling, al
 
 ```
 
+### Dynamic sticky header
+
+A sticky header may alternatively be implemented with two properties: `isStickyHeaderBase` and `isStickyHeaderStuck` - which allows separate control of the sticky position and sticky styling. `isStickyHeaderBase` should always be applied to make the header position sticky, and `isStickyHeaderStuck` may be applied dynamically to enable the sticky styling, such as when the sticky header is not at the top of the scroll parent as shown in the example.
+
+`isStickyHeader` acts as if both properties are present and true when applied, and is useful when dynamic sticky styling is not necessary.
+
+```ts file="TableStickyHeaderDynamic.tsx"
+
+```
+
 ### Sticky columns and header
 
 To maintain proper sticky behavior across sticky columns and header, `Table` must be wrapped with `OuterScrollContainer` and `InnerScrollContainer`.

package/src/components/Table/examples/TableActions.tsx

@@ -23,7 +23,7 @@ interface Repository {
   singleAction: string;
 }
 
-type ExampleType = 'defaultToggle' | 'customToggle';
+type ExampleType = 'customToggle';
 
 export const TableActions: React.FunctionComponent = () => {
   // In real usage, this data would come from some external source like an API via props.
@@ -45,10 +45,11 @@ export const TableActions: React.FunctionComponent = () => {
   };
 
   // This state is just for the ToggleGroup in this example and isn't necessary for Table usage.
-  const [exampleChoice, setExampleChoice] = useState<ExampleType>('defaultToggle');
+  const [exampleChoice, setExampleChoice] = useState<ExampleType | ''>('');
   const onExampleTypeChange: ToggleGroupItemProps['onChange'] = (event, _isSelected) => {
     const id = event.currentTarget.id;
-    setExampleChoice(id as ExampleType);
+    // Allow toggling off if clicking the already selected item
+    setExampleChoice(exampleChoice === id ? '' : (id as ExampleType));
   };
 
   const customActionsToggle = (props: CustomActionsToggleProps) => (
@@ -95,12 +96,6 @@ export const TableActions: React.FunctionComponent = () => {
   return (
     <Fragment>
       <ToggleGroup aria-label="Default uses kebab toggle">
-        <ToggleGroupItem
-          text="Default actions toggle"
-          buttonId="defaultToggle"
-          isSelected={exampleChoice === 'defaultToggle'}
-          onChange={onExampleTypeChange}
-        />
         <ToggleGroupItem
           text="Custom actions toggle"
           buttonId="customToggle"

package/src/components/Table/examples/TableBasic.tsx

@@ -10,7 +10,7 @@ interface Repository {
   lastCommit: string;
 }
 
-type ExampleType = 'default' | 'compact' | 'compactBorderless';
+type ExampleType = 'compact' | 'compactBorderless';
 
 export const TableBasic: React.FunctionComponent = () => {
   // In real usage, this data would come from some external source like an API via props.
@@ -29,21 +29,16 @@ export const TableBasic: React.FunctionComponent = () => {
   };
 
   // This state is just for the ToggleGroup in this example and isn't necessary for Table usage.
-  const [exampleChoice, setExampleChoice] = useState<ExampleType>('default');
+  const [exampleChoice, setExampleChoice] = useState<ExampleType | ''>('');
   const onExampleTypeChange: ToggleGroupItemProps['onChange'] = (event, _isSelected) => {
     const id = event.currentTarget.id;
-    setExampleChoice(id as ExampleType);
+    // Allow toggling off if clicking the already selected item
+    setExampleChoice(exampleChoice === id ? '' : (id as ExampleType));
   };
 
   return (
     <Fragment>
       <ToggleGroup aria-label="Default with single selectable">
-        <ToggleGroupItem
-          text="Default"
-          buttonId="default"
-          isSelected={exampleChoice === 'default'}
-          onChange={onExampleTypeChange}
-        />
         <ToggleGroupItem
           text="Compact"
           buttonId="compact"
@@ -59,7 +54,7 @@ export const TableBasic: React.FunctionComponent = () => {
       </ToggleGroup>
       <Table
         aria-label="Simple table"
-        variant={exampleChoice !== 'default' ? 'compact' : undefined}
+        variant={exampleChoice === 'compact' || exampleChoice === 'compactBorderless' ? 'compact' : undefined}
         borders={exampleChoice !== 'compactBorderless'}
       >
         <Caption>Simple table using composable components</Caption>

package/src/components/Table/examples/TableEditable.tsx

@@ -3,7 +3,7 @@ import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import { Button, Checkbox, Radio, TextInput, KeyTypes, getUniqueId } from '@patternfly/react-core';
 import PencilAltIcon from '@patternfly/react-icons/dist/esm/icons/pencil-alt-icon';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 import inlineEditStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit';
 import { css } from '@patternfly/react-styles';
 
@@ -60,7 +60,7 @@ const EditButtonsCell: React.FunctionComponent<EditButtonsCellProps> = ({
             onKeyDown={(event) => onKeyDown(event, 'stopEditing')}
             variant="plain"
           >
-            <TimesIcon />
+            <RhMicronsCloseIcon />
           </Button>
         </div>
       </Td>

package/src/components/Table/examples/TableMultipleStickyColumns.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ThProps } from '@patternfly/react-table';
-import BlueprintIcon from '@patternfly/react-icons/dist/esm/icons/blueprint-icon';
+import RhUiBlueprintIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-blueprint-icon';
 
 interface Fact {
   name: string;
@@ -120,7 +120,7 @@ export const TableMultipleStickyColumns: React.FunctionComponent = () => {
                 {fact.name}
               </Th>
               <Th isStickyColumn stickyMinWidth="120px" stickyLeftOffset="120px" modifier="truncate" hasRightBorder>
-                <BlueprintIcon />
+                <RhUiBlueprintIcon />
                 {` ${fact.state}`}
               </Th>
               <Td modifier="nowrap" dataLabel={columnNames.header3}>

package/src/components/Table/examples/TableStickyColumnsAndHeader.tsx

@@ -11,7 +11,7 @@ import {
   ThProps,
   ISortBy
 } from '@patternfly/react-table';
-import BlueprintIcon from '@patternfly/react-icons/dist/esm/icons/blueprint-icon';
+import RhUiBlueprintIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-blueprint-icon';
 
 interface Fact {
   name: string;
@@ -133,7 +133,7 @@ export const TableStickyColumnsAndHeader: React.FunctionComponent = () => {
                     {fact.name}
                   </Th>
                   <Th isStickyColumn stickyMinWidth="120px" stickyLeftOffset="120px" modifier="truncate" hasRightBorder>
-                    <BlueprintIcon />
+                    <RhUiBlueprintIcon />
                     {` ${fact.state}`}
                   </Th>
                   <Td modifier="nowrap" dataLabel={columnNames.header3}>

package/src/components/Table/examples/TableStickyHeaderDynamic.tsx

@@ -0,0 +1,140 @@
+import { useLayoutEffect, useRef, useState } from 'react';
+import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer } from '@patternfly/react-table';
+import RhUiBlueprintIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-blueprint-icon';
+
+interface Fact {
+  name: string;
+  state: string;
+  detail1: string;
+  detail2: string;
+  detail3: string;
+  detail4: string;
+  detail5: string;
+  detail6: string;
+  detail7: string;
+}
+
+const useIsStuckFromScrollParent = ({
+  shouldTrack,
+  scrollParentRef
+}: {
+  /** Indicates whether to track the scroll top position of the scroll parent element */
+  shouldTrack: boolean;
+  /** Reference to the scroll parent element */
+  scrollParentRef: React.RefObject<any>;
+}): boolean => {
+  const [isStuck, setIsStuck] = useState(false);
+
+  useLayoutEffect(() => {
+    if (!shouldTrack) {
+      setIsStuck(false);
+      return;
+    }
+
+    const scrollElement = scrollParentRef.current;
+    if (!scrollElement) {
+      setIsStuck(false);
+      return;
+    }
+
+    const syncFromScroll = () => {
+      setIsStuck(scrollElement.scrollTop > 0);
+    };
+    syncFromScroll();
+    scrollElement.addEventListener('scroll', syncFromScroll, { passive: true });
+    return () => scrollElement.removeEventListener('scroll', syncFromScroll);
+  }, [shouldTrack, scrollParentRef]);
+
+  return isStuck;
+};
+
+export const TableStickyHeaderDynamic: React.FunctionComponent = () => {
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const isStuck = useIsStuckFromScrollParent({ shouldTrack: true, scrollParentRef: scrollContainerRef });
+
+  // In real usage, this data would come from some external source like an API via props.
+  const facts: Fact[] = Array.from({ length: 9 }, (_, index) => ({
+    name: `Fact ${index + 1}`,
+    state: `State ${index + 1}`,
+    detail1: `Test cell ${index + 1}-3`,
+    detail2: `Test cell ${index + 1}-4`,
+    detail3: `Test cell ${index + 1}-5`,
+    detail4: `Test cell ${index + 1}-6`,
+    detail5: `Test cell ${index + 1}-7`,
+    detail6: `Test cell ${index + 1}-8`,
+    detail7: `Test cell ${index + 1}-9`
+  }));
+
+  const columnNames = {
+    name: 'Fact',
+    state: 'State',
+    header3: 'Header 3',
+    header4: 'Header 4',
+    header5: 'Header 5',
+    header6: 'Header 6',
+    header7: 'Header 7',
+    header8: 'Header 8',
+    header9: 'Header 9'
+  };
+
+  return (
+    <div style={{ height: '400px' }}>
+      <InnerScrollContainer ref={scrollContainerRef}>
+        <Table
+          aria-label="Dynamic sticky header table"
+          gridBreakPoint=""
+          isStickyHeaderBase
+          isStickyHeaderStuck={isStuck}
+        >
+          <Thead>
+            <Tr>
+              <Th modifier="truncate">{columnNames.name}</Th>
+              <Th modifier="truncate">{columnNames.state}</Th>
+              <Th modifier="truncate">{columnNames.header3}</Th>
+              <Th modifier="truncate">{columnNames.header4}</Th>
+              <Th modifier="truncate">{columnNames.header5}</Th>
+              <Th modifier="truncate">{columnNames.header6}</Th>
+              <Th modifier="truncate">{columnNames.header7}</Th>
+              <Th modifier="truncate">{columnNames.header8}</Th>
+              <Th modifier="truncate">{columnNames.header9}</Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            {facts.map((fact) => (
+              <Tr key={fact.name}>
+                <Td modifier="nowrap" dataLabel={columnNames.name}>
+                  {fact.name}
+                </Td>
+                <Td modifier="nowrap" dataLabel={columnNames.state}>
+                  <RhUiBlueprintIcon />
+                  {` ${fact.state}`}
+                </Td>
+                <Td modifier="nowrap" dataLabel={columnNames.header3}>
+                  {fact.detail1}
+                </Td>
+                <Td modifier="nowrap" dataLabel={columnNames.header4}>
+                  {fact.detail2}
+                </Td>
+                <Td modifier="nowrap" dataLabel={columnNames.header5}>
+                  {fact.detail3}
+                </Td>
+                <Td modifier="nowrap" dataLabel={columnNames.header6}>
+                  {fact.detail4}
+                </Td>
+                <Td modifier="nowrap" dataLabel={columnNames.header7}>
+                  {fact.detail5}
+                </Td>
+                <Td modifier="nowrap" dataLabel={columnNames.header8}>
+                  {fact.detail6}
+                </Td>
+                <Td modifier="nowrap" dataLabel={columnNames.header9}>
+                  {fact.detail7}
+                </Td>
+              </Tr>
+            ))}
+          </Tbody>
+        </Table>
+      </InnerScrollContainer>
+    </div>
+  );
+};

package/src/components/Table/utils/decorators/sortable.tsx

@@ -2,10 +2,10 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import { IExtra, IFormatterValueType, ITransform } from '../../TableTypes';
 import { SortColumn, SortByDirection } from '../../SortColumn';
-import StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon';
+import RhUiStarFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-star-fill-icon';
 
 export const sortableFavorites = (sort: any) => () =>
-  sortable(<StarIcon />, {
+  sortable(<RhUiStarFillIcon />, {
     columnIndex: sort.columnIndex,
     className: styles.tableFavorite,
     ariaLabel: sort.ariaLabel ?? 'Sort favorites',