@patternfly/react-data-view 6.4.0-prerelease.2 → 6.4.0-prerelease.4

package/src/DataViewTable/DataViewTable.tsx

@@ -1,46 +1,55 @@
 import { FC, ReactNode } from 'react';
-import {
-  TdProps,
-  ThProps,
-  TrProps
-} from '@patternfly/react-table';
+import { TdProps, ThProps, TrProps, InnerScrollContainer } from '@patternfly/react-table';
 import { DataViewTableTree, DataViewTableTreeProps } from '../DataViewTableTree';
 import { DataViewTableBasic, DataViewTableBasicProps } from '../DataViewTableBasic';
+import { DataViewThResizableProps } from '../DataViewTh/DataViewTh';
 
 // Table head typings
-export type DataViewTh = ReactNode | {
-  /** Table head cell node */
-  cell: ReactNode;
-  /** Props passed to Th */
-  props?: ThProps
-};
-export const isDataViewThObject = (value: DataViewTh): value is { cell: ReactNode; props?: ThProps } => value != null && typeof value === 'object' && 'cell' in value;
+export type DataViewTh =
+  | ReactNode
+  | {
+      /** Table head cell node */
+      cell: ReactNode;
+      /** Additional props for a resizable column */
+      resizableProps?: DataViewThResizableProps;
+      /** Props passed to Th */
+      props?: ThProps;
+    };
+export const isDataViewThObject = (value: DataViewTh): value is { cell: ReactNode; props?: ThProps } =>
+  value != null && typeof value === 'object' && 'cell' in value;
 
 // Basic table typings
 export interface DataViewTrObject {
   /** Array of rows */
-  row: DataViewTd[],
+  row: DataViewTd[];
   /** Unique identifier of a row */
-  id?: string,
+  id?: string;
   /** Props passed to Tr */
-  props?: TrProps
+  props?: TrProps;
 }
 
-export type DataViewTd = ReactNode | {
-  /** Table body cell node */
-  cell: ReactNode;
-  /** Props passed to Td */
-  props?: TdProps
-};
+export type DataViewTd =
+  | ReactNode
+  | {
+      /** Table body cell node */
+      cell: ReactNode;
+      /** Props passed to Td */
+      props?: TdProps;
+    };
 
 export type DataViewTr = DataViewTd[] | DataViewTrObject;
 
-export const isDataViewTdObject = (value: DataViewTd): value is { cell: ReactNode; props?: TdProps } => value != null && typeof value === 'object' && 'cell' in value;
-export const isDataViewTrObject = (value: DataViewTr): value is { row: DataViewTd[], id?: string } => value != null && typeof value === 'object' && 'row' in value;
+export const isDataViewTdObject = (value: DataViewTd): value is { cell: ReactNode; props?: TdProps } =>
+  value != null && typeof value === 'object' && 'cell' in value;
+export const isDataViewTrObject = (value: DataViewTr): value is { row: DataViewTd[]; id?: string } =>
+  value != null && typeof value === 'object' && 'row' in value;
 
 // Tree table typings
 /** extends DataViewTrObject */
-export interface DataViewTrTree extends DataViewTrObject { id: string, children?: DataViewTrTree[] }
+export interface DataViewTrTree extends DataViewTrObject {
+  id: string;
+  children?: DataViewTrTree[];
+}
 
 export type DataViewTableProps =
   | ({
@@ -48,10 +57,22 @@ export type DataViewTableProps =
     } & DataViewTableTreeProps)
   | ({
       isTreeTable?: false;
+      isResizable?: boolean;
     } & DataViewTableBasicProps);
 
-export const DataViewTable: FC<DataViewTableProps> = (props) => (
-  props.isTreeTable ? <DataViewTableTree {...props} /> : <DataViewTableBasic {...props} />
-);
+export const DataViewTable: FC<DataViewTableProps> = (props) => {
+  if (props.isTreeTable) {
+    return <DataViewTableTree {...props} />;
+  } else {
+    const { isResizable, ...rest } = props;
+    return isResizable ? (
+      <InnerScrollContainer>
+        <DataViewTableBasic hasResizableColumns {...rest} />
+      </InnerScrollContainer>
+    ) : (
+      <DataViewTableBasic {...rest} />
+    );
+  }
+};
 
 export default DataViewTable;

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

@@ -21,7 +21,7 @@ exports[`DataViewTable component should render a basic table 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 a basic table 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 a basic table 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 a basic table 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 a basic table 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"
@@ -344,7 +344,7 @@ exports[`DataViewTable component should render a tree table 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"
@@ -352,7 +352,7 @@ exports[`DataViewTable component should render a tree table 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"
@@ -360,7 +360,7 @@ exports[`DataViewTable component should render a tree table 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"
@@ -368,7 +368,7 @@ exports[`DataViewTable component should render a tree table 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"
@@ -376,7 +376,7 @@ exports[`DataViewTable component should render a tree table 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"
@@ -411,7 +411,6 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
               class="pf-v6-c-table__toggle"
             >
               <button
-                aria-disabled="false"
                 aria-expanded="false"
                 aria-label="Expand row 0"
                 class="pf-v6-c-button pf-m-plain"
@@ -457,7 +456,6 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
               class="pf-v6-c-table__tree-view-details-toggle"
             >
               <button
-                aria-disabled="false"
                 aria-expanded="false"
                 aria-label="Show row details"
                 class="pf-v6-c-button pf-m-plain"
@@ -553,7 +551,6 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
               class="pf-v6-c-table__tree-view-details-toggle"
             >
               <button
-                aria-disabled="false"
                 aria-expanded="false"
                 aria-label="Show row details"
                 class="pf-v6-c-button pf-m-plain"
@@ -649,7 +646,6 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
               class="pf-v6-c-table__tree-view-details-toggle"
             >
               <button
-                aria-disabled="false"
                 aria-expanded="false"
                 aria-label="Show row details"
                 class="pf-v6-c-button pf-m-plain"
@@ -735,7 +731,6 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
               class="pf-v6-c-table__toggle"
             >
               <button
-                aria-disabled="false"
                 aria-expanded="false"
                 aria-label="Expand row 3"
                 class="pf-v6-c-button pf-m-plain"
@@ -781,7 +776,6 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
               class="pf-v6-c-table__tree-view-details-toggle"
             >
               <button
-                aria-disabled="false"
                 aria-expanded="false"
                 aria-label="Show row details"
                 class="pf-v6-c-button pf-m-plain"
@@ -877,7 +871,6 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
               class="pf-v6-c-table__tree-view-details-toggle"
             >
               <button
-                aria-disabled="false"
                 aria-expanded="false"
                 aria-label="Show row details"
                 class="pf-v6-c-button pf-m-plain"
@@ -972,7 +965,6 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
               class="pf-v6-c-table__tree-view-details-toggle"
             >
               <button
-                aria-disabled="false"
                 aria-expanded="false"
                 aria-label="Show row details"
                 class="pf-v6-c-button pf-m-plain"

package/src/DataViewTableBasic/DataViewTableBasic.tsx

@@ -23,6 +23,8 @@ export interface DataViewTableBasicProps extends Omit<TableProps, 'onSelect' | '
   bodyStates?: Partial<Record<DataViewState | string, React.ReactNode>>
   /** Custom OUIA ID */
   ouiaId?: string;
+  /** @hide Indicates if the table is resizable */
+  hasResizableColumns?: boolean;
 }
 
 export const DataViewTableBasic: FC<DataViewTableBasicProps> = ({
@@ -31,6 +33,7 @@ export const DataViewTableBasic: FC<DataViewTableBasicProps> = ({
   ouiaId = 'DataViewTableBasic',
   headStates,
   bodyStates,
+  hasResizableColumns,
   ...props
 }: DataViewTableBasicProps) => {
   const { selection, activeState, isSelectable } = useInternalContext();
@@ -74,7 +77,7 @@ export const DataViewTableBasic: FC<DataViewTableBasicProps> = ({
 
   return (
     <Table aria-label="Data table" ouiaId={ouiaId} {...props}>
-      { activeHeadState || <DataViewTableHead columns={columns} ouiaId={ouiaId} /> }
+      { activeHeadState || <DataViewTableHead columns={columns} ouiaId={ouiaId} hasResizableColumns={hasResizableColumns} /> }
       { activeBodyState || <Tbody>{renderedRows}</Tbody> }
     </Table>
   );

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"