@patternfly/react-table 6.3.0-prerelease.24 → 6.3.0-prerelease.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "6.3.0-prerelease.24",
+  "version": "6.3.0-prerelease.26",
   "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.24",
-    "@patternfly/react-icons": "^6.3.0-prerelease.7",
-    "@patternfly/react-styles": "^6.3.0-prerelease.7",
-    "@patternfly/react-tokens": "^6.3.0-prerelease.7",
+    "@patternfly/react-core": "^6.3.0-prerelease.26",
+    "@patternfly/react-icons": "^6.3.0-prerelease.8",
+    "@patternfly/react-styles": "^6.3.0-prerelease.8",
+    "@patternfly/react-tokens": "^6.3.0-prerelease.8",
     "lodash": "^4.17.21",
     "tslib": "^2.8.1"
   },
@@ -51,5 +51,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "58c9fa470754cc5ed27a6f52cf72d99a589e6ec9"
+  "gitHead": "f7974fbc0bcfaeff92cb05a4604bb48f4df54375"
 }

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;
+  /** 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';
@@ -193,6 +195,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 +242,7 @@ const TdBase: React.FunctionComponent<TdProps> = ({
             columnIndex: compoundExpandProp?.columnIndex,
             column: {
               extraParams: {
-                onExpand: compoundExpandProp?.onToggle,
+                onExpand: internalCompoundOnToggle,
                 expandId: compoundExpandProp?.expandId
               }
             }

package/src/components/Table/Tr.tsx

@@ -80,7 +80,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
 
   const rowIsHidden = isHidden || (isExpanded !== undefined && !isExpanded && isExpandable);
 
-  const { registerSelectableRow } = useContext(TableContext);
+  const { registerSelectableRow, hasAnimations } = useContext(TableContext);
 
   useEffect(() => {
     if (isSelectable && !rowIsHidden) {
@@ -113,6 +113,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__/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__/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

@@ -243,6 +243,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/TableCompoundExpandable.tsx

@@ -4,7 +4,6 @@ import { Table, Thead, Tr, Th, Tbody, Td, TdProps, ExpandableRowContent } from '
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
 interface Repository {
   name: string;
@@ -59,7 +58,7 @@ export const TableCompoundExpandable: React.FunctionComponent = () => {
   });
 
   return (
-    <Table aria-label="Compound expandable table">
+    <Table aria-label="Compound expandable table" isExpandable hasAnimations>
       <Thead>
         <Tr>
           <Th>{columnNames.name}</Th>
@@ -75,7 +74,7 @@ export const TableCompoundExpandable: React.FunctionComponent = () => {
         const isRowExpanded = !!expandedCellKey;
         return (
           <Tbody key={repo.name} isExpanded={isRowExpanded}>
-            <Tr isControlRow>
+            <Tr isExpanded={isRowExpanded} isControlRow>
               <Td width={25} dataLabel={columnNames.name} component="th">
                 <a href="#">{repo.name}</a>
               </Td>
@@ -107,24 +106,27 @@ export const TableCompoundExpandable: React.FunctionComponent = () => {
                 <a href="#">Open in GitHub</a>
               </Td>
             </Tr>
-            {isRowExpanded ? (
-              <Tr isExpanded={isRowExpanded}>
-                <Td dataLabel={columnNames[expandedCellKey]} colSpan={6}>
-                  <ExpandableRowContent>
-                    <div className={spacing.mMd}>
-                      Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem
-                      ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum
-                      sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit
-                      dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor.
-                      Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem
-                      ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum
-                      sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit
-                      dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor.
-                    </div>
-                  </ExpandableRowContent>
-                </Td>
-              </Tr>
-            ) : null}
+            <Tr isExpanded={columnNames[expandedCellKey] === columnNames.branches} isExpandable>
+              <Td dataLabel={columnNames[expandedCellKey]} colSpan={6}>
+                <ExpandableRowContent>
+                  <div>Expanded content for {repo.name}: branches goes here!</div>
+                </ExpandableRowContent>
+              </Td>
+            </Tr>
+            <Tr isExpanded={columnNames[expandedCellKey] === columnNames.prs} isExpandable>
+              <Td dataLabel={columnNames[expandedCellKey]} colSpan={6}>
+                <ExpandableRowContent>
+                  <div>Expanded content for {repo.name}: prs goes here!</div>
+                </ExpandableRowContent>
+              </Td>
+            </Tr>
+            <Tr isExpanded={columnNames[expandedCellKey] === columnNames.workspaces} isExpandable>
+              <Td dataLabel={columnNames[expandedCellKey]} colSpan={6}>
+                <ExpandableRowContent>
+                  <div>Expanded content for {repo.name}: workspaces goes here!</div>
+                </ExpandableRowContent>
+              </Td>
+            </Tr>
           </Tbody>
         );
       })}

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

@@ -116,7 +116,12 @@ export const TableExpandable: React.FunctionComponent = () => {
         id="toggle-compact"
         name="toggle-compact"
       />
-      <Table isExpandable aria-label="Expandable table" variant={isExampleCompact ? 'compact' : undefined}>
+      <Table
+        isExpandable
+        hasAnimations
+        aria-label="Expandable table"
+        variant={isExampleCompact ? 'compact' : undefined}
+      >
         <Thead>
           <Tr>
             <Th screenReaderText="Row expansion" />

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

@@ -61,7 +61,7 @@ export const TableNestedExpandable: React.FunctionComponent = () => {
 
   return (
     <InnerScrollContainer>
-      <Table aria-label="Nested column headers with expandable rows table" gridBreakPoint="">
+      <Table isExpandable hasAnimations aria-label="Nested column headers with expandable rows table" gridBreakPoint="">
         <Thead hasNestedHeader>
           <Tr>
             <Th screenReaderText="Row expansion" rowSpan={2} />
@@ -85,7 +85,7 @@ export const TableNestedExpandable: React.FunctionComponent = () => {
         </Thead>
         {teams.map((team, rowIndex) => (
           <Tbody key={team.name} isExpanded={isTeamExpanded(team)}>
-            <Tr>
+            <Tr isExpanded={isTeamExpanded(team)}>
               <Td
                 expand={{
                   rowIndex,
@@ -104,7 +104,7 @@ export const TableNestedExpandable: React.FunctionComponent = () => {
                 </Button>
               </Td>
             </Tr>
-            <Tr isExpanded={isTeamExpanded(team)}>
+            <Tr isExpanded={isTeamExpanded(team)} isExpandable>
               <Td dataLabel={`Team ${team.name} description`} colSpan={6}>
                 <ExpandableRowContent>{team.description}</ExpandableRowContent>
               </Td>

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

@@ -128,7 +128,7 @@ export const TableExpandable: React.FunctionComponent = () => {
   ];
 
   return (
-    <Table isExpandable aria-label="Simple table">
+    <Table isExpandable hasAnimations aria-label="Simple table">
       <Thead>
         <Tr>
           <Th screenReaderText="Row expansion" />

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

@@ -112,7 +112,13 @@ export const TableStripedExpandable: React.FunctionComponent = () => {
         id="toggle-compact-striped"
         name="toggle-compact-striped"
       />
-      <Table aria-label="Expandable table" variant={isExampleCompact ? 'compact' : undefined} isStriped isExpandable>
+      <Table
+        aria-label="Expandable table"
+        variant={isExampleCompact ? 'compact' : undefined}
+        isStriped
+        isExpandable
+        hasAnimations
+      >
         <Thead>
           <Tr>
             <Th screenReaderText="Row expansion" />
@@ -148,7 +154,7 @@ export const TableStripedExpandable: React.FunctionComponent = () => {
           }
           return (
             <Tbody key={repo.name} isExpanded={isRepoExpanded(repo)}>
-              <Tr>
+              <Tr isExpanded={isRepoExpanded(repo)}>
                 <Td
                   expand={
                     repo.details
@@ -167,7 +173,7 @@ export const TableStripedExpandable: React.FunctionComponent = () => {
                 <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>
               </Tr>
               {repo.details ? (
-                <Tr isExpanded={isRepoExpanded(repo)}>
+                <Tr isExpanded={isRepoExpanded(repo)} isExpandable>
                   {!childIsFullWidth ? <Td /> : null}
                   {repo.details.detail1 ? (
                     <Td dataLabel="Repo detail 1" noPadding={childHasNoPadding} colSpan={detail1Colspan}>