@patternfly/react-data-view 6.4.0-prerelease.8 → 6.4.0-prerelease.9

package/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableInteractiveExample.tsx

@@ -0,0 +1,148 @@
+import { FunctionComponent, useState } from 'react';
+import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { ExpandableContent } from '@patternfly/react-data-view/dist/dynamic/DataViewTableBasic';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
+import { Button, Toolbar, ToolbarContent, ToolbarItem, Switch } from '@patternfly/react-core';
+
+interface Repository {
+  id: number;
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+  contributors: string;
+  stars: string;
+  forks: string;
+}
+
+const expandableContents: ExpandableContent[] = [
+  // Row 1 - Repository one
+  { rowId: 1, columnId: 2, content: <div><strong>Branch Details:</strong> 5 active branches, main, develop, feature/new-ui, hotfix/bug-123, release/v2.0</div> },
+  { rowId: 1, columnId: 3, content: <div><strong>PR Details:</strong> 3 open PRs, 45 merged this month, avg review time: 2 days</div> },
+  { rowId: 1, columnId: 5, content: <div><strong>Commit Info:</strong> Author: John Doe, Message: "Fix critical authentication bug", SHA: a1b2c3d</div> },
+
+  // Row 2 - Repository two
+  { rowId: 2, columnId: 2, content: <div><strong>Branch Details:</strong> 8 active branches, main, staging, feature/api-v2, feature/dashboard</div> },
+  { rowId: 2, columnId: 3, content: <div><strong>PR Details:</strong> 5 open PRs, 120 merged this month, avg review time: 1.5 days</div> },
+  { rowId: 2, columnId: 4, content: <div><strong>Workspace Info:</strong> Development env, 3 active deployments, last updated 30 mins ago</div> },
+  { rowId: 2, columnId: 5, content: <div><strong>Commit Info:</strong> Author: Jane Smith, Message: "Add new API endpoints", SHA: x9y8z7w</div> },
+
+  // Row 3 - Repository three
+  { rowId: 3, columnId: 2, content: <div><strong>Branch Details:</strong> 12 active branches including main, develop, multiple feature branches</div> },
+  { rowId: 3, columnId: 3, content: <div><strong>PR Details:</strong> 8 open PRs, 200 merged this month, avg review time: 3 days</div> },
+  { rowId: 3, columnId: 4, content: <div><strong>Workspace Info:</strong> Staging env, 10 active deployments, last updated 1 day ago</div> },
+  { rowId: 3, columnId: 5, content: <div><strong>Commit Info:</strong> Author: Bob Johnson, Message: "Refactor core modules", SHA: p0o9i8u</div> },
+
+  // Row 4 - Repository four
+  { rowId: 4, columnId: 2, content: <div><strong>Branch Details:</strong> 6 active branches, focusing on microservices architecture</div> },
+  { rowId: 4, columnId: 3, content: <div><strong>PR Details:</strong> 2 open PRs, 90 merged this month, avg review time: 2.5 days</div> },
+  { rowId: 4, columnId: 4, content: <div><strong>Workspace Info:</strong> QA env, 7 active deployments, automated testing enabled</div> },
+  { rowId: 4, columnId: 5, content: <div><strong>Commit Info:</strong> Author: Alice Williams, Message: "Update dependencies", SHA: m5n4b3v</div> },
+
+  // Row 5 - Repository five
+  { rowId: 5, columnId: 2, content: <div><strong>Branch Details:</strong> 4 active branches, clean branch strategy</div> },
+  { rowId: 5, columnId: 3, content: <div><strong>PR Details:</strong> 6 open PRs, 75 merged this month, avg review time: 1 day</div> },
+  { rowId: 5, columnId: 4, content: <div><strong>Workspace Info:</strong> Pre-production env, CI/CD pipeline configured</div> },
+  { rowId: 5, columnId: 5, content: <div><strong>Commit Info:</strong> Author: Charlie Brown, Message: "Implement dark mode", SHA: q2w3e4r</div> },
+
+  // Row 6 - Repository six
+  { rowId: 6, columnId: 2, content: <div><strong>Branch Details:</strong> 15 active branches, complex branching model</div> },
+  { rowId: 6, columnId: 3, content: <div><strong>PR Details:</strong> 10 open PRs, 250 merged this month, avg review time: 4 days</div> },
+  { rowId: 6, columnId: 4, content: <div><strong>Workspace Info:</strong> Multi-region deployment, high availability setup</div> },
+  { rowId: 6, columnId: 5, content: <div><strong>Commit Info:</strong> Author: David Lee, Message: "Security patches applied", SHA: t6y7u8i</div> },
+];
+
+const repositories: Repository[] = [
+  { id: 1, name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one', contributors: '25 contributors', stars: '1.2k stars', forks: '340 forks' },
+  { id: 2, name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two', contributors: '45 contributors', stars: '3.5k stars', forks: '890 forks' },
+  { id: 3, name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three', contributors: '200 contributors', stars: '15k stars', forks: '2.1k forks' },
+  { id: 4, name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four', contributors: '80 contributors', stars: '5.7k stars', forks: '1.2k forks' },
+  { id: 5, name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five', contributors: '60 contributors', stars: '4.3k stars', forks: '780 forks' },
+  { id: 6, name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six', contributors: '300 contributors', stars: '22k stars', forks: '4.5k forks' },
+  { id: 7, name: 'Repository seven', branches: 'Branch seven', prs: 'Pull request seven', workspaces: 'Workspace seven', lastCommit: 'Timestamp seven', contributors: '12 contributors', stars: '567 stars', forks: '120 forks' },
+  { id: 8, name: 'Repository eight', branches: 'Branch eight', prs: 'Pull request eight', workspaces: 'Workspace eight', lastCommit: 'Timestamp eight', contributors: '98 contributors', stars: '7.8k stars', forks: '1.5k forks' },
+  { id: 9, name: 'Repository nine', branches: 'Branch nine', prs: 'Pull request nine', workspaces: 'Workspace nine', lastCommit: 'Timestamp nine', contributors: '33 contributors', stars: '2.1k stars', forks: '456 forks' },
+  { id: 10, name: 'Repository ten', branches: 'Branch ten', prs: 'Pull request ten', workspaces: 'Workspace ten', lastCommit: 'Timestamp ten', contributors: '150 contributors', stars: '11k stars', forks: '2.8k forks' },
+  { id: 11, name: 'Repository eleven', branches: 'Branch eleven', prs: 'Pull request eleven', workspaces: 'Workspace eleven', lastCommit: 'Timestamp eleven', contributors: '67 contributors', stars: '5.2k stars', forks: '980 forks' },
+  { id: 12, name: 'Repository twelve', branches: 'Branch twelve', prs: 'Pull request twelve', workspaces: 'Workspace twelve', lastCommit: 'Timestamp twelve', contributors: '41 contributors', stars: '3.1k stars', forks: '670 forks' },
+  { id: 13, name: 'Repository thirteen', branches: 'Branch thirteen', prs: 'Pull request thirteen', workspaces: 'Workspace thirteen', lastCommit: 'Timestamp thirteen', contributors: '89 contributors', stars: '6.4k stars', forks: '1.3k forks' },
+  { id: 14, name: 'Repository fourteen', branches: 'Branch fourteen', prs: 'Pull request fourteen', workspaces: 'Workspace fourteen', lastCommit: 'Timestamp fourteen', contributors: '120 contributors', stars: '9.2k stars', forks: '1.9k forks' },
+  { id: 15, name: 'Repository fifteen', branches: 'Branch fifteen', prs: 'Pull request fifteen', workspaces: 'Workspace fifteen', lastCommit: 'Timestamp fifteen', contributors: '78 contributors', stars: '5.9k stars', forks: '1.1k forks' }
+];
+
+const ouiaId = 'TableInteractiveExample';
+
+export const InteractiveExample: FunctionComponent = () => {
+  const [isExpandable, setIsExpandable] = useState(true);
+  const [isSticky, setIsSticky] = useState(true);
+
+  // Generate rows based on current settings
+  const rows: DataViewTr[] = repositories.map(({ id, name, branches, prs, workspaces, lastCommit, contributors, stars, forks }) => [
+    {
+      id,
+      cell: workspaces,
+      props: {
+        favorites: { isFavorited: true }
+      }
+    },
+    { cell: <Button href='#' variant='link' isInline>{name}</Button>, props: { isStickyColumn: isSticky, hasRightBorder: true, hasLeftBorder: true, modifier: "nowrap" } },
+    { cell: branches, props: { modifier: "nowrap" } },
+    { cell: prs, props: { modifier: "nowrap" } },
+    { cell: workspaces, props: { modifier: "nowrap" } },
+    { cell: lastCommit, props: { modifier: "nowrap" } },
+    { cell: contributors, props: { modifier: "nowrap" } },
+    { cell: stars, props: { modifier: "nowrap" } },
+    { cell: forks, props: { modifier: "nowrap" } }
+  ]);
+
+  const columns: DataViewTh[] = [
+    null,
+    { cell: 'Repositories', props: { isStickyColumn: isSticky, modifier: 'fitContent', hasRightBorder: true, hasLeftBorder: true } },
+    { cell: <>Branches<ExclamationCircleIcon className='pf-v6-u-ml-sm' color="var(--pf-t--global--color--status--danger--default)"/></>, props: { width: 20 } },
+    { cell: 'Pull requests', props: { width: 20 } },
+    { cell: 'Workspaces', props: { info: { tooltip: 'More information' }, width: 20 } },
+    { cell: 'Last commit', props: { sort: { sortBy: {}, columnIndex: 4 }, width: 20 } },
+    { cell: 'Contributors', props: { width: 20 } },
+    { cell: 'Stars', props: { width: 20 } },
+    { cell: 'Forks', props: { width: 20 } },
+  ];
+
+  return (
+    <>
+      <Toolbar>
+        <ToolbarContent>
+          <ToolbarItem>
+            <Switch
+              id="expandable-switch"
+              label="Expandable"
+              isChecked={isExpandable}
+              onChange={(_event, checked) => setIsExpandable(checked)}
+              aria-label="Toggle expandable rows"
+            />
+          </ToolbarItem>
+          <ToolbarItem>
+            <Switch
+              id="sticky-switch"
+              label="Sticky header & column"
+              isChecked={isSticky}
+              onChange={(_event, checked) => setIsSticky(checked)}
+              aria-label="Toggle sticky header and columns"
+            />
+          </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+      <div style={{ height: '400px', overflow: 'auto' }}>
+        <DataViewTable
+          aria-label='Interactive repositories table'
+          ouiaId={ouiaId}
+          columns={columns}
+          rows={rows}
+          expandedRows={isExpandable ? expandableContents : undefined}
+          isExpandable={isExpandable}
+          isSticky={isSticky}
+        />
+      </div>
+    </>
+  );
+};

package/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableStickyExample.tsx

@@ -0,0 +1,90 @@
+import { FunctionComponent } from 'react';
+import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
+import { Button } from '@patternfly/react-core';
+import { ActionsColumn } from '@patternfly/react-table';
+
+interface Repository {
+  id: number;
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+  contributors: string;
+  stars: string;
+  forks: string;
+}
+
+const repositories: Repository[] = [
+  { id: 1, name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one', contributors: '25 contributors', stars: '1.2k stars', forks: '340 forks' },
+  { id: 2, name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two', contributors: '45 contributors', stars: '3.5k stars', forks: '890 forks' },
+  { id: 3, name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three', contributors: '200 contributors', stars: '15k stars', forks: '2.1k forks' },
+  { id: 4, name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four', contributors: '80 contributors', stars: '5.7k stars', forks: '1.2k forks' },
+  { id: 5, name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five', contributors: '60 contributors', stars: '4.3k stars', forks: '780 forks' },
+  { id: 6, name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six', contributors: '300 contributors', stars: '22k stars', forks: '4.5k forks' },
+  { id: 7, name: 'Repository seven', branches: 'Branch seven', prs: 'Pull request seven', workspaces: 'Workspace seven', lastCommit: 'Timestamp seven', contributors: '12 contributors', stars: '567 stars', forks: '120 forks' },
+  { id: 8, name: 'Repository eight', branches: 'Branch eight', prs: 'Pull request eight', workspaces: 'Workspace eight', lastCommit: 'Timestamp eight', contributors: '98 contributors', stars: '7.8k stars', forks: '1.5k forks' },
+  { id: 9, name: 'Repository nine', branches: 'Branch nine', prs: 'Pull request nine', workspaces: 'Workspace nine', lastCommit: 'Timestamp nine', contributors: '33 contributors', stars: '2.1k stars', forks: '456 forks' },
+  { id: 10, name: 'Repository ten', branches: 'Branch ten', prs: 'Pull request ten', workspaces: 'Workspace ten', lastCommit: 'Timestamp ten', contributors: '150 contributors', stars: '11k stars', forks: '2.8k forks' },
+  { id: 11, name: 'Repository eleven', branches: 'Branch eleven', prs: 'Pull request eleven', workspaces: 'Workspace eleven', lastCommit: 'Timestamp eleven', contributors: '67 contributors', stars: '5.2k stars', forks: '980 forks' },
+  { id: 12, name: 'Repository twelve', branches: 'Branch twelve', prs: 'Pull request twelve', workspaces: 'Workspace twelve', lastCommit: 'Timestamp twelve', contributors: '41 contributors', stars: '3.1k stars', forks: '670 forks' }
+];
+
+const rowActions = [
+  {
+    title: 'Some action',
+    onClick: () => console.log('clicked on Some action')  // eslint-disable-line no-console
+  },
+  {
+    title: <div>Another action</div>,
+    onClick: () => console.log('clicked on Another action')  // eslint-disable-line no-console
+  },
+  {
+    isSeparator: true
+  },
+  {
+    title: 'Third action',
+    onClick: () => console.log('clicked on Third action')  // eslint-disable-line no-console
+  }
+];
+
+const rows: DataViewTr[] = repositories.map(({ id, name, branches, prs, workspaces, lastCommit, contributors, stars, forks }) => [
+  { id, cell: workspaces, props: { favorites: { isFavorited: true } } },
+  { cell: <Button href='#' variant='link' isInline>{name}</Button>, props: { isStickyColumn: true, hasRightBorder: true, hasLeftBorder: true, modifier: "nowrap" } },
+  { cell: branches, props: { modifier: "nowrap" } },
+  { cell: prs, props: { modifier: "nowrap" } },
+  { cell: workspaces, props: { modifier: "nowrap" } },
+  { cell: lastCommit, props: { modifier: "nowrap" } },
+  { cell: contributors, props: { modifier: "nowrap" } },
+  { cell: stars, props: { modifier: "nowrap" } },
+  { cell: forks, props: { modifier: "nowrap" } },
+  { cell: <ActionsColumn items={rowActions}/>, props: { isActionCell: true } },
+]);
+
+const columns: DataViewTh[] = [
+  null,
+  { cell: 'Repositories', props: { isStickyColumn: true, modifier: 'fitContent', hasRightBorder: true, hasLeftBorder: true } },
+  { cell: <>Branches<ExclamationCircleIcon className='pf-v6-u-ml-sm' color="var(--pf-t--global--color--status--danger--default)"/></>, props: { width: 20 } },
+  { cell: 'Pull requests', props: { width: 20 } },
+  { cell: 'Workspaces', props: { info: { tooltip: 'More information' }, width: 20 } },
+  { cell: 'Last commit', props: { sort: { sortBy: {}, columnIndex: 4 }, width: 20 } },
+  { cell: 'Contributors', props: { width: 20 } },
+  { cell: 'Stars', props: { width: 20 } },
+  { cell: 'Forks', props: { width: 20 } },
+  null, // Actions column header
+];
+
+const ouiaId = 'TableStickyExample';
+
+export const StickyExample: FunctionComponent = () => (
+  <div style={{ height: '400px', width: '800px', overflow: 'auto' }}>
+    <DataViewTable
+      aria-label='Sticky repositories table'
+      ouiaId={ouiaId}
+      columns={columns}
+      rows={rows}
+      isSticky
+    />
+  </div>
+);

package/patternfly-docs/content/extensions/data-view/examples/Table/Table.md

@@ -58,6 +58,67 @@ If you want to have all expandable nodes open on initial load pass the `expandAl
 
 ```
 
+## Expandable rows
+
+To add expandable content to table cells, pass an array of `ExpandableContent` objects to the `expandedRows` prop of the `<DataViewTable>` component. Each expandable content object defines which cell can be expanded and what content to display when expanded.
+
+The `ExpandableContent` interface is defined as:
+
+```typescript
+interface ExpandableContent {
+  /** The ID of the row containing the expandable cell (must match the id property in the row data) */
+  rowId: number;
+  /** The column index (0-based) that should be expandable */
+  columnId: number;
+  /** The content to display when the cell is expanded */
+  content: ReactNode;
+}
+```
+
+When a cell has expandable content:
+- A compound expand toggle button appears in the cell
+- Clicking the toggle expands the row to show the additional content below
+- Only one expanded cell is shown per row at a time
+- Clicking another expandable cell in the same row switches the expanded content
+
+### Expandable rows example
+
+```js file="./DataViewTableExpandableExample.tsx"
+
+```
+
+## Sticky header and columns
+
+To enable sticky headers and columns, set the `isSticky` prop to `true` on the `<DataViewTable>` component. This keeps the table header and designated columns visible when scrolling.
+
+To make specific columns sticky, add the `isStickyColumn` property to the column's `props` in the column definition:
+
+```typescript
+const columns: DataViewTh[] = [
+  { cell: 'Column Name', props: { isStickyColumn: true } }
+];
+```
+
+When sticky headers and columns are enabled:
+- The table header remains visible when scrolling vertically
+- Columns marked with `isStickyColumn: true` remain visible when scrolling horizontally
+- The table is wrapped in `OuterScrollContainer` and `InnerScrollContainer` components to enable sticky behavior
+- Sticky columns can have additional styling like borders using `hasRightBorder` or `hasLeftBorder` props
+
+### Sticky header and columns example
+
+```js file="./DataViewTableStickyExample.tsx"
+
+```
+
+### Interactive example
+- Interactive example show how the different composable options work together.
+- By toggling the toggles you can switch between them and observe the behaviour
+
+```js file="./DataViewTableInteractiveExample.tsx"
+
+```
+
 ### Resizable columns
 
 To allow a column to resize, add `isResizable` to the `DataViewTable` element, and pass `resizableProps` to each applicable header cell. The `resizableProps` object consists of the following fields:

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;