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

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

@@ -21,7 +21,7 @@ exports[`DataViewTable 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="TableExample-th-0"
           scope="col"
           tabindex="-1"
@@ -29,7 +29,7 @@ exports[`DataViewTable 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="TableExample-th-1"
           scope="col"
           tabindex="-1"
@@ -37,7 +37,7 @@ exports[`DataViewTable 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="TableExample-th-2"
           scope="col"
           tabindex="-1"
@@ -45,7 +45,7 @@ exports[`DataViewTable 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="TableExample-th-3"
           scope="col"
           tabindex="-1"
@@ -53,7 +53,7 @@ exports[`DataViewTable 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="TableExample-th-4"
           scope="col"
           tabindex="-1"
@@ -352,7 +352,7 @@ exports[`DataViewTable component should render with a loading state 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="TableExample-th-0"
               scope="col"
               tabindex="-1"
@@ -360,7 +360,7 @@ exports[`DataViewTable component should render with a loading state 1`] = `
               Repositories
             </th>
             <th
-              class="pf-v6-c-table__th"
+              class="pf-v6-c-table__th pf-m-truncate"
               data-ouia-component-id="TableExample-th-1"
               scope="col"
               tabindex="-1"
@@ -368,7 +368,7 @@ exports[`DataViewTable component should render with a loading state 1`] = `
               Branches
             </th>
             <th
-              class="pf-v6-c-table__th"
+              class="pf-v6-c-table__th pf-m-truncate"
               data-ouia-component-id="TableExample-th-2"
               scope="col"
               tabindex="-1"
@@ -376,7 +376,7 @@ exports[`DataViewTable component should render with a loading state 1`] = `
               Pull requests
             </th>
             <th
-              class="pf-v6-c-table__th"
+              class="pf-v6-c-table__th pf-m-truncate"
               data-ouia-component-id="TableExample-th-3"
               scope="col"
               tabindex="-1"
@@ -384,7 +384,7 @@ exports[`DataViewTable component should render with a loading state 1`] = `
               Workspaces
             </th>
             <th
-              class="pf-v6-c-table__th"
+              class="pf-v6-c-table__th pf-m-truncate"
               data-ouia-component-id="TableExample-th-4"
               scope="col"
               tabindex="-1"
@@ -429,7 +429,7 @@ exports[`DataViewTable component should render with an empty state 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="TableExample-th-0"
               scope="col"
               tabindex="-1"
@@ -437,7 +437,7 @@ exports[`DataViewTable component should render with an empty state 1`] = `
               Repositories
             </th>
             <th
-              class="pf-v6-c-table__th"
+              class="pf-v6-c-table__th pf-m-truncate"
               data-ouia-component-id="TableExample-th-1"
               scope="col"
               tabindex="-1"
@@ -445,7 +445,7 @@ exports[`DataViewTable component should render with an empty state 1`] = `
               Branches
             </th>
             <th
-              class="pf-v6-c-table__th"
+              class="pf-v6-c-table__th pf-m-truncate"
               data-ouia-component-id="TableExample-th-2"
               scope="col"
               tabindex="-1"
@@ -453,7 +453,7 @@ exports[`DataViewTable component should render with an empty state 1`] = `
               Pull requests
             </th>
             <th
-              class="pf-v6-c-table__th"
+              class="pf-v6-c-table__th pf-m-truncate"
               data-ouia-component-id="TableExample-th-3"
               scope="col"
               tabindex="-1"
@@ -461,7 +461,7 @@ exports[`DataViewTable component should render with an empty state 1`] = `
               Workspaces
             </th>
             <th
-              class="pf-v6-c-table__th"
+              class="pf-v6-c-table__th pf-m-truncate"
               data-ouia-component-id="TableExample-th-4"
               scope="col"
               tabindex="-1"
@@ -506,7 +506,7 @@ exports[`DataViewTable component should render with an error state 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="TableExample-th-0"
               scope="col"
               tabindex="-1"
@@ -514,7 +514,7 @@ exports[`DataViewTable component should render with an error state 1`] = `
               Repositories
             </th>
             <th
-              class="pf-v6-c-table__th"
+              class="pf-v6-c-table__th pf-m-truncate"
               data-ouia-component-id="TableExample-th-1"
               scope="col"
               tabindex="-1"
@@ -522,7 +522,7 @@ exports[`DataViewTable component should render with an error state 1`] = `
               Branches
             </th>
             <th
-              class="pf-v6-c-table__th"
+              class="pf-v6-c-table__th pf-m-truncate"
               data-ouia-component-id="TableExample-th-2"
               scope="col"
               tabindex="-1"
@@ -530,7 +530,7 @@ exports[`DataViewTable component should render with an error state 1`] = `
               Pull requests
             </th>
             <th
-              class="pf-v6-c-table__th"
+              class="pf-v6-c-table__th pf-m-truncate"
               data-ouia-component-id="TableExample-th-3"
               scope="col"
               tabindex="-1"
@@ -538,7 +538,7 @@ exports[`DataViewTable component should render with an error state 1`] = `
               Workspaces
             </th>
             <th
-              class="pf-v6-c-table__th"
+              class="pf-v6-c-table__th pf-m-truncate"
               data-ouia-component-id="TableExample-th-4"
               scope="col"
               tabindex="-1"

package/src/DataViewTableHead/DataViewTableHead.tsx

@@ -1,12 +1,8 @@
 import { FC, useMemo } from 'react';
-import {
-  Th,
-  Thead,
-  TheadProps,
-  Tr
-} from '@patternfly/react-table';
+import { Th, Thead, TheadProps, Tr } from '@patternfly/react-table';
 import { useInternalContext } from '../InternalContext';
 import { DataViewTh, isDataViewThObject } from '../DataViewTable';
+import { DataViewTh as DataViewThElement } from '../DataViewTh/DataViewTh';
 
 /** extends TheadProps */
 export interface DataViewTableHeadProps extends TheadProps {
@@ -16,37 +12,42 @@ export interface DataViewTableHeadProps extends TheadProps {
   columns: DataViewTh[];
   /** Custom OUIA ID */
   ouiaId?: string;
+  /** @hide Indicates whether table is resizable */
+  hasResizableColumns?: boolean;
 }
 
 export const DataViewTableHead: FC<DataViewTableHeadProps> = ({
   isTreeTable = false,
   columns,
   ouiaId = 'DataViewTableHead',
+  hasResizableColumns,
   ...props
 }: DataViewTableHeadProps) => {
   const { selection } = useInternalContext();
   const { onSelect, isSelected } = selection ?? {};
 
-  const cells = useMemo(() => [
-    onSelect && isSelected && !isTreeTable ? (
-      <Th key="row-select" screenReaderText='Data selection table head cell' />
-    ) : null,
-    ...columns.map((column, index) => (
-      <Th
-        key={index}
-        {...(isDataViewThObject(column) && (column?.props ?? {}))}
-        data-ouia-component-id={`${ouiaId}-th-${index}`}
-      >
-        {isDataViewThObject(column) ? column.cell : column}
-      </Th>
-    )
-    ) ], [ columns, ouiaId, onSelect, isSelected, isTreeTable ]);
+  const cells = useMemo(
+    () => [
+      onSelect && isSelected && !isTreeTable ? (
+        <Th key="row-select" screenReaderText="Data selection table head cell" />
+      ) : null,
+      ...columns.map((column, index) => (
+        <DataViewThElement
+          key={index}
+          content={isDataViewThObject(column) ? column.cell : column}
+          resizableProps={isDataViewThObject(column) ? column.resizableProps : undefined}
+          data-ouia-component-id={`${ouiaId}-th-${index}`}
+          thProps={isDataViewThObject(column) ? (column?.props ?? {}) : {}}
+          hasResizableColumns={hasResizableColumns}
+        />
+      ))
+    ],
+    [ columns, ouiaId, onSelect, isSelected, isTreeTable, hasResizableColumns ]
+  );
 
   return (
     <Thead data-ouia-component-id={`${ouiaId}-thead`} {...props}>
-      <Tr ouiaId={`${ouiaId}-tr-head`}>
-        {cells}
-      </Tr>
+      <Tr ouiaId={`${ouiaId}-tr-head`}>{cells}</Tr>
     </Thead>
   );
 };

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 ]);