@patternfly/react-table 6.4.0-prerelease.1 → 6.4.0-prerelease.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "6.4.0-prerelease.1",
+  "version": "6.4.0-prerelease.2",
   "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",
@@ -51,5 +51,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "dd5671c7784427edd8607d374563e03cc439576e"
+  "gitHead": "263c48569fb00a9db5bed9ea471e46ef0773887d"
 }

package/src/components/Table/Th.tsx

@@ -65,6 +65,8 @@ export interface ThProps
    * content, such as a "select all" checkbox or "expand all" toggle.
    */
   'aria-label'?: string;
+  /** @hide Beta prop, internal use only. Additional content to render in the column header, appended to the end of the header content. */
+  additionalContent?: React.ReactNode;
 }
 
 const ThBase: React.FunctionComponent<ThProps> = ({
@@ -94,6 +96,7 @@ const ThBase: React.FunctionComponent<ThProps> = ({
   isSubheader = false,
   screenReaderText,
   'aria-label': ariaLabel,
+  additionalContent,
   ...props
 }: ThProps) => {
   const { variant } = useContext(TableContext);
@@ -241,6 +244,7 @@ const ThBase: React.FunctionComponent<ThProps> = ({
     >
       {transformedChildren ||
         (screenReaderText && <span className={accessibilityStyles.screenReader}>{screenReaderText}</span>)}
+      {additionalContent && additionalContent}
     </MergedComponent>
   );
 

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

@@ -28,3 +28,29 @@ test('Renders with screen reader text when screenReaderText is passed in', () =>
 
   expect(screen.getByRole('columnheader')).toHaveTextContent('Test');
 });
+
+test('Does not render with additional content by default', () => {
+  render(<Th />);
+
+  expect(screen.getByRole('columnheader')).toBeEmptyDOMElement();
+});
+
+test('Render with additional content when additionalContent is passed in', () => {
+  render(<Th additionalContent={<div>Extra</div>}>Test</Th>);
+
+  expect(screen.getByRole('columnheader')).toHaveTextContent('Extra');
+});
+
+test('Additional content renders after children when additionalContent is passed in', () => {
+  render(
+    <Th additionalContent={<div>Extra</div>}>
+      <div>Test</div>
+    </Th>
+  );
+
+  const th = screen.getByRole('columnheader');
+  const thChildren = th.children;
+
+  expect(thChildren.item(0)?.textContent).toEqual('Test');
+  expect(thChildren.item(1)?.textContent).toEqual('Extra');
+});