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

package/src/DataViewTableBasic/DataViewTableBasic.test.tsx

@@ -1,8 +1,10 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { DataView } from '../DataView';
-import { DataViewTableBasic } from './DataViewTableBasic';
+import { DataViewTableBasic, ExpandableContent } from './DataViewTableBasic';
 
 interface Repository {
+  id: number;
   name: string;
   branches: string | null;
   prs: string | null;
@@ -11,20 +13,28 @@ interface Repository {
 }
 
 const repositories: Repository[] = [
-  { name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
-  { name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
-  { name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
-  { name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
-  { name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
-  { name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
+  { id: 1, name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
+  { id: 2, name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
+  { id: 3, name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
+  { id: 4, name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
+  { id: 5, name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
+  { id: 6, name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
 ];
 
-const rows = repositories.map(repo => ({
-  row: Object.values(repo),
-}));
+const rows = repositories.map(({ id, name, branches, prs, workspaces, lastCommit }) => [
+  { id, cell: name },
+  branches,
+  prs,
+  workspaces,
+  lastCommit
+]);
 
 const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
 
+const expandableContents: ExpandableContent[] = [
+  { rowId: 1, columnId: 1, content: <div>Branch details for Repository one</div> },
+];
+
 const ouiaId = 'TableExample';
 
 describe('DataViewTable component', () => {
@@ -57,8 +67,40 @@ describe('DataViewTable component', () => {
     const { container } = render(
       <DataView activeState="loading">
         <DataViewTableBasic aria-label='Repositories table' ouiaId={ouiaId} columns={columns} bodyStates={{ loading: "Data is loading" }} rows={[]} />
-      </DataView> 
+      </DataView>
     );
     expect(container).toMatchSnapshot();
   });
+
+  test('when isExpandable cell should be clickable and expandable', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <DataViewTableBasic
+        aria-label='Repositories table'
+        ouiaId={ouiaId}
+        columns={columns}
+        rows={rows}
+        isExpandable={true}
+        expandedRows={expandableContents}
+      />
+    );
+
+    // Initially, expandable content is rendered but should be hidden (not visible)
+    const initialBranchContent = screen.getByText('Branch details for Repository one');
+    expect(initialBranchContent.closest('tr')?.classList.contains('pf-m-expanded')).toBeFalsy();
+
+    // Find the first expandable button by ID
+    const branchExpandButton = document.getElementById('expandable-0-0-1');
+    expect(branchExpandButton).toBeTruthy();
+    // Verify the button is in the cell with "Branch one" text
+    expect(branchExpandButton?.closest('td')?.textContent).toContain('Branch one');
+
+    // Click the expand button for Branches column
+    await user.click(branchExpandButton!);
+
+    // After clicking, the expandable content should be visible
+    const branchContent = screen.getByText('Branch details for Repository one');
+    expect(branchContent.closest('tr')?.classList.contains('pf-m-expanded')).toBeTruthy();
+  });
 });

package/src/DataViewTableBasic/DataViewTableBasic.tsx

@@ -1,5 +1,8 @@
-import { FC, useMemo } from 'react';
+import { FC, useMemo, useState, useRef } from 'react';
 import {
+  ExpandableRowContent,
+  InnerScrollContainer,
+  OuterScrollContainer,
   Table,
   TableProps,
   Tbody,
@@ -11,26 +14,44 @@ import { DataViewTableHead } from '../DataViewTableHead';
 import { DataViewTh, DataViewTr, isDataViewTdObject, isDataViewTrObject } from '../DataViewTable';
 import { DataViewState } from '../DataView/DataView';
 
+export interface ExpandableContent {
+  rowId: number;
+  columnId: number;
+  content: React.ReactNode;
+}
+
 /** extends TableProps */
 export interface DataViewTableBasicProps extends Omit<TableProps, 'onSelect' | 'rows'> {
   /** Columns definition */
   columns: DataViewTh[];
   /** Current page rows */
   rows: DataViewTr[];
+  /** Expanded rows content */
+  expandedRows?: ExpandableContent[];
   /** Table head states to be displayed when active */
   headStates?: Partial<Record<DataViewState | string, React.ReactNode>>
   /** Table body states to be displayed when active */
   bodyStates?: Partial<Record<DataViewState | string, React.ReactNode>>
   /** Custom OUIA ID */
   ouiaId?: string;
+  /** @hide Indicates if the table is resizable */
+  hasResizableColumns?: boolean;
+  /** Toggles expandable */
+  isExpandable?: boolean;
+  /** Toggles sticky columns and header */
+  isSticky?: boolean;
 }
 
 export const DataViewTableBasic: FC<DataViewTableBasicProps> = ({
   columns,
   rows,
+  expandedRows,
   ouiaId = 'DataViewTableBasic',
   headStates,
   bodyStates,
+  hasResizableColumns,
+  isExpandable = false,
+  isSticky = false,
   ...props
 }: DataViewTableBasicProps) => {
   const { selection, activeState, isSelectable } = useInternalContext();
@@ -39,10 +60,30 @@ export const DataViewTableBasic: FC<DataViewTableBasicProps> = ({
   const activeHeadState = useMemo(() => activeState ? headStates?.[activeState] : undefined, [ activeState, headStates ]);
   const activeBodyState = useMemo(() => activeState ? bodyStates?.[activeState] : undefined, [ activeState, bodyStates ]);
 
+  const [expandedRowsState, setExpandedRowsState] = useState<Record<number, boolean>>({})
+  const [expandedColumnIndex, setExpandedColumnIndex] = useState<Record<number, number>>({})
+
+  const tableRef = useRef<HTMLTableElement>(null);
+
+  const needsSeparateTbody = isExpandable;
+
   const renderedRows = useMemo(() => rows.map((row, rowIndex) => {
     const rowIsObject = isDataViewTrObject(row);
-    return (
-      <Tr key={rowIndex} ouiaId={`${ouiaId}-tr-${rowIndex}`} {...(rowIsObject && row?.props)}>
+    const isRowExpanded = expandedRowsState[rowIndex] || false;
+    const expandedColIndex = expandedColumnIndex[rowIndex];
+
+    // Get the first cell to extract the row ID
+    const rowData = rowIsObject ? row.row : row;
+    const firstCell = rowData[0];
+    const rowId = isDataViewTdObject(firstCell) ? (firstCell as { id?: number }).id : undefined;
+
+    // Find all expandable contents for this row
+    const rowExpandableContents = isExpandable ? expandedRows?.filter(
+      (content) => content.rowId === rowId
+    ) : [];
+
+    const rowContent = (
+      <Tr key={needsSeparateTbody ? undefined : rowIndex} ouiaId={`${ouiaId}-tr-${rowIndex}`} {...(rowIsObject && row?.props)} isContentExpanded={isRowExpanded} isControlRow>
         {isSelectable && (
           <Td
             key={`select-${rowIndex}`}
@@ -58,10 +99,29 @@ export const DataViewTableBasic: FC<DataViewTableBasicProps> = ({
         )}
         {(rowIsObject ? row.row : row).map((cell, colIndex) => {
           const cellIsObject = isDataViewTdObject(cell);
+          const cellExpandableContent = isExpandable ? expandedRows?.find(
+            (content) => content.rowId === rowId && content.columnId === colIndex
+          ) : undefined;
           return (
             <Td
               key={colIndex}
               {...(cellIsObject && (cell?.props ?? {}))}
+              {...(cellExpandableContent != null && {
+                compoundExpand: {
+                  isExpanded: isRowExpanded && expandedColIndex === colIndex,
+                  expandId: `expandable-${rowIndex}`,
+                  onToggle: () => {
+                    setExpandedRowsState(prev => {
+                      const isSameColumn = expandedColIndex === colIndex;
+                      const wasExpanded = prev[rowIndex];
+                      return { ...prev, [rowIndex]: isSameColumn ? !wasExpanded : true };
+                    });
+                    setExpandedColumnIndex(prev => ({ ...prev, [rowIndex]: colIndex }));
+                  },
+                  rowIndex,
+                  columnIndex: colIndex
+                }
+              })}
               data-ouia-component-id={`${ouiaId}-td-${rowIndex}-${colIndex}`}
             >
               {cellIsObject ? cell.cell : cell}
@@ -70,14 +130,48 @@ export const DataViewTableBasic: FC<DataViewTableBasicProps> = ({
         })}
       </Tr>
     );
-  }), [ rows, isSelectable, isSelected, isSelectDisabled, onSelect, ouiaId ]);
 
-  return (
-    <Table aria-label="Data table" ouiaId={ouiaId} {...props}>
-      { activeHeadState || <DataViewTableHead columns={columns} ouiaId={ouiaId} /> }
-      { activeBodyState || <Tbody>{renderedRows}</Tbody> }
-    </Table>
-  );
+    if (needsSeparateTbody) {
+      return (
+        <Tbody key={rowIndex} isExpanded={isRowExpanded}>
+          {rowContent}
+          {rowExpandableContents?.map((expandableContent) => (
+            <Tr key={`expand-${rowIndex}-${expandableContent.columnId}`} isExpanded={isRowExpanded && expandedColIndex === expandableContent.columnId}>
+              <Td colSpan={rowData.length + (isSelectable ? 1 : 0)} data-expanded-column-index={expandableContent.columnId}>
+                <ExpandableRowContent>
+                  {expandableContent.content}
+                </ExpandableRowContent>
+              </Td>
+            </Tr>
+          ))}
+        </Tbody>
+      );
+    } else {
+      return rowContent;
+    }
+  }), [ rows, isSelectable, isSelected, isSelectDisabled, onSelect, ouiaId, expandedRowsState, expandedColumnIndex, expandedRows, isExpandable, needsSeparateTbody ]);
+
+  const bodyContent = activeBodyState || (needsSeparateTbody ? renderedRows : <Tbody>{renderedRows}</Tbody>);
+
+  if (isSticky) {
+    return (
+      <OuterScrollContainer>
+        <InnerScrollContainer>
+          <Table ref={tableRef} aria-label="Data table" ouiaId={ouiaId} isExpandable={isExpandable} hasAnimations {...props} isStickyHeader >
+            { activeHeadState || <DataViewTableHead columns={columns} ouiaId={ouiaId} hasResizableColumns={hasResizableColumns} /> }
+            { bodyContent }
+          </Table>
+        </InnerScrollContainer>
+      </OuterScrollContainer>
+    );
+  } else {
+    return (
+      <Table ref={tableRef} aria-label="Data table" ouiaId={ouiaId} isExpandable={isExpandable} hasAnimations {...props}>
+        { activeHeadState || <DataViewTableHead columns={columns} ouiaId={ouiaId} hasResizableColumns={hasResizableColumns} /> }
+        { bodyContent }
+      </Table>
+    );
+  }
 };
 
 export default DataViewTableBasic;

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

@@ -4,7 +4,7 @@ exports[`DataViewTable component should render correctly 1`] = `
 <div>
   <table
     aria-label="Repositories table"
-    class="pf-v6-c-table pf-m-grid-md"
+    class="pf-v6-c-table pf-m-grid-md pf-m-animate-expand"
     data-ouia-component-id="TableExample"
     data-ouia-component-type="PF6/Table"
     data-ouia-safe="true"
@@ -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"
@@ -67,7 +67,7 @@ exports[`DataViewTable component should render correctly 1`] = `
       role="rowgroup"
     >
       <tr
-        class="pf-v6-c-table__tr"
+        class="pf-v6-c-table__tr pf-v6-c-table__control-row"
         data-ouia-component-id="TableExample-tr-0"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
@@ -109,7 +109,7 @@ exports[`DataViewTable component should render correctly 1`] = `
         </td>
       </tr>
       <tr
-        class="pf-v6-c-table__tr"
+        class="pf-v6-c-table__tr pf-v6-c-table__control-row"
         data-ouia-component-id="TableExample-tr-1"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
@@ -151,7 +151,7 @@ exports[`DataViewTable component should render correctly 1`] = `
         </td>
       </tr>
       <tr
-        class="pf-v6-c-table__tr"
+        class="pf-v6-c-table__tr pf-v6-c-table__control-row"
         data-ouia-component-id="TableExample-tr-2"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
@@ -193,7 +193,7 @@ exports[`DataViewTable component should render correctly 1`] = `
         </td>
       </tr>
       <tr
-        class="pf-v6-c-table__tr"
+        class="pf-v6-c-table__tr pf-v6-c-table__control-row"
         data-ouia-component-id="TableExample-tr-3"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
@@ -235,7 +235,7 @@ exports[`DataViewTable component should render correctly 1`] = `
         </td>
       </tr>
       <tr
-        class="pf-v6-c-table__tr"
+        class="pf-v6-c-table__tr pf-v6-c-table__control-row"
         data-ouia-component-id="TableExample-tr-4"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
@@ -277,7 +277,7 @@ exports[`DataViewTable component should render correctly 1`] = `
         </td>
       </tr>
       <tr
-        class="pf-v6-c-table__tr"
+        class="pf-v6-c-table__tr pf-v6-c-table__control-row"
         data-ouia-component-id="TableExample-tr-5"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
@@ -335,7 +335,7 @@ exports[`DataViewTable component should render with a loading state 1`] = `
     >
       <table
         aria-label="Repositories table"
-        class="pf-v6-c-table pf-m-grid-md"
+        class="pf-v6-c-table pf-m-grid-md pf-m-animate-expand"
         data-ouia-component-id="TableExample"
         data-ouia-component-type="PF6/Table"
         data-ouia-safe="true"
@@ -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"
@@ -412,7 +412,7 @@ exports[`DataViewTable component should render with an empty state 1`] = `
     >
       <table
         aria-label="Repositories table"
-        class="pf-v6-c-table pf-m-grid-md"
+        class="pf-v6-c-table pf-m-grid-md pf-m-animate-expand"
         data-ouia-component-id="TableExample"
         data-ouia-component-type="PF6/Table"
         data-ouia-safe="true"
@@ -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"
@@ -489,7 +489,7 @@ exports[`DataViewTable component should render with an error state 1`] = `
     >
       <table
         aria-label="Repositories table"
-        class="pf-v6-c-table pf-m-grid-md"
+        class="pf-v6-c-table pf-m-grid-md pf-m-animate-expand"
         data-ouia-component-id="TableExample"
         data-ouia-component-type="PF6/Table"
         data-ouia-safe="true"
@@ -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>
   );
 };