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

package/dist/dynamic-modules.json

@@ -0,0 +1,62 @@
+{
+  "DataView": "dist/dynamic/DataView",
+  "DataViewCheckboxFilter": "dist/dynamic/DataViewCheckboxFilter",
+  "DataViewCheckboxFilterProps": "dist/dynamic/DataViewCheckboxFilter",
+  "DataViewEvent": "dist/dynamic/DataViewEventsContext",
+  "DataViewEventsContext": "dist/dynamic/DataViewEventsContext",
+  "DataViewEventsContextValue": "dist/dynamic/DataViewEventsContext",
+  "DataViewEventsProvider": "dist/dynamic/DataViewEventsContext",
+  "DataViewFilterOption": "dist/dynamic/DataViewFilters",
+  "DataViewFilters": "dist/dynamic/DataViewFilters",
+  "DataViewFiltersProps": "dist/dynamic/DataViewFilters",
+  "DataViewImpementationProps": "dist/dynamic/DataView",
+  "DataViewPaginationProps": "dist/dynamic/Hooks",
+  "DataViewProps": "dist/dynamic/DataView",
+  "DataViewSelection": "dist/dynamic/InternalContext",
+  "DataViewSortConfig": "dist/dynamic/Hooks",
+  "DataViewSortParams": "dist/dynamic/Hooks",
+  "DataViewState": "dist/dynamic/DataView",
+  "DataViewTable": "dist/dynamic/DataViewTable",
+  "DataViewTableBasic": "dist/dynamic/DataViewTableBasic",
+  "DataViewTableBasicProps": "dist/dynamic/DataViewTableBasic",
+  "DataViewTableHead": "dist/dynamic/DataViewTableHead",
+  "DataViewTableHeadProps": "dist/dynamic/DataViewTableHead",
+  "DataViewTableProps": "dist/dynamic/DataViewTable",
+  "DataViewTableTree": "dist/dynamic/DataViewTableTree",
+  "DataViewTableTreeProps": "dist/dynamic/DataViewTableTree",
+  "DataViewTd": "dist/dynamic/DataViewTable",
+  "DataViewTextFilter": "dist/dynamic/DataViewTextFilter",
+  "DataViewTextFilterProps": "dist/dynamic/DataViewTextFilter",
+  "DataViewTh": "dist/dynamic/DataViewTh",
+  "DataViewThProps": "dist/dynamic/DataViewTh",
+  "DataViewThResizableProps": "dist/dynamic/DataViewTh",
+  "DataViewToolbar": "dist/dynamic/DataViewToolbar",
+  "DataViewToolbarProps": "dist/dynamic/DataViewToolbar",
+  "DataViewTr": "dist/dynamic/DataViewTable",
+  "DataViewTrObject": "dist/dynamic/DataViewTable",
+  "DataViewTrTree": "dist/dynamic/DataViewTable",
+  "DataViewTreeFilter": "dist/dynamic/DataViewTreeFilter",
+  "DataViewTreeFilterProps": "dist/dynamic/DataViewTreeFilter",
+  "EventTypes": "dist/dynamic/DataViewEventsContext",
+  "ExpandableContent": "dist/dynamic/DataViewTableBasic",
+  "InternalContext": "dist/dynamic/InternalContext",
+  "InternalContextProps": "dist/dynamic/InternalContext",
+  "InternalContextProvider": "dist/dynamic/InternalContext",
+  "InternalContextValue": "dist/dynamic/InternalContext",
+  "InternalProviderProps": "dist/dynamic/InternalContext",
+  "PaginationParams": "dist/dynamic/Hooks",
+  "UseDataViewFiltersProps": "dist/dynamic/Hooks",
+  "UseDataViewPaginationProps": "dist/dynamic/Hooks",
+  "UseDataViewSelectionProps": "dist/dynamic/Hooks",
+  "UseDataViewSortProps": "dist/dynamic/Hooks",
+  "isDataViewFilterOption": "dist/dynamic/DataViewCheckboxFilter",
+  "isDataViewTdObject": "dist/dynamic/DataViewTable",
+  "isDataViewThObject": "dist/dynamic/DataViewTable",
+  "isDataViewTrObject": "dist/dynamic/DataViewTable",
+  "useDataViewEventsContext": "dist/dynamic/DataViewEventsContext",
+  "useDataViewFilters": "dist/dynamic/Hooks",
+  "useDataViewPagination": "dist/dynamic/Hooks",
+  "useDataViewSelection": "dist/dynamic/Hooks",
+  "useDataViewSort": "dist/dynamic/Hooks",
+  "useInternalContext": "dist/dynamic/InternalContext"
+}

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

@@ -1,10 +1,14 @@
 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;
+    /** Additional props for a resizable column */
+    resizableProps?: DataViewThResizableProps;
     /** Props passed to Th */
     props?: ThProps;
 };
@@ -44,6 +48,7 @@ export type DataViewTableProps = ({
     isTreeTable: true;
 } & DataViewTableTreeProps) | ({
     isTreeTable?: false;
+    isResizable?: boolean;
 } & DataViewTableBasicProps);
 export declare const DataViewTable: FC<DataViewTableProps>;
 export default DataViewTable;

package/dist/esm/DataViewTable/DataViewTable.js

@@ -1,8 +1,28 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
+import { InnerScrollContainer } from '@patternfly/react-table';
 import { DataViewTableTree } from '../DataViewTableTree';
 import { DataViewTableBasic } from '../DataViewTableBasic';
 export const isDataViewThObject = (value) => value != null && typeof value === 'object' && 'cell' in value;
 export const isDataViewTdObject = (value) => value != null && typeof value === 'object' && 'cell' in value;
 export const isDataViewTrObject = (value) => value != null && typeof value === 'object' && 'row' in value;
-export const DataViewTable = (props) => (props.isTreeTable ? _jsx(DataViewTableTree, Object.assign({}, props)) : _jsx(DataViewTableBasic, Object.assign({}, props)));
+export const DataViewTable = (props) => {
+    if (props.isTreeTable) {
+        return _jsx(DataViewTableTree, Object.assign({}, props));
+    }
+    else {
+        const { isResizable } = props, rest = __rest(props, ["isResizable"]);
+        return isResizable ? (_jsx(InnerScrollContainer, { children: _jsx(DataViewTableBasic, Object.assign({ hasResizableColumns: true }, rest)) })) : (_jsx(DataViewTableBasic, Object.assign({}, rest)));
+    }
+};
 export default DataViewTable;

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

@@ -2,18 +2,31 @@ 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 */
     bodyStates?: Partial<Record<DataViewState | string, React.ReactNode>>;
     /** Custom OUIA ID */
     ouiaId?: string;
+    /** @hide Indicates if the table is resizable */
+    hasResizableColumns?: boolean;
+    /** Toggles expandable */
+    isExpandable?: boolean;
+    /** Toggles sticky columns and header */
+    isSticky?: boolean;
 }
 export 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 } = _a, props = __rest(_a, ["columns", "rows", "ouiaId", "headStates", "bodyStates"]);
+    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 }), 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/dist/esm/DataViewTableHead/DataViewTableHead.d.ts

@@ -9,6 +9,8 @@ export interface DataViewTableHeadProps extends TheadProps {
     columns: DataViewTh[];
     /** Custom OUIA ID */
     ouiaId?: string;
+    /** @hide Indicates whether table is resizable */
+    hasResizableColumns?: boolean;
 }
 export declare const DataViewTableHead: FC<DataViewTableHeadProps>;
 export default DataViewTableHead;

package/dist/esm/DataViewTableHead/DataViewTableHead.js

@@ -14,17 +14,18 @@ import { useMemo } from 'react';
 import { Th, Thead, Tr } from '@patternfly/react-table';
 import { useInternalContext } from '../InternalContext';
 import { isDataViewThObject } from '../DataViewTable';
+import { DataViewTh as DataViewThElement } from '../DataViewTh/DataViewTh';
 export const DataViewTableHead = (_a) => {
-    var { isTreeTable = false, columns, ouiaId = 'DataViewTableHead' } = _a, props = __rest(_a, ["isTreeTable", "columns", "ouiaId"]);
+    var { isTreeTable = false, columns, ouiaId = 'DataViewTableHead', hasResizableColumns } = _a, props = __rest(_a, ["isTreeTable", "columns", "ouiaId", "hasResizableColumns"]);
     const { selection } = useInternalContext();
     const { onSelect, isSelected } = selection !== null && selection !== void 0 ? selection : {};
     const cells = useMemo(() => [
-        onSelect && isSelected && !isTreeTable ? (_jsx(Th, { screenReaderText: 'Data selection table head cell' }, "row-select")) : null,
+        onSelect && isSelected && !isTreeTable ? (_jsx(Th, { screenReaderText: "Data selection table head cell" }, "row-select")) : null,
         ...columns.map((column, index) => {
             var _a;
-            return (_jsx(Th, Object.assign({}, (isDataViewThObject(column) && ((_a = column === null || column === void 0 ? void 0 : column.props) !== null && _a !== void 0 ? _a : {})), { "data-ouia-component-id": `${ouiaId}-th-${index}`, children: isDataViewThObject(column) ? column.cell : column }), index));
+            return (_jsx(DataViewThElement, { content: isDataViewThObject(column) ? column.cell : column, resizableProps: isDataViewThObject(column) ? column.resizableProps : undefined, "data-ouia-component-id": `${ouiaId}-th-${index}`, thProps: isDataViewThObject(column) ? ((_a = column === null || column === void 0 ? void 0 : column.props) !== null && _a !== void 0 ? _a : {}) : {}, hasResizableColumns: hasResizableColumns }, index));
         })
-    ], [columns, ouiaId, onSelect, isSelected, isTreeTable]);
+    ], [columns, ouiaId, onSelect, isSelected, isTreeTable, hasResizableColumns]);
     return (_jsx(Thead, Object.assign({ "data-ouia-component-id": `${ouiaId}-thead` }, props, { children: _jsx(Tr, { ouiaId: `${ouiaId}-tr-head`, children: cells }) })));
 };
 export default DataViewTableHead;

package/dist/esm/DataViewTableTree/DataViewTableTree.d.ts

@@ -18,6 +18,8 @@ export interface DataViewTableTreeProps extends Omit<TableProps, 'onSelect' | 'r
     expandedIcon?: React.ReactNode;
     /** Optional icon for the collapsed parent rows */
     collapsedIcon?: React.ReactNode;
+    /** Expand all expandable nodes on initial load */
+    expandAll?: boolean;
     /** Custom OUIA ID */
     ouiaId?: string;
 }

package/dist/esm/DataViewTableTree/DataViewTableTree.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useEffect } from 'react';
 import { Table, Tbody, Td, TreeRowWrapper, } from '@patternfly/react-table';
 import { useInternalContext } from '../InternalContext';
 import { DataViewTableHead } from '../DataViewTableHead';
@@ -42,11 +42,38 @@ const getNodesAffectedBySelection = (allRows, node, isChecking, isSelected) => {
     return Array.from(affectedNodes);
 };
 export const DataViewTableTree = (_a) => {
-    var { columns, rows, headStates, bodyStates, leafIcon = null, expandedIcon = null, collapsedIcon = null, ouiaId = 'DataViewTableTree' } = _a, props = __rest(_a, ["columns", "rows", "headStates", "bodyStates", "leafIcon", "expandedIcon", "collapsedIcon", "ouiaId"]);
+    var { columns, rows, headStates, bodyStates, leafIcon = null, expandedIcon = null, collapsedIcon = null, expandAll = false, ouiaId = 'DataViewTableTree' } = _a, props = __rest(_a, ["columns", "rows", "headStates", "bodyStates", "leafIcon", "expandedIcon", "collapsedIcon", "expandAll", "ouiaId"]);
     const { selection, activeState } = useInternalContext();
     const { onSelect, isSelected, isSelectDisabled } = selection !== null && selection !== void 0 ? selection : {};
     const [expandedNodeIds, setExpandedNodeIds] = useState([]);
     const [expandedDetailsNodeNames, setExpandedDetailsNodeIds] = useState([]);
+    // Helper function to collect all node IDs that have children (are expandable)
+    const getExpandableNodeIds = (nodes) => {
+        const expandableIds = [];
+        const traverse = (nodeList) => {
+            nodeList.forEach(node => {
+                if (node.children && node.children.length > 0) {
+                    expandableIds.push(node.id);
+                    traverse(node.children);
+                }
+            });
+        };
+        traverse(nodes);
+        return expandableIds;
+    };
+    // Effect to handle expandAll behavior
+    // Memoize the expandable IDs to avoid recalculating when rows object reference changes but structure is the same
+    const expandableIds = useMemo(() => getExpandableNodeIds(rows), [rows]);
+    // Effect to handle expandAll behavior - only runs when IDs actually change
+    useEffect(() => {
+        if (expandAll) {
+            setExpandedNodeIds(expandableIds);
+        }
+        else {
+            setExpandedNodeIds([]);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [expandAll, expandableIds.join(',')]);
     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 nodes = useMemo(() => {

package/dist/esm/DataViewTableTree/DataViewTableTree.test.js

@@ -74,6 +74,10 @@ describe('DataViewTableTree component', () => {
         const { container } = render(_jsx(DataView, { activeState: "error", children: _jsx(DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, bodyStates: { error: "Some error" }, rows: [] }) }));
         expect(container).toMatchSnapshot();
     });
+    test('should render tree table with all expandable nodes expanded', () => {
+        const { container } = render(_jsx(DataView, { selection: mockSelection, children: _jsx(DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, expandAll: true, rows: rows, leafIcon: _jsx(LeafIcon, {}), expandedIcon: _jsx(FolderOpenIcon, { "aria-hidden": true }), collapsedIcon: _jsx(FolderIcon, { "aria-hidden": true }) }) }));
+        expect(container).toMatchSnapshot();
+    });
     test('should render tree table with a loading state', () => {
         const { container } = render(_jsx(DataView, { activeState: "loading", children: _jsx(DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, bodyStates: { loading: "Data is loading" }, rows: [] }) }));
         expect(container).toMatchSnapshot();

package/dist/esm/DataViewTh/DataViewTh.d.ts

@@ -0,0 +1,32 @@
+import { FC, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent, ReactNode } from 'react';
+import { ThProps } from '@patternfly/react-table';
+export interface DataViewThResizableProps {
+    /** Whether the column is resizable */
+    isResizable?: boolean;
+    /** Callback after the column is resized. Returns the triggering event, the column id passed in via cell props, and the new width of the column. */
+    onResize?: (event: ReactMouseEvent | MouseEvent | ReactKeyboardEvent | KeyboardEvent | TouchEvent, id: string | number | undefined, width: number) => void;
+    /** Width of the column */
+    width?: number;
+    /** Minimum width of the column */
+    minWidth?: number;
+    /** Increment for keyboard navigation */
+    increment?: number;
+    /** Increment for keyboard navigation while shift is held */
+    shiftIncrement?: number;
+    /** Provides an accessible name for the resizable column via a human readable string. */
+    resizeButtonAriaLabel?: string;
+    /** Screenreader text that gets announced when the column is resized. */
+    screenReaderText?: string;
+}
+export interface DataViewThProps {
+    /** Cell content */
+    content: ReactNode;
+    /** Resizable props */
+    resizableProps?: DataViewThResizableProps;
+    /** @hide Indicates whether the table has resizable columns */
+    hasResizableColumns?: boolean;
+    /** Props passed to Th */
+    thProps?: ThProps;
+}
+export declare const DataViewTh: FC<DataViewThProps>;
+export default DataViewTh;