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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "6.3.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",
@@ -40,10 +40,10 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-core": "^6.3.1",
-    "@patternfly/react-icons": "^6.3.1",
-    "@patternfly/react-styles": "^6.3.1",
-    "@patternfly/react-tokens": "^6.3.1",
+    "@patternfly/react-core": "^6.4.0-prerelease.1",
+    "@patternfly/react-icons": "^6.4.0-prerelease.1",
+    "@patternfly/react-styles": "^6.4.0-prerelease.1",
+    "@patternfly/react-tokens": "^6.4.0-prerelease.1",
     "lodash": "^4.17.21",
     "tslib": "^2.8.1"
   },
@@ -51,5 +51,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "08775efb8b882f3b2b6cf7b7221f41154875415b"
+  "gitHead": "263c48569fb00a9db5bed9ea471e46ef0773887d"
 }

package/src/components/Table/FavoritesCell.tsx

@@ -1,4 +1,3 @@
-import StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon';
 import { Button } from '@patternfly/react-core/dist/esm/components/Button';
 
 export interface FavoritesCellProps {
@@ -30,9 +29,10 @@ export const FavoritesCell: React.FunctionComponent<FavoritesCellProps> = ({
       type="button"
       aria-label={isFavorited ? 'Starred' : 'Not starred'}
       onClick={onFavorite}
+      isFavorite
+      isFavorited={isFavorited}
       {...ariaProps}
       {...props}
-      icon={<StarIcon />}
     />
   );
 };

package/src/components/Table/SortColumn.tsx

@@ -2,7 +2,6 @@ import { useState } from 'react';
 import LongArrowAltUpIcon from '@patternfly/react-icons/dist/esm/icons/long-arrow-alt-up-icon';
 import LongArrowAltDownIcon from '@patternfly/react-icons/dist/esm/icons/long-arrow-alt-down-icon';
 import ArrowsAltVIcon from '@patternfly/react-icons/dist/esm/icons/arrows-alt-v-icon';
-import StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import { TableText } from './TableText';
@@ -50,10 +49,11 @@ export const SortColumn: React.FunctionComponent<SortColumnProps> = ({
   }
 
   if (favoriteButtonProps) {
+    const { favorited, ...rest } = favoriteButtonProps;
     return (
       <ActionList isIconList>
         <ActionListItem>
-          <Button variant="plain" icon={<StarIcon />} {...favoriteButtonProps} />
+          <Button variant="plain" isFavorite isFavorited={favorited} {...rest} />
         </ActionListItem>
         <ActionListItem>
           <Button

package/src/components/Table/Table.tsx

@@ -8,6 +8,7 @@ import { IVisibility } from './utils/decorators/classNames';
 import { handleArrows, setTabIndex } from '@patternfly/react-core/dist/esm/helpers/KeyboardHandler';
 import { KeyTypes } from '@patternfly/react-core/dist/esm/helpers/constants';
 import { useOUIAProps, OUIAProps } from '@patternfly/react-core/dist/esm/helpers/OUIA/ouia';
+import { useHasAnimations } from '@patternfly/react-core/dist/esm/helpers';
 import { TableGridBreakpoint, TableVariant } from './TableTypes';
 
 export interface BaseCellProps {
@@ -103,13 +104,14 @@ const TableBase: React.FunctionComponent<TableProps> = ({
   isNested = false,
   isStriped = false,
   isExpandable = false,
-  hasAnimations = false,
+  hasAnimations: hasAnimationsProp,
   hasNoInset = false,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   nestedHeaderColumnSpans,
   selectableRowCaptionText,
   ...props
 }: TableProps) => {
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
   const ref = useRef(null);
   const tableRef = innerRef || ref;
 

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__/Table.test.tsx

@@ -2,6 +2,7 @@ import { render, screen } from '@testing-library/react';
 import { Table } from '../Table';
 import { Td } from '../Td';
 import { Th } from '../Th';
+import { AnimationsProvider, useAnimationsConfig, useHasAnimations } from '@patternfly/react-core/dist/esm/helpers';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 
 test('Renders without children', () => {
@@ -57,6 +58,33 @@ test(`Renders with class ${styles.modifiers.animateExpand} hasAnimations is true
   expect(screen.getByRole('grid', { name: 'Test table' })).toHaveClass(styles.modifiers.animateExpand);
 });
 
+// Animation context tests for expandable tables
+test('respects AnimationsProvider context when no local hasAnimations prop for expandable table', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <Table isExpandable aria-label="Test table" />
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).toHaveClass(styles.modifiers.animateExpand);
+});
+
+test('local hasAnimations prop takes precedence over context for expandable table', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <Table isExpandable hasAnimations={false} aria-label="Test table" />
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.animateExpand);
+});
+
+test('works without AnimationsProvider (backward compatibility) for expandable table', () => {
+  render(<Table isExpandable aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.animateExpand);
+});
+
 test('Matches snapshot without children', () => {
   const { asFragment } = render(<Table />);
 

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');
+});

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-9"
+    data-ouia-component-id="OUIA-Generated-Table-12"
     data-ouia-component-type="PF6/Table"
     data-ouia-safe="true"
     role="grid"

package/src/demos/examples/TableCompact.tsx

@@ -1,7 +1,6 @@
 import { Fragment, useState } from 'react';
 import {
   Button,
-  Card,
   MenuToggle,
   MenuToggleElement,
   Pagination,
@@ -130,45 +129,43 @@ export const TableCompact: React.FunctionComponent = () => {
     <Fragment>
       <DashboardWrapper hasPageTemplateTitle>
         <PageSection isFilled aria-label="Compact table data">
-          <Card>
-            {tableToolbar}
-            <Table variant="compact" aria-label="Compact Table">
-              <Thead>
-                <Tr>
-                  <Th key={0}>{columns[0]}</Th>
-                  <Th key={1}>{columns[1]}</Th>
-                  <Th key={2}>{columns[2]}</Th>
-                  <Th key={3}>{columns[3]}</Th>
-                  <Th key={4}>{columns[4]}</Th>
-                  <Th key={5}>{columns[5]}</Th>
-                  <Th key={6}>{columns[6]}</Th>
-                  <Th key={7} width={10}>
-                    {columns[7]}
-                  </Th>
+          {tableToolbar}
+          <Table variant="compact" aria-label="Compact Table">
+            <Thead>
+              <Tr>
+                <Th key={0}>{columns[0]}</Th>
+                <Th key={1}>{columns[1]}</Th>
+                <Th key={2}>{columns[2]}</Th>
+                <Th key={3}>{columns[3]}</Th>
+                <Th key={4}>{columns[4]}</Th>
+                <Th key={5}>{columns[5]}</Th>
+                <Th key={6}>{columns[6]}</Th>
+                <Th key={7} width={10}>
+                  {columns[7]}
+                </Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {paginatedRows.map((row, rowIndex) => (
+                <Tr key={rowIndex}>
+                  <>
+                    <Td dataLabel={columns[0]}>{row.name}</Td>
+                    <Td dataLabel={columns[1]}>{row.threads}</Td>
+                    <Td dataLabel={columns[2]}>{row.applications}</Td>
+                    <Td dataLabel={columns[3]}>{row.workspaces}</Td>
+                    <Td dataLabel={columns[4]}>{renderLabel(row.status)}</Td>
+                    <Td dataLabel={columns[5]}>{row.location}</Td>
+                    <Td dataLabel={columns[6]}>{row.lastModified}</Td>
+                    <Td dataLabel={columns[7]} modifier="truncate">
+                      <TableText>
+                        <a href="#">{row.url}</a>
+                      </TableText>
+                    </Td>
+                  </>
                 </Tr>
-              </Thead>
-              <Tbody>
-                {paginatedRows.map((row, rowIndex) => (
-                  <Tr key={rowIndex}>
-                    <>
-                      <Td dataLabel={columns[0]}>{row.name}</Td>
-                      <Td dataLabel={columns[1]}>{row.threads}</Td>
-                      <Td dataLabel={columns[2]}>{row.applications}</Td>
-                      <Td dataLabel={columns[3]}>{row.workspaces}</Td>
-                      <Td dataLabel={columns[4]}>{renderLabel(row.status)}</Td>
-                      <Td dataLabel={columns[5]}>{row.location}</Td>
-                      <Td dataLabel={columns[6]}>{row.lastModified}</Td>
-                      <Td dataLabel={columns[7]} modifier="truncate">
-                        <TableText>
-                          <a href="#">{row.url}</a>
-                        </TableText>
-                      </Td>
-                    </>
-                  </Tr>
-                ))}
-              </Tbody>
-            </Table>
-          </Card>
+              ))}
+            </Tbody>
+          </Table>
         </PageSection>
       </DashboardWrapper>
     </Fragment>

package/src/demos/examples/TableEmptyStateDefault.tsx

@@ -2,7 +2,6 @@ import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import {
   Bullseye,
   Button,
-  Card,
   EmptyState,
   EmptyStateVariant,
   EmptyStateBody,
@@ -16,42 +15,40 @@ import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/Dashboa
 export const TableEmptyStateDefault: React.FunctionComponent = () => (
   <DashboardWrapper hasPageTemplateTitle>
     <PageSection padding={{ default: 'noPadding', xl: 'padding' }} aria-label="Empty state table data">
-      <Card component="div">
-        <Table aria-label="Empty state table">
-          <Thead>
-            <Tr>
-              <Th>Repositories</Th>
-              <Th>Branches</Th>
-              <Th>Pull requests</Th>
-              <Th>Workspaces</Th>
-              <Th>Last commit</Th>
-            </Tr>
-          </Thead>
-          <Tbody>
-            <Tr>
-              <Td colSpan={8}>
-                <Bullseye>
-                  <EmptyState
-                    titleText="No results found"
-                    icon={SearchIcon}
-                    headingLevel="h2"
-                    variant={EmptyStateVariant.sm}
-                  >
-                    <EmptyStateBody>
-                      No results match this filter criteria. Clear all filters and try again.
-                    </EmptyStateBody>
-                    <EmptyStateFooter>
-                      <EmptyStateActions>
-                        <Button variant="link">Clear all filters</Button>
-                      </EmptyStateActions>
-                    </EmptyStateFooter>
-                  </EmptyState>
-                </Bullseye>
-              </Td>
-            </Tr>
-          </Tbody>
-        </Table>
-      </Card>
+      <Table aria-label="Empty state table">
+        <Thead>
+          <Tr>
+            <Th>Repositories</Th>
+            <Th>Branches</Th>
+            <Th>Pull requests</Th>
+            <Th>Workspaces</Th>
+            <Th>Last commit</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          <Tr>
+            <Td colSpan={8}>
+              <Bullseye>
+                <EmptyState
+                  titleText="No results found"
+                  icon={SearchIcon}
+                  headingLevel="h2"
+                  variant={EmptyStateVariant.sm}
+                >
+                  <EmptyStateBody>
+                    No results match this filter criteria. Clear all filters and try again.
+                  </EmptyStateBody>
+                  <EmptyStateFooter>
+                    <EmptyStateActions>
+                      <Button variant="link">Clear all filters</Button>
+                    </EmptyStateActions>
+                  </EmptyStateFooter>
+                </EmptyState>
+              </Bullseye>
+            </Td>
+          </Tr>
+        </Tbody>
+      </Table>
     </PageSection>
   </DashboardWrapper>
 );

package/src/demos/examples/TableEmptyStateError.tsx

@@ -1,42 +1,40 @@
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-import { Bullseye, Card, EmptyState, EmptyStateVariant, EmptyStateBody, PageSection } from '@patternfly/react-core';
+import { Bullseye, EmptyState, EmptyStateVariant, EmptyStateBody, PageSection } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 
 export const TableEmptyStateError: React.FunctionComponent = () => (
   <DashboardWrapper hasPageTemplateTitle>
     <PageSection padding={{ default: 'noPadding', xl: 'padding' }} aria-label="Empty state table with error">
-      <Card component="div">
-        <Table aria-label="Loading table demo">
-          <Thead>
-            <Tr>
-              <Th>Repositories</Th>
-              <Th>Branches</Th>
-              <Th>Pull requests</Th>
-              <Th>Workspaces</Th>
-              <Th>Last commit</Th>
-            </Tr>
-          </Thead>
-          <Tbody>
-            <Tr>
-              <Td colSpan={8}>
-                <Bullseye>
-                  <EmptyState
-                    icon={ExclamationCircleIcon}
-                    titleText="Unable to connect"
-                    headingLevel="h2"
-                    variant={EmptyStateVariant.sm}
-                  >
-                    <EmptyStateBody>
-                      There was an error retrieving data. Check your connection and reload the page.
-                    </EmptyStateBody>
-                  </EmptyState>
-                </Bullseye>
-              </Td>
-            </Tr>
-          </Tbody>
-        </Table>
-      </Card>
+      <Table aria-label="Loading table demo">
+        <Thead>
+          <Tr>
+            <Th>Repositories</Th>
+            <Th>Branches</Th>
+            <Th>Pull requests</Th>
+            <Th>Workspaces</Th>
+            <Th>Last commit</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          <Tr>
+            <Td colSpan={8}>
+              <Bullseye>
+                <EmptyState
+                  icon={ExclamationCircleIcon}
+                  titleText="Unable to connect"
+                  headingLevel="h2"
+                  variant={EmptyStateVariant.sm}
+                >
+                  <EmptyStateBody>
+                    There was an error retrieving data. Check your connection and reload the page.
+                  </EmptyStateBody>
+                </EmptyState>
+              </Bullseye>
+            </Td>
+          </Tr>
+        </Tbody>
+      </Table>
     </PageSection>
   </DashboardWrapper>
 );

package/src/demos/examples/TableEmptyStateLoading.tsx

@@ -1,32 +1,30 @@
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-import { Bullseye, Card, EmptyState, PageSection, Spinner } from '@patternfly/react-core';
+import { Bullseye, EmptyState, PageSection, Spinner } from '@patternfly/react-core';
 import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 
 export const TableEmptyStateLoading: React.FunctionComponent = () => (
   <DashboardWrapper hasPageTemplateTitle>
     <PageSection padding={{ default: 'noPadding', xl: 'padding' }} aria-label="Empty state table loading">
-      <Card component="div">
-        <Table aria-label="Loading table demo">
-          <Thead>
-            <Tr>
-              <Th>Repositories</Th>
-              <Th>Branches</Th>
-              <Th>Pull requests</Th>
-              <Th>Workspaces</Th>
-              <Th>Last commit</Th>
-            </Tr>
-          </Thead>
-          <Tbody>
-            <Tr>
-              <Td colSpan={8}>
-                <Bullseye>
-                  <EmptyState titleText="Loading" icon={Spinner} headingLevel="h2" />
-                </Bullseye>
-              </Td>
-            </Tr>
-          </Tbody>
-        </Table>
-      </Card>
+      <Table aria-label="Loading table demo">
+        <Thead>
+          <Tr>
+            <Th>Repositories</Th>
+            <Th>Branches</Th>
+            <Th>Pull requests</Th>
+            <Th>Workspaces</Th>
+            <Th>Last commit</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          <Tr>
+            <Td colSpan={8}>
+              <Bullseye>
+                <EmptyState titleText="Loading" icon={Spinner} headingLevel="h2" />
+              </Bullseye>
+            </Td>
+          </Tr>
+        </Tbody>
+      </Table>
     </PageSection>
   </DashboardWrapper>
 );

package/src/demos/examples/TableExpandCollapseAll.tsx

@@ -1,5 +1,5 @@
 import { Fragment, ReactNode, useEffect, useState } from 'react';
-import { Card, Content, Label, PageSection } from '@patternfly/react-core';
+import { Content, Label, PageSection } from '@patternfly/react-core';
 import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
 import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 
@@ -155,56 +155,54 @@ export const TableExpandCollapseAll: React.FunctionComponent = () => {
           }}
           aria-label="Collapsible table data"
         >
-          <Card component="div">
-            <Table isExpandable hasAnimations aria-label="Collapsible table">
-              <Thead>
-                <Tr>
-                  <Th
-                    expand={{
-                      areAllExpanded: !areAllExpanded,
-                      collapseAllAriaLabel,
-                      onToggle: onCollapseAll
-                    }}
-                    aria-label="Row expansion"
-                  />
-                  {expandableColumns.map((column) => (
-                    <Th key={column}>{column}</Th>
-                  ))}
-                </Tr>
-              </Thead>
+          <Table isExpandable hasAnimations aria-label="Collapsible table">
+            <Thead>
+              <Tr>
+                <Th
+                  expand={{
+                    areAllExpanded: !areAllExpanded,
+                    collapseAllAriaLabel,
+                    onToggle: onCollapseAll
+                  }}
+                  aria-label="Row expansion"
+                />
+                {expandableColumns.map((column) => (
+                  <Th key={column}>{column}</Th>
+                ))}
+              </Tr>
+            </Thead>
 
-              {serverData.map((server, serverIndex) => (
-                <Tbody key={server.name} isExpanded={isServerExpanded(server)}>
-                  <Tr isContentExpanded={isServerExpanded(server)}>
-                    <Td
-                      expand={
-                        server.details
-                          ? {
-                              rowIndex: serverIndex,
-                              isExpanded: isServerExpanded(server),
-                              onToggle: () => setServerExpanded(server, !isServerExpanded(server))
-                            }
-                          : undefined
-                      }
-                    >
-                      <ExpandableRowContent>{server.details}</ExpandableRowContent>
-                    </Td>
-                    <Td>{server?.name}</Td>
-                    <Td>{server?.threads}</Td>
-                    <Td>{server?.applications}</Td>
-                    <Td>{server?.workspaces}</Td>
-                    <Td>{server?.status?.title}</Td>
-                  </Tr>
-                  <Tr isExpanded={isServerExpanded(server)}>
-                    <Td></Td>
-                    <Td colSpan={expandableColumns.length}>
-                      <ExpandableRowContent>{server?.details}</ExpandableRowContent>
-                    </Td>
-                  </Tr>
-                </Tbody>
-              ))}
-            </Table>
-          </Card>
+            {serverData.map((server, serverIndex) => (
+              <Tbody key={server.name} isExpanded={isServerExpanded(server)}>
+                <Tr isContentExpanded={isServerExpanded(server)}>
+                  <Td
+                    expand={
+                      server.details
+                        ? {
+                            rowIndex: serverIndex,
+                            isExpanded: isServerExpanded(server),
+                            onToggle: () => setServerExpanded(server, !isServerExpanded(server))
+                          }
+                        : undefined
+                    }
+                  >
+                    <ExpandableRowContent>{server.details}</ExpandableRowContent>
+                  </Td>
+                  <Td>{server?.name}</Td>
+                  <Td>{server?.threads}</Td>
+                  <Td>{server?.applications}</Td>
+                  <Td>{server?.workspaces}</Td>
+                  <Td>{server?.status?.title}</Td>
+                </Tr>
+                <Tr isExpanded={isServerExpanded(server)}>
+                  <Td></Td>
+                  <Td colSpan={expandableColumns.length}>
+                    <ExpandableRowContent>{server?.details}</ExpandableRowContent>
+                  </Td>
+                </Tr>
+              </Tbody>
+            ))}
+          </Table>
         </PageSection>
       </DashboardWrapper>
     </Fragment>