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

package/patternfly-docs/content/extensions/data-view/examples/Toolbar/TreeFilterExample.tsx

@@ -0,0 +1,248 @@
+import React, { useMemo } from 'react';
+import { Pagination } from '@patternfly/react-core';
+import { BrowserRouter, useSearchParams } from 'react-router-dom';
+import { TreeViewDataItem } from '@patternfly/react-core';
+import { useDataViewFilters, useDataViewPagination } from '@patternfly/react-data-view/dist/dynamic/Hooks';
+import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
+import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+import { DataViewFilters } from '@patternfly/react-data-view/dist/dynamic/DataViewFilters';
+import { DataViewTreeFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewTreeFilter';
+
+const perPageOptions = [
+  { title: '5', value: 5 },
+  { title: '10', value: 10 }
+];
+
+interface Repository {
+  name: string;
+  workspace: string;
+  tags: string[];
+  os: string;
+  lastSeen: string;
+}
+
+interface RepositoryFilters {
+  name: string;
+  workspace: string[];
+  os: string[];
+  tags: string[];
+}
+
+const repositories: Repository[] = [
+  { name: 'Server-001', workspace: 'Development Workspace', tags: ['web', 'frontend'], os: 'Ubuntu 22.04', lastSeen: '2 hours ago' },
+  { name: 'Server-002', workspace: 'Development Workspace', tags: ['api', 'backend'], os: 'RHEL 9', lastSeen: '5 hours ago' },
+  { name: 'Server-003', workspace: 'Development Workspace', tags: ['database'], os: 'Windows Server 2022', lastSeen: '1 day ago' },
+  { name: 'Server-004', workspace: 'Production Workspace', tags: ['web', 'frontend'], os: 'Ubuntu 22.04', lastSeen: '30 minutes ago' },
+  { name: 'Server-005', workspace: 'Production Workspace', tags: ['api', 'backend'], os: 'Debian 12', lastSeen: '1 hour ago' },
+  { name: 'Server-006', workspace: 'Production Workspace', tags: ['monitoring'], os: 'macOS Ventura', lastSeen: '3 hours ago' },
+  { name: 'Server-007', workspace: 'Production Workspace', tags: ['cache'], os: 'macOS Sonoma', lastSeen: '2 days ago' },
+  { name: 'Server-008', workspace: 'Testing Workspace', tags: ['test', 'frontend'], os: 'CentOS 8', lastSeen: '6 hours ago' },
+  { name: 'Server-009', workspace: 'Testing Workspace', tags: ['test', 'backend'], os: 'Fedora 38', lastSeen: '4 hours ago' }
+];
+
+
+const osOptions: TreeViewDataItem[] = [
+  {
+    name: 'Linux',
+    id: 'os-linux',
+    checkProps: { 'aria-label': 'linux-check', checked: false },
+    children: [
+      {
+        name: 'Ubuntu 22.04',
+        id: 'os-ubuntu',
+        checkProps: { checked: false }
+      },
+      {
+        name: 'RHEL 9',
+        id: 'os-rhel',
+        checkProps: { checked: false }
+      },
+      {
+        name: 'Debian 12',
+        id: 'os-debian',
+        checkProps: { checked: false }
+      },
+      {
+        name: 'CentOS 8',
+        id: 'os-centos',
+        checkProps: { checked: false }
+      },
+      {
+        name: 'Fedora 38',
+        id: 'os-fedora',
+        checkProps: { checked: false }
+      }
+    ],
+    defaultExpanded: true
+  },
+  {
+    name: 'Windows',
+    id: 'os-windows',
+    checkProps: { 'aria-label': 'windows-check', checked: false },
+    children: [
+      {
+        name: 'Windows Server 2022',
+        id: 'os-windows-2022',
+        checkProps: { checked: false }
+      }
+    ]
+  },
+  {
+    name: 'macOS',
+    id: 'os-macos',
+    checkProps: { 'aria-label': 'macos-check', checked: false },
+    children: [
+      {
+        name: 'macOS Ventura',
+        id: 'os-macos-ventura',
+        checkProps: { checked: false }
+      },
+      {
+        name: 'macOS Sonoma',
+        id: 'os-macos-sonoma',
+        checkProps: { checked: false }
+      }
+    ]
+  }
+];
+
+const tagOptions: TreeViewDataItem[] = [
+  {
+    name: 'Environment',
+    id: 'tags-env',
+    checkProps: { 'aria-label': 'env-check', checked: false },
+    children: [
+      {
+        name: 'web',
+        id: 'tag-web',
+        checkProps: { checked: false }
+      },
+      {
+        name: 'api',
+        id: 'tag-api',
+        checkProps: { checked: false }
+      },
+      {
+        name: 'database',
+        id: 'tag-database',
+        checkProps: { checked: false }
+      }
+    ],
+    defaultExpanded: true
+  },
+  {
+    name: 'Layer',
+    id: 'tags-layer',
+    checkProps: { 'aria-label': 'layer-check', checked: false },
+    children: [
+      {
+        name: 'frontend',
+        id: 'tag-frontend',
+        checkProps: { checked: false }
+      },
+      {
+        name: 'backend',
+        id: 'tag-backend',
+        checkProps: { checked: false }
+      }
+    ]
+  },
+  {
+    name: 'Other',
+    id: 'tags-other',
+    checkProps: { 'aria-label': 'other-check', checked: false },
+    children: [
+      {
+        name: 'monitoring',
+        id: 'tag-monitoring',
+        checkProps: { checked: false }
+      },
+      {
+        name: 'cache',
+        id: 'tag-cache',
+        checkProps: { checked: false }
+      },
+      {
+        name: 'test',
+        id: 'tag-test',
+        checkProps: { checked: false }
+      }
+    ]
+  }
+];
+
+const columns = ['Name', 'Workspace', 'Tags', 'OS', 'Last seen'];
+
+const ouiaId = 'TreeFilterExample';
+
+const MyTable: React.FunctionComponent = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { filters, onSetFilters, clearAllFilters } = useDataViewFilters<RepositoryFilters>({
+    initialFilters: { name: '', workspace: [], os: [], tags: [] },
+    searchParams,
+    setSearchParams,
+  });
+  const pagination = useDataViewPagination({ perPage: 5 });
+  const { page, perPage } = pagination;
+
+  const filteredData = useMemo(
+    () =>
+      repositories.filter(
+        (item) =>
+          (!filters.name || item.name?.toLocaleLowerCase().includes(filters.name?.toLocaleLowerCase())) &&
+          (!filters.workspace || filters.workspace.length === 0 || filters.workspace.includes(item.workspace)) &&
+          (!filters.os || filters.os.length === 0 || filters.os.includes(item.os)) &&
+          (!filters.tags || filters.tags.length === 0 || filters.tags.some(tag => item.tags.includes(tag)))
+      ),
+    [filters]
+  );
+
+  const pageRows = useMemo(
+    () =>
+      filteredData
+        .slice((page - 1) * perPage, (page - 1) * perPage + perPage)
+        .map((item) => [item.name, item.workspace, item.tags.join(', '), item.os, item.lastSeen]),
+    [page, perPage, filteredData]
+  );
+
+  return (
+    <DataView>
+      <DataViewToolbar
+        ouiaId="TreeFilterExampleHeader"
+        clearAllFilters={clearAllFilters}
+        pagination={<Pagination perPageOptions={perPageOptions} itemCount={filteredData.length} {...pagination} />}
+        filters={
+          <DataViewFilters onChange={(_e, values) => onSetFilters(values)} values={filters}>
+            <DataViewTreeFilter
+              filterId="os"
+              title="Operating System"
+              items={osOptions}
+              defaultExpanded={false}
+            />
+            <DataViewTreeFilter
+              filterId="tags"
+              title="Tags"
+              items={tagOptions}
+              defaultExpanded={false}
+              defaultSelected={['tag-web', 'tag-api']}
+            />
+          </DataViewFilters>
+        }
+      />
+      <DataViewTable aria-label="Repositories table" ouiaId={ouiaId} columns={columns} rows={pageRows} />
+      <DataViewToolbar
+        ouiaId="TreeFilterExampleFooter"
+        pagination={
+          <Pagination isCompact variant="bottom" perPageOptions={perPageOptions} itemCount={filteredData.length} {...pagination} />
+        }
+      />
+    </DataView>
+  );
+};
+
+export const TreeFilterExample: React.FunctionComponent = () => (
+  <BrowserRouter>
+    <MyTable />
+  </BrowserRouter>
+);

package/patternfly-docs/patternfly-docs.config.js

@@ -2,5 +2,8 @@
 module.exports = {
   sideNavItems: [ { section: 'extensions' } ],
   topNavItems: [],
-  port: 8006
+  port: 8006,
+  hasThemeSwitcher: true,
+  hasHighContrastSwitcher: true,
+  hasRTLSwitcher: true,
 };

package/src/DataViewCheckboxFilter/DataViewCheckboxFilter.test.tsx

@@ -1,23 +1,32 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import DataViewCheckboxFilter, { DataViewCheckboxFilterProps } from './DataViewCheckboxFilter';
 import DataViewToolbar from '../DataViewToolbar';
+import '@testing-library/jest-dom';
 
 describe('DataViewCheckboxFilter component', () => {
   const defaultProps: DataViewCheckboxFilterProps = {
     filterId: 'test-checkbox-filter',
     title: 'Test Checkbox Filter',
-    value: [ 'workspace-one' ],
+    value: ['workspace-one'],
     options: [
       { label: 'Workspace one', value: 'workspace-one' },
       { label: 'Workspace two', value: 'workspace-two' },
-      { label: 'Workspace three', value: 'workspace-three' },
-    ],
+      { label: 'Workspace three', value: 'workspace-three' }
+    ]
   };
 
   it('should render correctly', () => {
-    const { container } = render(
-      <DataViewToolbar filters={<DataViewCheckboxFilter {...defaultProps} />} />
-    );
+    const { container } = render(<DataViewToolbar filters={<DataViewCheckboxFilter {...defaultProps} />} />);
     expect(container).toMatchSnapshot();
   });
+
+  it('should use chipTitle for the filter chip category when provided', () => {
+    render(
+      <DataViewToolbar
+        filters={<DataViewCheckboxFilter {...defaultProps} chipTitle="Short name" />}
+      />
+    );
+    expect(screen.getByText('Short name')).toBeInTheDocument();
+    expect(screen.getByText('Test Checkbox Filter')).toBeInTheDocument();
+  });
 });

package/src/DataViewCheckboxFilter/DataViewCheckboxFilter.tsx

@@ -32,6 +32,8 @@ export interface DataViewCheckboxFilterProps extends Omit<MenuProps, 'onSelect'
   value?: string[];
   /** Filter title displayed in the toolbar */
   title: string;
+  /** Label for the applied filter chip / category; defaults to title */
+  chipTitle?: string;
   /** Placeholder text of the menu */
   placeholder?: string;
   /** Filter options displayed */
@@ -51,6 +53,7 @@ export interface DataViewCheckboxFilterProps extends Omit<MenuProps, 'onSelect'
 export const DataViewCheckboxFilter: FC<DataViewCheckboxFilterProps> = ({
   filterId,
   title,
+  chipTitle,
   value = [],
   onChange,
   placeholder,
@@ -65,6 +68,7 @@ export const DataViewCheckboxFilter: FC<DataViewCheckboxFilterProps> = ({
   const toggleRef = useRef<HTMLButtonElement>(null);
   const menuRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
+  const categoryName = chipTitle ?? title;
 
   const normalizeOptions = useMemo(
     () =>
@@ -120,7 +124,7 @@ export const DataViewCheckboxFilter: FC<DataViewCheckboxFilterProps> = ({
       deleteLabel={(_, label) =>
         onChange?.(undefined, value.filter(item => item !== (isToolbarLabel(label) ? label.key : label)))
       }
-      categoryName={title}
+      categoryName={categoryName}
       showToolbarItem={showToolbarItem}
     >
       <Popper

package/src/DataViewTable/DataViewTable.tsx

@@ -1,9 +1,11 @@
 import { FC, ReactNode } from 'react';
 import { TdProps, ThProps, TrProps, InnerScrollContainer } from '@patternfly/react-table';
 import { DataViewTableTree, DataViewTableTreeProps } from '../DataViewTableTree';
-import { DataViewTableBasic, DataViewTableBasicProps } from '../DataViewTableBasic';
+import { DataViewTableBasic, DataViewTableBasicProps, ExpandableContent } from '../DataViewTableBasic';
 import { DataViewThResizableProps } from '../DataViewTh/DataViewTh';
 
+export type { ExpandableContent };
+
 // Table head typings
 export type DataViewTh =
   | ReactNode

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

@@ -4,7 +4,7 @@ exports[`DataViewTable component should render a basic table 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"
@@ -67,7 +67,7 @@ exports[`DataViewTable component should render a basic table 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 a basic table 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 a basic table 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 a basic table 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 a basic table 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 a basic table 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"

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,12 +14,20 @@ 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 */
@@ -25,15 +36,22 @@ export interface DataViewTableBasicProps extends Omit<TableProps, 'onSelect' | '
   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();
@@ -42,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}`}
@@ -61,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}
@@ -73,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} hasResizableColumns={hasResizableColumns} /> }
-      { 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;