@patternfly/react-data-view 6.3.0 → 6.4.0-prerelease.11

package/src/DataViewTableHead/__snapshots__/DataViewTableHead.test.tsx.snap

@@ -20,7 +20,7 @@ exports[`DataViewTableHead component should render correctly 1`] = `
         data-ouia-safe="true"
       >
         <th
-          class="pf-v6-c-table__th"
+          class="pf-v6-c-table__th pf-m-truncate"
           data-ouia-component-id="HeaderExample-th-0"
           scope="col"
           tabindex="-1"
@@ -28,7 +28,7 @@ exports[`DataViewTableHead component should render correctly 1`] = `
           Repositories
         </th>
         <th
-          class="pf-v6-c-table__th"
+          class="pf-v6-c-table__th pf-m-truncate"
           data-ouia-component-id="HeaderExample-th-1"
           scope="col"
           tabindex="-1"
@@ -36,7 +36,7 @@ exports[`DataViewTableHead component should render correctly 1`] = `
           Branches
         </th>
         <th
-          class="pf-v6-c-table__th"
+          class="pf-v6-c-table__th pf-m-truncate"
           data-ouia-component-id="HeaderExample-th-2"
           scope="col"
           tabindex="-1"
@@ -44,7 +44,7 @@ exports[`DataViewTableHead component should render correctly 1`] = `
           Pull requests
         </th>
         <th
-          class="pf-v6-c-table__th"
+          class="pf-v6-c-table__th pf-m-truncate"
           data-ouia-component-id="HeaderExample-th-3"
           scope="col"
           tabindex="-1"
@@ -52,7 +52,7 @@ exports[`DataViewTableHead component should render correctly 1`] = `
           Workspaces
         </th>
         <th
-          class="pf-v6-c-table__th"
+          class="pf-v6-c-table__th pf-m-truncate"
           data-ouia-component-id="HeaderExample-th-4"
           scope="col"
           tabindex="-1"
@@ -104,7 +104,7 @@ exports[`DataViewTableHead component should render selection column when selecti
               </span>
             </th>
             <th
-              class="pf-v6-c-table__th"
+              class="pf-v6-c-table__th pf-m-truncate"
               data-ouia-component-id="HeaderExample-th-0"
               scope="col"
               tabindex="-1"
@@ -112,7 +112,7 @@ exports[`DataViewTableHead component should render selection column when selecti
               Repositories
             </th>
             <th
-              class="pf-v6-c-table__th"
+              class="pf-v6-c-table__th pf-m-truncate"
               data-ouia-component-id="HeaderExample-th-1"
               scope="col"
               tabindex="-1"
@@ -120,7 +120,7 @@ exports[`DataViewTableHead component should render selection column when selecti
               Branches
             </th>
             <th
-              class="pf-v6-c-table__th"
+              class="pf-v6-c-table__th pf-m-truncate"
               data-ouia-component-id="HeaderExample-th-2"
               scope="col"
               tabindex="-1"
@@ -128,7 +128,7 @@ exports[`DataViewTableHead component should render selection column when selecti
               Pull requests
             </th>
             <th
-              class="pf-v6-c-table__th"
+              class="pf-v6-c-table__th pf-m-truncate"
               data-ouia-component-id="HeaderExample-th-3"
               scope="col"
               tabindex="-1"
@@ -136,7 +136,7 @@ exports[`DataViewTableHead component should render selection column when selecti
               Workspaces
             </th>
             <th
-              class="pf-v6-c-table__th"
+              class="pf-v6-c-table__th pf-m-truncate"
               data-ouia-component-id="HeaderExample-th-4"
               scope="col"
               tabindex="-1"
@@ -179,7 +179,7 @@ exports[`DataViewTableHead component should render the tree table correctly when
             data-ouia-safe="true"
           >
             <th
-              class="pf-v6-c-table__th"
+              class="pf-v6-c-table__th pf-m-truncate"
               data-ouia-component-id="HeaderExample-th-0"
               scope="col"
               tabindex="-1"
@@ -187,7 +187,7 @@ exports[`DataViewTableHead component should render the tree table correctly when
               Repositories
             </th>
             <th
-              class="pf-v6-c-table__th"
+              class="pf-v6-c-table__th pf-m-truncate"
               data-ouia-component-id="HeaderExample-th-1"
               scope="col"
               tabindex="-1"
@@ -195,7 +195,7 @@ exports[`DataViewTableHead component should render the tree table correctly when
               Branches
             </th>
             <th
-              class="pf-v6-c-table__th"
+              class="pf-v6-c-table__th pf-m-truncate"
               data-ouia-component-id="HeaderExample-th-2"
               scope="col"
               tabindex="-1"
@@ -203,7 +203,7 @@ exports[`DataViewTableHead component should render the tree table correctly when
               Pull requests
             </th>
             <th
-              class="pf-v6-c-table__th"
+              class="pf-v6-c-table__th pf-m-truncate"
               data-ouia-component-id="HeaderExample-th-3"
               scope="col"
               tabindex="-1"
@@ -211,7 +211,7 @@ exports[`DataViewTableHead component should render the tree table correctly when
               Workspaces
             </th>
             <th
-              class="pf-v6-c-table__th"
+              class="pf-v6-c-table__th pf-m-truncate"
               data-ouia-component-id="HeaderExample-th-4"
               scope="col"
               tabindex="-1"

package/src/DataViewTableTree/DataViewTableTree.test.tsx

@@ -101,6 +101,15 @@ describe('DataViewTableTree component', () => {
     expect(container).toMatchSnapshot();
   });
 
+  test('should render tree table with all expandable nodes expanded', () => {
+    const { container } = render(
+      <DataView selection={mockSelection}>
+        <DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} expandAll rows={rows} leafIcon={<LeafIcon/>} expandedIcon={<FolderOpenIcon aria-hidden />} collapsedIcon={<FolderIcon aria-hidden />} />
+      </DataView>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
   test('should render tree table with a loading state', () => {
     const { container } = render(
       <DataView activeState="loading">

package/src/DataViewTableTree/DataViewTableTree.tsx

@@ -1,4 +1,4 @@
-import { FC, useState, useMemo, ReactNode } from 'react';
+import { FC, useState, useMemo, useEffect, ReactNode } from 'react';
 import {
   Table,
   TableProps,
@@ -67,6 +67,8 @@ export interface DataViewTableTreeProps extends Omit<TableProps, 'onSelect' | 'r
   expandedIcon?: React.ReactNode;
   /** Optional icon for the collapsed parent rows */
   collapsedIcon?: React.ReactNode;
+  /** Expand all expandable nodes on initial load */
+  expandAll?: boolean;
   /** Custom OUIA ID */
   ouiaId?: string;
 }
@@ -79,6 +81,7 @@ export const DataViewTableTree: FC<DataViewTableTreeProps> = ({
   leafIcon = null,
   expandedIcon = null,
   collapsedIcon = null,
+  expandAll = false,
   ouiaId = 'DataViewTableTree',
   ...props
 }: DataViewTableTreeProps) => {
@@ -87,6 +90,37 @@ export const DataViewTableTree: FC<DataViewTableTreeProps> = ({
   const [ expandedNodeIds, setExpandedNodeIds ] = useState<string[]>([]);
   const [ expandedDetailsNodeNames, setExpandedDetailsNodeIds ] = useState<string[]>([]);
 
+  // Helper function to collect all node IDs that have children (are expandable)
+  const getExpandableNodeIds = (nodes: DataViewTrTree[]): string[] => {
+    const expandableIds: string[] = [];
+    
+    const traverse = (nodeList: DataViewTrTree[]) => {
+      nodeList.forEach(node => {
+        if (node.children && node.children.length > 0) {
+          expandableIds.push(node.id);
+          traverse(node.children);
+        }
+      });
+    };
+    
+    traverse(nodes);
+    return expandableIds;
+  };
+
+  // Effect to handle expandAll behavior
+  // Memoize the expandable IDs to avoid recalculating when rows object reference changes but structure is the same
+  const expandableIds = useMemo(() => getExpandableNodeIds(rows), [ rows ]);
+
+  // Effect to handle expandAll behavior - only runs when IDs actually change
+  useEffect(() => {
+    if (expandAll) {
+      setExpandedNodeIds(expandableIds);
+    } else {
+      setExpandedNodeIds([]);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ expandAll, expandableIds.join(',') ]);
+
   const activeHeadState = useMemo(() => activeState ? headStates?.[activeState] : undefined, [ activeState, headStates ]);
   const activeBodyState = useMemo(() => activeState ? bodyStates?.[activeState] : undefined, [ activeState, bodyStates ]);