@patternfly/react-table 6.3.0-prerelease.9 → 6.3.1-prerelease.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "6.3.0-prerelease.9",
+  "version": "6.3.1-prerelease.0",
   "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.0-prerelease.9",
-    "@patternfly/react-icons": "^6.3.0-prerelease.1",
-    "@patternfly/react-styles": "^6.3.0-prerelease.1",
-    "@patternfly/react-tokens": "^6.3.0-prerelease.1",
+    "@patternfly/react-core": "^6.3.1-prerelease.0",
+    "@patternfly/react-icons": "^6.3.0",
+    "@patternfly/react-styles": "^6.3.0",
+    "@patternfly/react-tokens": "^6.3.0",
     "lodash": "^4.17.21",
     "tslib": "^2.8.1"
   },
@@ -51,5 +51,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "6e99233806b7116f6f785411ba92f8ce28411a58"
+  "gitHead": "999dd945fd4f8ec281d9015586ac773833f16217"
 }

package/src/components/Table/ExpandableRowContent.tsx

@@ -2,14 +2,20 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 
 interface ExpandableRowContentProps {
+  /** Content rendered inside the expandable row. */
   children?: React.ReactNode;
+  /** Flag indicating whether the expandable row content has no background. This should be passed in when
+   * the parent Td is passed the noPadding prop.
+   */
+  hasNoBackground?: boolean;
 }
 
 export const ExpandableRowContent: React.FunctionComponent<ExpandableRowContentProps> = ({
   children = null as React.ReactNode,
+  hasNoBackground,
   ...props
 }: ExpandableRowContentProps) => (
-  <div {...props} className={css(styles.tableExpandableRowContent)}>
+  <div {...props} className={css(styles.tableExpandableRowContent, hasNoBackground && styles.modifiers.noBackground)}>
     {children}
   </div>
 );

package/src/components/Table/Table.tsx

@@ -57,8 +57,12 @@ export interface TableProps extends React.HTMLProps<HTMLTableElement>, OUIAProps
   isNested?: boolean;
   /** Flag indicating this table should be striped. This property works best for a single <tbody> table. Striping may also be done manually by applying this property to Tbody and Tr components. */
   isStriped?: boolean;
-  /** Flag indicating this table contains expandable rows to maintain proper striping */
+  /** Flag indicating this table contains expandable rows. */
   isExpandable?: boolean;
+  /** @beta Flag indicating whether expandable rows within the table have animations. Expandable rows cannot be dynamically rendered. This prop
+   * will be removed in the next breaking change, with the default behavior becoming animations always being enabled.
+   */
+  hasAnimations?: boolean;
   /** Flag indicating this table's rows will not have the inset typically reserved for expanding/collapsing rows in a tree table. Intended for use on tree tables with no visible rows with children. */
   hasNoInset?: boolean;
   /** Collection of column spans for nested headers. Deprecated: see https://github.com/patternfly/patternfly/issues/4584 */
@@ -73,10 +77,12 @@ export interface TableProps extends React.HTMLProps<HTMLTableElement>, OUIAProps
 
 interface TableContextProps {
   registerSelectableRow?: () => void;
+  hasAnimations?: boolean;
 }
 
 export const TableContext = createContext<TableContextProps>({
-  registerSelectableRow: () => {}
+  registerSelectableRow: () => {},
+  hasAnimations: false
 });
 
 const TableBase: React.FunctionComponent<TableProps> = ({
@@ -95,6 +101,7 @@ const TableBase: React.FunctionComponent<TableProps> = ({
   isNested = false,
   isStriped = false,
   isExpandable = false,
+  hasAnimations = false,
   hasNoInset = false,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   nestedHeaderColumnSpans,
@@ -197,7 +204,7 @@ const TableBase: React.FunctionComponent<TableProps> = ({
   };
 
   return (
-    <TableContext.Provider value={{ registerSelectableRow }}>
+    <TableContext.Provider value={{ registerSelectableRow, hasAnimations }}>
       <table
         aria-label={ariaLabel}
         role={role}
@@ -212,7 +219,8 @@ const TableBase: React.FunctionComponent<TableProps> = ({
           isStriped && styles.modifiers.striped,
           isExpandable && styles.modifiers.expandable,
           hasNoInset && stylesTreeView.modifiers.noInset,
-          isNested && 'pf-m-nested'
+          isNested && 'pf-m-nested',
+          hasAnimations && styles.modifiers.animateExpand
         )}
         ref={tableRef}
         {...(isTreeTable && { role: 'treegrid' })}

package/src/components/Table/Td.tsx

@@ -1,4 +1,4 @@
-import { createRef, forwardRef, useEffect, useState } from 'react';
+import { createRef, forwardRef, useEffect, useState, useContext } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import scrollStyles from '@patternfly/react-styles/css/components/Table/table-scrollable';
@@ -14,6 +14,7 @@ import {
   classNames,
   favoritable
 } from './utils';
+import { IRowData, IExtraData } from './TableTypes';
 import { draggable } from './utils/decorators/draggable';
 import { treeRow } from './utils';
 import { mergeProps } from './base/merge-props';
@@ -29,6 +30,7 @@ import {
   TdSelectType,
   TdTreeRowType
 } from './base/types';
+import { TableContext } from './Table';
 import cssStickyCellMinWidth from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_MinWidth';
 import cssStickyCellInlineStart from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_InsetInlineStart';
 import cssStickyCellInlineEnd from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_InsetInlineEnd';
@@ -43,6 +45,8 @@ export interface TdProps extends BaseCellProps, Omit<React.HTMLProps<HTMLTableDa
   select?: TdSelectType;
   /** Turns the cell into an actions cell. Recommended to use an ActionsColumn component as a child of the Td rather than this prop. */
   actions?: TdActionsType;
+  /** Indicates the cell contains an interactive element and prevents that element's padding from increasing row height. Recommended when other cells in the same row contains text. */
+  hasAction?: boolean;
   /** Turns the cell into an expansion toggle and determines if the corresponding expansion row is open */
   expand?: TdExpandType;
   /** Turns the cell into a compound expansion toggle */
@@ -84,6 +88,7 @@ const TdBase: React.FunctionComponent<TdProps> = ({
   children,
   className,
   isActionCell = false,
+  hasAction = false,
   component = 'td',
   dataLabel,
   textCenter = false,
@@ -193,6 +198,39 @@ const TdBase: React.FunctionComponent<TdProps> = ({
           }
         })
       : null;
+
+  const { hasAnimations } = useContext(TableContext);
+  const updateAnimationClass = () => {
+    const ancestorControlRow = (cellRef as React.RefObject<HTMLElement | null>)?.current?.closest(
+      `.${styles.tableTr}.${styles.tableControlRow}`
+    );
+    const isControlRowExpanded = ancestorControlRow.classList.contains(styles.modifiers.expanded);
+    if (!isControlRowExpanded) {
+      return;
+    }
+
+    const isCurrentCellExpanded = (cellRef as React.RefObject<HTMLElement | null>)?.current?.classList.contains(
+      styles.modifiers.expanded
+    );
+    if (isCurrentCellExpanded) {
+      ancestorControlRow.classList.remove(styles.modifiers.noAnimateExpand);
+    } else {
+      ancestorControlRow.classList.add(styles.modifiers.noAnimateExpand);
+    }
+  };
+
+  const internalCompoundOnToggle = (
+    event: React.MouseEvent,
+    rowIndex: number,
+    colIndex: number,
+    isOpen: boolean,
+    rowData: IRowData,
+    extraData: IExtraData
+  ) => {
+    hasAnimations && updateAnimationClass();
+    compoundExpandProp?.onToggle(event, rowIndex, colIndex, isOpen, rowData, extraData);
+  };
+
   const compoundParams =
     compoundExpandProp !== null
       ? compoundExpand(
@@ -207,7 +245,7 @@ const TdBase: React.FunctionComponent<TdProps> = ({
             columnIndex: compoundExpandProp?.columnIndex,
             column: {
               extraParams: {
-                onExpand: compoundExpandProp?.onToggle,
+                onExpand: internalCompoundOnToggle,
                 expandId: compoundExpandProp?.expandId
               }
             }
@@ -279,6 +317,7 @@ const TdBase: React.FunctionComponent<TdProps> = ({
         styles.tableTd,
         className,
         isActionCell && styles.tableAction,
+        hasAction && styles.modifiers.action,
         textCenter && styles.modifiers.center,
         noPadding && styles.modifiers.noPadding,
         isStickyColumn && scrollStyles.tableStickyCell,

package/src/components/Table/Tr.tsx

@@ -14,10 +14,14 @@ export interface TrProps extends Omit<React.HTMLProps<HTMLTableRowElement>, 'onR
   innerRef?: React.Ref<any>;
   /** Flag indicating the Tr is hidden */
   isHidden?: boolean;
-  /** Only applicable to Tr within the Tbody: Makes the row expandable and determines if it's expanded or not.
+  /** Flag indicating whether an "expandable" Tr is expanded or not. Only applicable to a Tr within a Tbody.
    * To prevent column widths from responding automatically when expandable rows are toggled, the width prop must also be passed into either the th or td component
    */
   isExpanded?: boolean;
+  /** Flag indicating that the "control row" Tr has an expandable sibling Tr that is expanded or not. Only applicable to
+   * a Tr within a Tbody, and should have the same value as an expandable Tr's isExpanded prop.
+   */
+  isContentExpanded?: boolean;
   /** Only applicable to Tr within the Tbody: Whether the row is editable */
   isEditable?: boolean;
   /** Flag which adds hover styles for the clickable table row */
@@ -46,6 +50,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
   children,
   className,
   isExpanded,
+  isContentExpanded,
   isEditable,
   isHidden = false,
   isClickable = false,
@@ -77,7 +82,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
 
   const rowIsHidden = isHidden || (isExpanded !== undefined && !isExpanded);
 
-  const { registerSelectableRow } = useContext(TableContext);
+  const { registerSelectableRow, hasAnimations } = useContext(TableContext);
 
   useEffect(() => {
     if (isSelectable && !rowIsHidden) {
@@ -97,7 +102,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
           styles.tableTr,
           className,
           isExpanded !== undefined && styles.tableExpandableRow,
-          isExpanded && styles.modifiers.expanded,
+          (isExpanded || isContentExpanded) && styles.modifiers.expanded,
           isEditable && inlineStyles.modifiers.inlineEditable,
           isClickable && styles.modifiers.clickable,
           isRowSelected && styles.modifiers.selected,
@@ -110,6 +115,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
         {...(isClickable && { tabIndex: 0 })}
         aria-label={ariaLabel}
         ref={innerRef}
+        {...(hasAnimations && rowIsHidden && { inert: '' })}
         {...(onRowClick && { onClick: onRowClick, onKeyDown })}
         {...ouiaProps}
         {...props}

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

@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/react';
+import { ExpandableRowContent } from '../ExpandableRowContent';
+import styles from '@patternfly/react-styles/css/components/Table/table';
+
+test('Renders without children', () => {
+  render(<ExpandableRowContent data-testid="row-id" />);
+
+  expect(screen.getByTestId('row-id')).toBeInTheDocument();
+});
+
+test('Renders with children', () => {
+  render(<ExpandableRowContent>Row content</ExpandableRowContent>);
+
+  expect(screen.getByText('Row content')).toBeVisible();
+});
+
+test(`Renders only with class ${styles.tableExpandableRowContent} by default`, () => {
+  render(<ExpandableRowContent>Row content</ExpandableRowContent>);
+
+  expect(screen.getByText('Row content')).toHaveClass(styles.tableExpandableRowContent, { exact: true });
+});
+
+test(`Renders with class ${styles.modifiers.noBackground} when hasNoBackground is true`, () => {
+  render(<ExpandableRowContent hasNoBackground>Row content</ExpandableRowContent>);
+
+  expect(screen.getByText('Row content')).toHaveClass(styles.modifiers.noBackground);
+});
+
+test(`Spreads additional props`, () => {
+  render(<ExpandableRowContent data-custom="true">Row content</ExpandableRowContent>);
+
+  expect(screen.getByText('Row content')).toHaveAttribute('data-custom', 'true');
+});
+
+test('Matches snapshot', () => {
+  const { asFragment } = render(<ExpandableRowContent>Row content</ExpandableRowContent>);
+
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -0,0 +1,62 @@
+import { render, screen } from '@testing-library/react';
+import { Table } from '../Table';
+import styles from '@patternfly/react-styles/css/components/Table/table';
+
+test('Renders without children', () => {
+  render(<Table aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).toBeInTheDocument();
+});
+
+test('Renders with children', () => {
+  render(
+    <Table aria-label="Test table">
+      <caption>Table caption</caption>
+    </Table>
+  );
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).toHaveTextContent('Table caption');
+});
+
+test('Renders with role="treegrid" when isTreeTable is true', () => {
+  render(<Table isTreeTable aria-label="Test table" />);
+
+  expect(screen.getByRole('treegrid', { name: 'Test table' })).toBeInTheDocument();
+});
+
+test(`Renders with class ${styles.table} by default`, () => {
+  render(<Table aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).toHaveClass(styles.table);
+});
+
+test(`Renders with a pf-m-grid class by default`, () => {
+  render(<Table aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).toHaveClass(/^pf-m-grid/);
+});
+
+test(`Renders with a pf-m-tree-view-grid class when isTreeTable is true`, () => {
+  render(<Table isTreeTable aria-label="Test table" />);
+
+  expect(screen.getByRole('treegrid', { name: 'Test table' })).not.toHaveClass(/^pf-m-grid/);
+  expect(screen.getByRole('treegrid', { name: 'Test table' })).toHaveClass(/^pf-m-tree-view-grid/);
+});
+
+test(`Does not render with class ${styles.modifiers.animateExpand} by default`, () => {
+  render(<Table aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.animateExpand);
+});
+
+test(`Renders with class ${styles.modifiers.animateExpand} hasAnimations is true`, () => {
+  render(<Table hasAnimations aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).toHaveClass(styles.modifiers.animateExpand);
+});
+
+test('Matches snapshot without children', () => {
+  const { asFragment } = render(<Table />);
+
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -0,0 +1,87 @@
+import { render, screen } from '@testing-library/react';
+import styles from '@patternfly/react-styles/css/components/Table/table';
+import { Td } from '../Td';
+
+test('Renders without children', () => {
+  render(
+    <table>
+      <tbody>
+        <tr>
+          <Td />
+        </tr>
+      </tbody>
+    </table>
+  );
+
+  expect(screen.getByRole('cell')).toBeInTheDocument();
+});
+
+test('Renders with children', () => {
+  render(
+    <table>
+      <tbody>
+        <tr>
+          <Td>Cell content</Td>
+        </tr>
+      </tbody>
+    </table>
+  );
+
+  expect(screen.getByRole('cell')).toHaveTextContent('Cell content');
+});
+
+test(`Applies ${styles.modifiers.action} when hasAction is true`, () => {
+  render(
+    <table>
+      <tbody>
+        <tr>
+          <Td hasAction>Cell with action</Td>
+        </tr>
+      </tbody>
+    </table>
+  );
+
+  expect(screen.getByRole('cell')).toHaveClass('pf-m-action');
+});
+
+test(`Does not apply ${styles.modifiers.action} when hasAction is false`, () => {
+  render(
+    <table>
+      <tbody>
+        <tr>
+          <Td hasAction={false}>Cell without action</Td>
+        </tr>
+      </tbody>
+    </table>
+  );
+
+  expect(screen.getByRole('cell')).not.toHaveClass('pf-m-action');
+});
+
+test('Matches snapshot without children', () => {
+  const { asFragment } = render(
+    <table>
+      <tbody>
+        <tr>
+          <Td />
+        </tr>
+      </tbody>
+    </table>
+  );
+
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches snapshot with children', () => {
+  const { asFragment } = render(
+    <table>
+      <tbody>
+        <tr>
+          <Td>Cell content</Td>
+        </tr>
+      </tbody>
+    </table>
+  );
+
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -0,0 +1,79 @@
+import { render, screen } from '@testing-library/react';
+import { Tr } from '../Tr';
+import styles from '@patternfly/react-styles/css/components/Table/table';
+
+test('Renders without children', () => {
+  render(
+    <table>
+      <tbody>
+        <Tr />
+      </tbody>
+    </table>
+  );
+
+  expect(screen.getByRole('row')).toBeInTheDocument();
+});
+
+test('Renders with children', () => {
+  render(
+    <table>
+      <tbody>
+        <Tr>
+          <td>Row content</td>
+        </Tr>
+      </tbody>
+    </table>
+  );
+
+  expect(screen.getByRole('row')).toHaveTextContent('Row content');
+});
+
+test(`Does not render as hidden by default`, () => {
+  render(
+    <table>
+      <tbody>
+        <Tr />
+      </tbody>
+    </table>
+  );
+
+  expect(screen.getByRole('row')).not.toHaveAttribute('hidden');
+});
+
+test(`Renders as hidden when isHidden is true`, () => {
+  render(
+    <table>
+      <tbody>
+        <Tr isHidden />
+      </tbody>
+    </table>
+  );
+
+  expect(screen.queryByRole('row')).not.toBeInTheDocument();
+});
+
+test('Matches snapshot without children', () => {
+  const { asFragment } = render(
+    <table>
+      <tbody>
+        <Tr />
+      </tbody>
+    </table>
+  );
+
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches snapshot with children', () => {
+  const { asFragment } = render(
+    <table>
+      <tbody>
+        <Tr>
+          <td>Row content</td>
+        </Tr>
+      </tbody>
+    </table>
+  );
+
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-table__expandable-row-content"
+  >
+    Row content
+  </div>
+</DocumentFragment>
+`;

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

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+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-type="PF6/Table"
+    data-ouia-safe="true"
+    role="grid"
+  />
+</DocumentFragment>
+`;

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

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot with children 1`] = `
+<DocumentFragment>
+  <table>
+    <tbody>
+      <tr>
+        <td
+          class="pf-v6-c-table__td"
+          tabindex="-1"
+        >
+          Cell content
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</DocumentFragment>
+`;
+
+exports[`Matches snapshot without children 1`] = `
+<DocumentFragment>
+  <table>
+    <tbody>
+      <tr>
+        <td
+          class="pf-v6-c-table__td"
+          tabindex="-1"
+        />
+      </tr>
+    </tbody>
+  </table>
+</DocumentFragment>
+`;

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

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot with children 1`] = `
+<DocumentFragment>
+  <table>
+    <tbody>
+      <tr
+        class="pf-v6-c-table__tr"
+        data-ouia-component-id="OUIA-Generated-TableRow-6"
+        data-ouia-component-type="PF6/TableRow"
+        data-ouia-safe="true"
+      >
+        <td>
+          Row content
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</DocumentFragment>
+`;
+
+exports[`Matches snapshot without children 1`] = `
+<DocumentFragment>
+  <table>
+    <tbody>
+      <tr
+        class="pf-v6-c-table__tr"
+        data-ouia-component-id="OUIA-Generated-TableRow-5"
+        data-ouia-component-type="PF6/TableRow"
+        data-ouia-safe="true"
+      />
+    </tbody>
+  </table>
+</DocumentFragment>
+`;

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

@@ -184,6 +184,8 @@ To make a cell an action cell, render an `ActionsColumn` component inside a row'
 
 If actions menus are getting clipped by other items on the page, such as sticky columns or rows, the `ActionsColumn` can be passed a `menuAppendTo` prop to adjust where the actions menu is appended.
 
+When a table row contains mixed content of text and interactive elements, the `hasAction` property may be passed to a `Td` which contains interactive content like the below example's start `Button`. This will align buttons and other elements with other cells' text. Note that `hasAction` should not be used with `Td`s in an `ActionsColumn` because that comes with it's own spacing.
+
 ```ts file="TableActions.tsx"
 
 ```
@@ -200,9 +202,10 @@ Using an `OverflowMenu` in the actions column, allowing the actions to condense
 
 To make a parent/child row pair expandable:
 
-1. Make the first cell in every row an expandable cell by passing `TdExpandType` object to the `expand` prop on the `Td`
-2. Wrap the content of each child row cell in `ExpandableRowContent`.
-3. Enclose each parent/child row pair in a `Tbody` component with an `isExpanded` prop.
+1. Pass `isExpandable` to `Table`.
+1. Make the first cell in every row an expandable cell by passing `TdExpandType` object to the `expand` prop on the `Td`.
+1. Wrap the content of each child row cell in `ExpandableRowContent`.
+1. Pass `isExpanded` to `Tbody` and the `Tr` containing expandable content, and pass `isContentExpanded` to the `Tr` that acts as the "control row".
 
 The `TdExpandType` expects an `OnCollapse` event handler that has the following signature:
 
@@ -226,9 +229,10 @@ Note: Table column widths will respond automatically when toggling expanded rows
 
 To make a parent/child row pair compound expandable:
 
-1. Pass a `TdCompoundExpandType` object to the `compoundExpand` prop on any `Td` that has an expandable child row
-2. Wrap the content of each child row cell in `ExpandableRowContent`.
-3. Each child `Tr` has an `isExpanded` prop.
+1. Pass `isExpandable` to `Table`.
+1. Pass a `TdCompoundExpandType` object to the `compoundExpand` prop on any `Td` that has an expandable child row.
+1. Wrap the content of each child row cell in `ExpandableRowContent`.
+1. Pass `isExpanded` to `Tbody` and the `Tr` containing expandable content, and pass `isContentExpanded` to the `Tr` that acts as the "control row".
 
 The `TdCompoundExpandType` expects an `OnExpand` event handler with the following signature
 
@@ -243,6 +247,8 @@ export type OnExpand = (
 ) => void;
 ```
 
+For a more complex compound expandable implementation with nested tables, see our [table compound expansion demo](/components/table/react-demos/compound-expansion).
+
 ```ts file="TableCompoundExpandable.tsx"
 
 ```

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

@@ -146,7 +146,7 @@ export const TableActions: React.FunctionComponent = () => {
                 <Td dataLabel={columnNames.prs}>{repo.prs}</Td>
                 <Td dataLabel={columnNames.workspaces}>{repo.workspaces}</Td>
                 <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>
-                <Td dataLabel={columnNames.singleAction} modifier="fitContent">
+                <Td dataLabel={columnNames.singleAction} modifier="fitContent" hasAction>
                   {singleActionButton}
                 </Td>
                 <Td isActionCell>