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

package/dist/cjs/DataViewTable/DataViewTable.d.ts

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

package/dist/cjs/DataViewTableBasic/DataViewTableBasic.d.ts

@@ -2,12 +2,19 @@ import { FC } from 'react';
 import { TableProps } from '@patternfly/react-table';
 import { DataViewTh, DataViewTr } 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 */
@@ -16,6 +23,10 @@ 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 declare const DataViewTableBasic: FC<DataViewTableBasicProps>;
 export default DataViewTableBasic;

package/dist/cjs/DataViewTableBasic/DataViewTableBasic.js

@@ -19,14 +19,26 @@ const InternalContext_1 = require("../InternalContext");
 const DataViewTableHead_1 = require("../DataViewTableHead");
 const DataViewTable_1 = require("../DataViewTable");
 const DataViewTableBasic = (_a) => {
-    var { columns, rows, ouiaId = 'DataViewTableBasic', headStates, bodyStates, hasResizableColumns } = _a, props = __rest(_a, ["columns", "rows", "ouiaId", "headStates", "bodyStates", "hasResizableColumns"]);
+    var { columns, rows, expandedRows, ouiaId = 'DataViewTableBasic', headStates, bodyStates, hasResizableColumns, isExpandable = false, isSticky = false } = _a, props = __rest(_a, ["columns", "rows", "expandedRows", "ouiaId", "headStates", "bodyStates", "hasResizableColumns", "isExpandable", "isSticky"]);
     const { selection, activeState, isSelectable } = (0, InternalContext_1.useInternalContext)();
     const { onSelect, isSelected, isSelectDisabled } = selection !== null && selection !== void 0 ? selection : {};
     const activeHeadState = (0, react_1.useMemo)(() => activeState ? headStates === null || headStates === void 0 ? void 0 : headStates[activeState] : undefined, [activeState, headStates]);
     const activeBodyState = (0, react_1.useMemo)(() => activeState ? bodyStates === null || bodyStates === void 0 ? void 0 : bodyStates[activeState] : undefined, [activeState, bodyStates]);
+    const [expandedRowsState, setExpandedRowsState] = (0, react_1.useState)({});
+    const [expandedColumnIndex, setExpandedColumnIndex] = (0, react_1.useState)({});
+    const tableRef = (0, react_1.useRef)(null);
+    const needsSeparateTbody = isExpandable;
     const renderedRows = (0, react_1.useMemo)(() => rows.map((row, rowIndex) => {
         const rowIsObject = (0, DataViewTable_1.isDataViewTrObject)(row);
-        return ((0, jsx_runtime_1.jsxs)(react_table_1.Tr, Object.assign({ ouiaId: `${ouiaId}-tr-${rowIndex}` }, (rowIsObject && (row === null || row === void 0 ? void 0 : row.props)), { children: [isSelectable && ((0, jsx_runtime_1.jsx)(react_table_1.Td, { select: {
+        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 = (0, DataViewTable_1.isDataViewTdObject)(firstCell) ? firstCell.id : undefined;
+        // Find all expandable contents for this row
+        const rowExpandableContents = isExpandable ? expandedRows === null || expandedRows === void 0 ? void 0 : expandedRows.filter((content) => content.rowId === rowId) : [];
+        const rowContent = ((0, jsx_runtime_1.jsxs)(react_table_1.Tr, Object.assign({ ouiaId: `${ouiaId}-tr-${rowIndex}` }, (rowIsObject && (row === null || row === void 0 ? void 0 : row.props)), { isContentExpanded: isRowExpanded, isControlRow: true, children: [isSelectable && ((0, jsx_runtime_1.jsx)(react_table_1.Td, { select: {
                         rowIndex,
                         onSelect: (_event, isSelecting) => {
                             onSelect === null || onSelect === void 0 ? void 0 : onSelect(isSelecting, rowIsObject ? row : [row]);
@@ -36,10 +48,38 @@ const DataViewTableBasic = (_a) => {
                     } }, `select-${rowIndex}`)), (rowIsObject ? row.row : row).map((cell, colIndex) => {
                     var _a;
                     const cellIsObject = (0, DataViewTable_1.isDataViewTdObject)(cell);
-                    return ((0, jsx_runtime_1.jsx)(react_table_1.Td, Object.assign({}, (cellIsObject && ((_a = cell === null || cell === void 0 ? void 0 : cell.props) !== null && _a !== void 0 ? _a : {})), { "data-ouia-component-id": `${ouiaId}-td-${rowIndex}-${colIndex}`, children: cellIsObject ? cell.cell : cell }), colIndex));
-                })] }), rowIndex));
-    }), [rows, isSelectable, isSelected, isSelectDisabled, onSelect, ouiaId]);
-    return ((0, jsx_runtime_1.jsxs)(react_table_1.Table, Object.assign({ "aria-label": "Data table", ouiaId: ouiaId }, props, { children: [activeHeadState || (0, jsx_runtime_1.jsx)(DataViewTableHead_1.DataViewTableHead, { columns: columns, ouiaId: ouiaId, hasResizableColumns: hasResizableColumns }), activeBodyState || (0, jsx_runtime_1.jsx)(react_table_1.Tbody, { children: renderedRows })] })));
+                    const cellExpandableContent = isExpandable ? expandedRows === null || expandedRows === void 0 ? void 0 : expandedRows.find((content) => content.rowId === rowId && content.columnId === colIndex) : undefined;
+                    return ((0, jsx_runtime_1.jsx)(react_table_1.Td, Object.assign({}, (cellIsObject && ((_a = cell === null || cell === void 0 ? void 0 : cell.props) !== null && _a !== void 0 ? _a : {})), (cellExpandableContent != null && {
+                        compoundExpand: {
+                            isExpanded: isRowExpanded && expandedColIndex === colIndex,
+                            expandId: `expandable-${rowIndex}`,
+                            onToggle: () => {
+                                setExpandedRowsState(prev => {
+                                    const isSameColumn = expandedColIndex === colIndex;
+                                    const wasExpanded = prev[rowIndex];
+                                    return Object.assign(Object.assign({}, prev), { [rowIndex]: isSameColumn ? !wasExpanded : true });
+                                });
+                                setExpandedColumnIndex(prev => (Object.assign(Object.assign({}, prev), { [rowIndex]: colIndex })));
+                            },
+                            rowIndex,
+                            columnIndex: colIndex
+                        }
+                    }), { "data-ouia-component-id": `${ouiaId}-td-${rowIndex}-${colIndex}`, children: cellIsObject ? cell.cell : cell }), colIndex));
+                })] }), needsSeparateTbody ? undefined : rowIndex));
+        if (needsSeparateTbody) {
+            return ((0, jsx_runtime_1.jsxs)(react_table_1.Tbody, { isExpanded: isRowExpanded, children: [rowContent, rowExpandableContents === null || rowExpandableContents === void 0 ? void 0 : rowExpandableContents.map((expandableContent) => ((0, jsx_runtime_1.jsx)(react_table_1.Tr, { isExpanded: isRowExpanded && expandedColIndex === expandableContent.columnId, children: (0, jsx_runtime_1.jsx)(react_table_1.Td, { colSpan: rowData.length + (isSelectable ? 1 : 0), "data-expanded-column-index": expandableContent.columnId, children: (0, jsx_runtime_1.jsx)(react_table_1.ExpandableRowContent, { children: expandableContent.content }) }) }, `expand-${rowIndex}-${expandableContent.columnId}`)))] }, rowIndex));
+        }
+        else {
+            return rowContent;
+        }
+    }), [rows, isSelectable, isSelected, isSelectDisabled, onSelect, ouiaId, expandedRowsState, expandedColumnIndex, expandedRows, isExpandable, needsSeparateTbody]);
+    const bodyContent = activeBodyState || (needsSeparateTbody ? renderedRows : (0, jsx_runtime_1.jsx)(react_table_1.Tbody, { children: renderedRows }));
+    if (isSticky) {
+        return ((0, jsx_runtime_1.jsx)(react_table_1.OuterScrollContainer, { children: (0, jsx_runtime_1.jsx)(react_table_1.InnerScrollContainer, { children: (0, jsx_runtime_1.jsxs)(react_table_1.Table, Object.assign({ ref: tableRef, "aria-label": "Data table", ouiaId: ouiaId, isExpandable: isExpandable, hasAnimations: true }, props, { isStickyHeader: true, children: [activeHeadState || (0, jsx_runtime_1.jsx)(DataViewTableHead_1.DataViewTableHead, { columns: columns, ouiaId: ouiaId, hasResizableColumns: hasResizableColumns }), bodyContent] })) }) }));
+    }
+    else {
+        return ((0, jsx_runtime_1.jsxs)(react_table_1.Table, Object.assign({ ref: tableRef, "aria-label": "Data table", ouiaId: ouiaId, isExpandable: isExpandable, hasAnimations: true }, props, { children: [activeHeadState || (0, jsx_runtime_1.jsx)(DataViewTableHead_1.DataViewTableHead, { columns: columns, ouiaId: ouiaId, hasResizableColumns: hasResizableColumns }), bodyContent] })));
+    }
 };
 exports.DataViewTableBasic = DataViewTableBasic;
 exports.default = exports.DataViewTableBasic;

package/dist/cjs/DataViewTableBasic/DataViewTableBasic.test.js

@@ -1,21 +1,41 @@
 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@testing-library/react");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
 const DataView_1 = require("../DataView");
 const DataViewTableBasic_1 = require("./DataViewTableBasic");
 const repositories = [
-    { 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 = [
+    { rowId: 1, columnId: 1, content: (0, jsx_runtime_1.jsx)("div", { children: "Branch details for Repository one" }) },
+];
 const ouiaId = 'TableExample';
 describe('DataViewTable component', () => {
     test('should render correctly', () => {
@@ -34,4 +54,22 @@ describe('DataViewTable component', () => {
         const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(DataView_1.DataView, { activeState: "loading", children: (0, jsx_runtime_1.jsx)(DataViewTableBasic_1.DataViewTableBasic, { "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, bodyStates: { loading: "Data is loading" }, rows: [] }) }));
         expect(container).toMatchSnapshot();
     });
+    test('when isExpandable cell should be clickable and expandable', () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b, _c;
+        const user = user_event_1.default.setup();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(DataViewTableBasic_1.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 = react_1.screen.getByText('Branch details for Repository one');
+        expect((_a = initialBranchContent.closest('tr')) === null || _a === void 0 ? void 0 : _a.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((_b = branchExpandButton === null || branchExpandButton === void 0 ? void 0 : branchExpandButton.closest('td')) === null || _b === void 0 ? void 0 : _b.textContent).toContain('Branch one');
+        // Click the expand button for Branches column
+        yield user.click(branchExpandButton);
+        // After clicking, the expandable content should be visible
+        const branchContent = react_1.screen.getByText('Branch details for Repository one');
+        expect((_c = branchContent.closest('tr')) === null || _c === void 0 ? void 0 : _c.classList.contains('pf-m-expanded')).toBeTruthy();
+    }));
 });

package/dist/dynamic-modules.json

@@ -36,6 +36,7 @@
   "DataViewTrObject": "dist/dynamic/DataViewTable",
   "DataViewTrTree": "dist/dynamic/DataViewTable",
   "EventTypes": "dist/dynamic/DataViewEventsContext",
+  "ExpandableContent": "dist/dynamic/DataViewTableBasic",
   "InternalContext": "dist/dynamic/InternalContext",
   "InternalContextProps": "dist/dynamic/InternalContext",
   "InternalContextProvider": "dist/dynamic/InternalContext",

package/dist/esm/DataViewTable/DataViewTable.d.ts

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

package/dist/esm/DataViewTableBasic/DataViewTableBasic.d.ts

@@ -2,12 +2,19 @@ import { FC } from 'react';
 import { TableProps } from '@patternfly/react-table';
 import { DataViewTh, DataViewTr } 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 */
@@ -16,6 +23,10 @@ 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 declare const DataViewTableBasic: FC<DataViewTableBasicProps>;
 export default DataViewTableBasic;

package/dist/esm/DataViewTableBasic/DataViewTableBasic.js

@@ -10,20 +10,32 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { Table, Tbody, Td, Tr, } from '@patternfly/react-table';
+import { useMemo, useState, useRef } from 'react';
+import { ExpandableRowContent, InnerScrollContainer, OuterScrollContainer, Table, Tbody, Td, Tr, } from '@patternfly/react-table';
 import { useInternalContext } from '../InternalContext';
 import { DataViewTableHead } from '../DataViewTableHead';
 import { isDataViewTdObject, isDataViewTrObject } from '../DataViewTable';
 export const DataViewTableBasic = (_a) => {
-    var { columns, rows, ouiaId = 'DataViewTableBasic', headStates, bodyStates, hasResizableColumns } = _a, props = __rest(_a, ["columns", "rows", "ouiaId", "headStates", "bodyStates", "hasResizableColumns"]);
+    var { columns, rows, expandedRows, ouiaId = 'DataViewTableBasic', headStates, bodyStates, hasResizableColumns, isExpandable = false, isSticky = false } = _a, props = __rest(_a, ["columns", "rows", "expandedRows", "ouiaId", "headStates", "bodyStates", "hasResizableColumns", "isExpandable", "isSticky"]);
     const { selection, activeState, isSelectable } = useInternalContext();
     const { onSelect, isSelected, isSelectDisabled } = selection !== null && selection !== void 0 ? selection : {};
     const activeHeadState = useMemo(() => activeState ? headStates === null || headStates === void 0 ? void 0 : headStates[activeState] : undefined, [activeState, headStates]);
     const activeBodyState = useMemo(() => activeState ? bodyStates === null || bodyStates === void 0 ? void 0 : bodyStates[activeState] : undefined, [activeState, bodyStates]);
+    const [expandedRowsState, setExpandedRowsState] = useState({});
+    const [expandedColumnIndex, setExpandedColumnIndex] = useState({});
+    const tableRef = useRef(null);
+    const needsSeparateTbody = isExpandable;
     const renderedRows = useMemo(() => rows.map((row, rowIndex) => {
         const rowIsObject = isDataViewTrObject(row);
-        return (_jsxs(Tr, Object.assign({ ouiaId: `${ouiaId}-tr-${rowIndex}` }, (rowIsObject && (row === null || row === void 0 ? void 0 : row.props)), { children: [isSelectable && (_jsx(Td, { select: {
+        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.id : undefined;
+        // Find all expandable contents for this row
+        const rowExpandableContents = isExpandable ? expandedRows === null || expandedRows === void 0 ? void 0 : expandedRows.filter((content) => content.rowId === rowId) : [];
+        const rowContent = (_jsxs(Tr, Object.assign({ ouiaId: `${ouiaId}-tr-${rowIndex}` }, (rowIsObject && (row === null || row === void 0 ? void 0 : row.props)), { isContentExpanded: isRowExpanded, isControlRow: true, children: [isSelectable && (_jsx(Td, { select: {
                         rowIndex,
                         onSelect: (_event, isSelecting) => {
                             onSelect === null || onSelect === void 0 ? void 0 : onSelect(isSelecting, rowIsObject ? row : [row]);
@@ -33,9 +45,37 @@ export const DataViewTableBasic = (_a) => {
                     } }, `select-${rowIndex}`)), (rowIsObject ? row.row : row).map((cell, colIndex) => {
                     var _a;
                     const cellIsObject = isDataViewTdObject(cell);
-                    return (_jsx(Td, Object.assign({}, (cellIsObject && ((_a = cell === null || cell === void 0 ? void 0 : cell.props) !== null && _a !== void 0 ? _a : {})), { "data-ouia-component-id": `${ouiaId}-td-${rowIndex}-${colIndex}`, children: cellIsObject ? cell.cell : cell }), colIndex));
-                })] }), rowIndex));
-    }), [rows, isSelectable, isSelected, isSelectDisabled, onSelect, ouiaId]);
-    return (_jsxs(Table, Object.assign({ "aria-label": "Data table", ouiaId: ouiaId }, props, { children: [activeHeadState || _jsx(DataViewTableHead, { columns: columns, ouiaId: ouiaId, hasResizableColumns: hasResizableColumns }), activeBodyState || _jsx(Tbody, { children: renderedRows })] })));
+                    const cellExpandableContent = isExpandable ? expandedRows === null || expandedRows === void 0 ? void 0 : expandedRows.find((content) => content.rowId === rowId && content.columnId === colIndex) : undefined;
+                    return (_jsx(Td, Object.assign({}, (cellIsObject && ((_a = cell === null || cell === void 0 ? void 0 : cell.props) !== null && _a !== void 0 ? _a : {})), (cellExpandableContent != null && {
+                        compoundExpand: {
+                            isExpanded: isRowExpanded && expandedColIndex === colIndex,
+                            expandId: `expandable-${rowIndex}`,
+                            onToggle: () => {
+                                setExpandedRowsState(prev => {
+                                    const isSameColumn = expandedColIndex === colIndex;
+                                    const wasExpanded = prev[rowIndex];
+                                    return Object.assign(Object.assign({}, prev), { [rowIndex]: isSameColumn ? !wasExpanded : true });
+                                });
+                                setExpandedColumnIndex(prev => (Object.assign(Object.assign({}, prev), { [rowIndex]: colIndex })));
+                            },
+                            rowIndex,
+                            columnIndex: colIndex
+                        }
+                    }), { "data-ouia-component-id": `${ouiaId}-td-${rowIndex}-${colIndex}`, children: cellIsObject ? cell.cell : cell }), colIndex));
+                })] }), needsSeparateTbody ? undefined : rowIndex));
+        if (needsSeparateTbody) {
+            return (_jsxs(Tbody, { isExpanded: isRowExpanded, children: [rowContent, rowExpandableContents === null || rowExpandableContents === void 0 ? void 0 : rowExpandableContents.map((expandableContent) => (_jsx(Tr, { isExpanded: isRowExpanded && expandedColIndex === expandableContent.columnId, children: _jsx(Td, { colSpan: rowData.length + (isSelectable ? 1 : 0), "data-expanded-column-index": expandableContent.columnId, children: _jsx(ExpandableRowContent, { children: expandableContent.content }) }) }, `expand-${rowIndex}-${expandableContent.columnId}`)))] }, rowIndex));
+        }
+        else {
+            return rowContent;
+        }
+    }), [rows, isSelectable, isSelected, isSelectDisabled, onSelect, ouiaId, expandedRowsState, expandedColumnIndex, expandedRows, isExpandable, needsSeparateTbody]);
+    const bodyContent = activeBodyState || (needsSeparateTbody ? renderedRows : _jsx(Tbody, { children: renderedRows }));
+    if (isSticky) {
+        return (_jsx(OuterScrollContainer, { children: _jsx(InnerScrollContainer, { children: _jsxs(Table, Object.assign({ ref: tableRef, "aria-label": "Data table", ouiaId: ouiaId, isExpandable: isExpandable, hasAnimations: true }, props, { isStickyHeader: true, children: [activeHeadState || _jsx(DataViewTableHead, { columns: columns, ouiaId: ouiaId, hasResizableColumns: hasResizableColumns }), bodyContent] })) }) }));
+    }
+    else {
+        return (_jsxs(Table, Object.assign({ ref: tableRef, "aria-label": "Data table", ouiaId: ouiaId, isExpandable: isExpandable, hasAnimations: true }, props, { children: [activeHeadState || _jsx(DataViewTableHead, { columns: columns, ouiaId: ouiaId, hasResizableColumns: hasResizableColumns }), bodyContent] })));
+    }
 };
 export default DataViewTableBasic;

package/dist/esm/DataViewTableBasic/DataViewTableBasic.test.js

@@ -1,19 +1,36 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { jsx as _jsx } from "react/jsx-runtime";
-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';
 const repositories = [
-    { 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 = [
+    { rowId: 1, columnId: 1, content: _jsx("div", { children: "Branch details for Repository one" }) },
+];
 const ouiaId = 'TableExample';
 describe('DataViewTable component', () => {
     test('should render correctly', () => {
@@ -32,4 +49,22 @@ describe('DataViewTable component', () => {
         const { container } = render(_jsx(DataView, { activeState: "loading", children: _jsx(DataViewTableBasic, { "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, bodyStates: { loading: "Data is loading" }, rows: [] }) }));
         expect(container).toMatchSnapshot();
     });
+    test('when isExpandable cell should be clickable and expandable', () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b, _c;
+        const user = userEvent.setup();
+        render(_jsx(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((_a = initialBranchContent.closest('tr')) === null || _a === void 0 ? void 0 : _a.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((_b = branchExpandButton === null || branchExpandButton === void 0 ? void 0 : branchExpandButton.closest('td')) === null || _b === void 0 ? void 0 : _b.textContent).toContain('Branch one');
+        // Click the expand button for Branches column
+        yield user.click(branchExpandButton);
+        // After clicking, the expandable content should be visible
+        const branchContent = screen.getByText('Branch details for Repository one');
+        expect((_c = branchContent.closest('tr')) === null || _c === void 0 ? void 0 : _c.classList.contains('pf-m-expanded')).toBeTruthy();
+    }));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-data-view",
-  "version": "6.4.0-prerelease.8",
+  "version": "6.4.0-prerelease.9",
   "description": "Data view used for Red Hat projects.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

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

@@ -0,0 +1,108 @@
+import { FunctionComponent } from 'react';
+import { DataViewTable, DataViewTr, DataViewTh, ExpandableContent } 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;
+}
+
+const expandableContents: ExpandableContent[] = [
+  // Row 1 - Repository one
+  { 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' },
+  { 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 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 }) => [
+  {
+    id,
+    cell: workspaces,
+    props: {
+      favorites: { isFavorited: true }
+    }
+  },
+  { cell: <Button href='#' variant='link' isInline>{name}</Button> },
+  branches,
+  prs,
+  workspaces,
+  lastCommit,
+  { cell: <ActionsColumn items={rowActions}/>, props: { isActionCell: true } },
+]);
+
+const columns: DataViewTh[] = [
+  null,
+  'Repositories', 
+  { cell: <>Branches<ExclamationCircleIcon className='pf-v6-u-ml-sm' color="var(--pf-t--global--color--status--danger--default)"/></> }, 
+  'Pull requests', 
+  { cell: 'Workspaces', props: { info: { tooltip: 'More information' }, isStickyColumn: true } }, 
+  { cell: 'Last commit', props: { sort: { sortBy: {}, columnIndex: 4 } } },
+];
+
+const ouiaId = 'TableExample';
+
+export const ExpandableExample: FunctionComponent = () => (
+  <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} expandedRows={expandableContents} isExpandable={true}/>
+);