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

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

@@ -2,9 +2,12 @@ import { FC, ReactNode } from 'react';
 import { TdProps, ThProps, TrProps } from '@patternfly/react-table';
 import { DataViewTableTreeProps } from '../DataViewTableTree';
 import { DataViewTableBasicProps } from '../DataViewTableBasic';
+import { DataViewThResizableProps } from '../DataViewTh/DataViewTh';
 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 +47,7 @@ export type DataViewTableProps = ({
     isTreeTable: true;
 } & DataViewTableTreeProps) | ({
     isTreeTable?: false;
+    isResizable?: boolean;
 } & DataViewTableBasicProps);
 export declare const DataViewTable: FC<DataViewTableProps>;
 export default DataViewTable;

package/dist/cjs/DataViewTable/DataViewTable.js

@@ -1,7 +1,19 @@
 "use strict";
+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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataViewTable = exports.isDataViewTrObject = exports.isDataViewTdObject = exports.isDataViewThObject = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_table_1 = require("@patternfly/react-table");
 const DataViewTableTree_1 = require("../DataViewTableTree");
 const DataViewTableBasic_1 = require("../DataViewTableBasic");
 const isDataViewThObject = (value) => value != null && typeof value === 'object' && 'cell' in value;
@@ -10,6 +22,14 @@ const isDataViewTdObject = (value) => value != null && typeof value === 'object'
 exports.isDataViewTdObject = isDataViewTdObject;
 const isDataViewTrObject = (value) => value != null && typeof value === 'object' && 'row' in value;
 exports.isDataViewTrObject = isDataViewTrObject;
-const DataViewTable = (props) => (props.isTreeTable ? (0, jsx_runtime_1.jsx)(DataViewTableTree_1.DataViewTableTree, Object.assign({}, props)) : (0, jsx_runtime_1.jsx)(DataViewTableBasic_1.DataViewTableBasic, Object.assign({}, props)));
+const DataViewTable = (props) => {
+    if (props.isTreeTable) {
+        return (0, jsx_runtime_1.jsx)(DataViewTableTree_1.DataViewTableTree, Object.assign({}, props));
+    }
+    else {
+        const { isResizable } = props, rest = __rest(props, ["isResizable"]);
+        return isResizable ? ((0, jsx_runtime_1.jsx)(react_table_1.InnerScrollContainer, { children: (0, jsx_runtime_1.jsx)(DataViewTableBasic_1.DataViewTableBasic, Object.assign({ hasResizableColumns: true }, rest)) })) : ((0, jsx_runtime_1.jsx)(DataViewTableBasic_1.DataViewTableBasic, Object.assign({}, rest)));
+    }
+};
 exports.DataViewTable = DataViewTable;
 exports.default = exports.DataViewTable;

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

@@ -14,6 +14,8 @@ export interface DataViewTableBasicProps extends Omit<TableProps, 'onSelect' | '
     bodyStates?: Partial<Record<DataViewState | string, React.ReactNode>>;
     /** Custom OUIA ID */
     ouiaId?: string;
+    /** @hide Indicates if the table is resizable */
+    hasResizableColumns?: boolean;
 }
 export declare const DataViewTableBasic: FC<DataViewTableBasicProps>;
 export default DataViewTableBasic;

package/dist/cjs/DataViewTableBasic/DataViewTableBasic.js

@@ -19,7 +19,7 @@ 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 } = _a, props = __rest(_a, ["columns", "rows", "ouiaId", "headStates", "bodyStates"]);
+    var { columns, rows, ouiaId = 'DataViewTableBasic', headStates, bodyStates, hasResizableColumns } = _a, props = __rest(_a, ["columns", "rows", "ouiaId", "headStates", "bodyStates", "hasResizableColumns"]);
     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]);
@@ -39,7 +39,7 @@ const DataViewTableBasic = (_a) => {
                     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 }), activeBodyState || (0, jsx_runtime_1.jsx)(react_table_1.Tbody, { children: renderedRows })] })));
+    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 })] })));
 };
 exports.DataViewTableBasic = DataViewTableBasic;
 exports.default = exports.DataViewTableBasic;

package/dist/cjs/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/cjs/DataViewTableHead/DataViewTableHead.js

@@ -17,17 +17,18 @@ const react_1 = require("react");
 const react_table_1 = require("@patternfly/react-table");
 const InternalContext_1 = require("../InternalContext");
 const DataViewTable_1 = require("../DataViewTable");
+const DataViewTh_1 = require("../DataViewTh/DataViewTh");
 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 } = (0, InternalContext_1.useInternalContext)();
     const { onSelect, isSelected } = selection !== null && selection !== void 0 ? selection : {};
     const cells = (0, react_1.useMemo)(() => [
-        onSelect && isSelected && !isTreeTable ? ((0, jsx_runtime_1.jsx)(react_table_1.Th, { screenReaderText: 'Data selection table head cell' }, "row-select")) : null,
+        onSelect && isSelected && !isTreeTable ? ((0, jsx_runtime_1.jsx)(react_table_1.Th, { screenReaderText: "Data selection table head cell" }, "row-select")) : null,
         ...columns.map((column, index) => {
             var _a;
-            return ((0, jsx_runtime_1.jsx)(react_table_1.Th, Object.assign({}, ((0, DataViewTable_1.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: (0, DataViewTable_1.isDataViewThObject)(column) ? column.cell : column }), index));
+            return ((0, jsx_runtime_1.jsx)(DataViewTh_1.DataViewTh, { content: (0, DataViewTable_1.isDataViewThObject)(column) ? column.cell : column, resizableProps: (0, DataViewTable_1.isDataViewThObject)(column) ? column.resizableProps : undefined, "data-ouia-component-id": `${ouiaId}-th-${index}`, thProps: (0, DataViewTable_1.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 ((0, jsx_runtime_1.jsx)(react_table_1.Thead, Object.assign({ "data-ouia-component-id": `${ouiaId}-thead` }, props, { children: (0, jsx_runtime_1.jsx)(react_table_1.Tr, { ouiaId: `${ouiaId}-tr-head`, children: cells }) })));
 };
 exports.DataViewTableHead = DataViewTableHead;

package/dist/cjs/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/cjs/DataViewTableTree/DataViewTableTree.js

@@ -45,11 +45,38 @@ const getNodesAffectedBySelection = (allRows, node, isChecking, isSelected) => {
     return Array.from(affectedNodes);
 };
 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 } = (0, InternalContext_1.useInternalContext)();
     const { onSelect, isSelected, isSelectDisabled } = selection !== null && selection !== void 0 ? selection : {};
     const [expandedNodeIds, setExpandedNodeIds] = (0, react_1.useState)([]);
     const [expandedDetailsNodeNames, setExpandedDetailsNodeIds] = (0, react_1.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 = (0, react_1.useMemo)(() => getExpandableNodeIds(rows), [rows]);
+    // Effect to handle expandAll behavior - only runs when IDs actually change
+    (0, react_1.useEffect)(() => {
+        if (expandAll) {
+            setExpandedNodeIds(expandableIds);
+        }
+        else {
+            setExpandedNodeIds([]);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [expandAll, expandableIds.join(',')]);
     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 nodes = (0, react_1.useMemo)(() => {

package/dist/cjs/DataViewTableTree/DataViewTableTree.test.js

@@ -76,6 +76,10 @@ describe('DataViewTableTree component', () => {
         const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(DataView_1.DataView, { activeState: "error", children: (0, jsx_runtime_1.jsx)(DataViewTable_1.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 } = (0, react_1.render)((0, jsx_runtime_1.jsx)(DataView_1.DataView, { selection: mockSelection, children: (0, jsx_runtime_1.jsx)(DataViewTable_1.DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, expandAll: true, rows: rows, leafIcon: (0, jsx_runtime_1.jsx)(react_icons_1.LeafIcon, {}), expandedIcon: (0, jsx_runtime_1.jsx)(react_icons_1.FolderOpenIcon, { "aria-hidden": true }), collapsedIcon: (0, jsx_runtime_1.jsx)(react_icons_1.FolderIcon, { "aria-hidden": true }) }) }));
+        expect(container).toMatchSnapshot();
+    });
     test('should render tree table with a loading state', () => {
         const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(DataView_1.DataView, { activeState: "loading", children: (0, jsx_runtime_1.jsx)(DataViewTable_1.DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, bodyStates: { loading: "Data is loading" }, rows: [] }) }));
         expect(container).toMatchSnapshot();

package/dist/cjs/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;

package/dist/cjs/DataViewTh/DataViewTh.js

@@ -0,0 +1,222 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataViewTh = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_table_1 = require("@patternfly/react-table");
+const react_core_1 = require("@patternfly/react-core");
+const react_jss_1 = require("react-jss");
+const c_table_cell_PaddingBlockEnd_1 = __importDefault(require("@patternfly/react-tokens/dist/esm/c_table_cell_PaddingBlockEnd"));
+const c_table_cell_PaddingInlineEnd_1 = __importDefault(require("@patternfly/react-tokens/dist/esm/c_table_cell_PaddingInlineEnd"));
+const t_global_font_size_body_default_1 = __importDefault(require("@patternfly/react-tokens/dist/esm/t_global_font_size_body_default"));
+const ResizeIcon = () => ((0, jsx_runtime_1.jsx)("svg", { className: "pf-v6-svg", viewBox: "0 0 1024 1024", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M52.7,529.8l190.5,161.9c18.6,15.9,50.5,4.7,50.5-17.8v-324c0-22.4-31.8-33.6-50.5-17.8L52.7,494.2c-11.5,9.8-11.5,25.8,0,35.6ZM480.8,12.9h62.4v998.3h-62.4V12.9ZM971.3,529.8l-190.5,161.9c-18.6,15.9-50.5,4.7-50.5-17.8v-324c0-22.4,31.8-33.6,50.5-17.8l190.5,161.9c11.5,9.8,11.5,25.8,0,35.6Z" }) }));
+const useStyles = (0, react_jss_1.createUseStyles)({
+    dataViewResizeableTh: {
+        [c_table_cell_PaddingInlineEnd_1.default.name]: `calc(${t_global_font_size_body_default_1.default.var} * 2)`
+    },
+    dataViewResizableButton: {
+        position: 'absolute',
+        insetInlineEnd: `calc(${t_global_font_size_body_default_1.default.var} / 2)`,
+        insetBlockEnd: c_table_cell_PaddingBlockEnd_1.default.var,
+        cursor: 'grab',
+        '&:active': {
+            cursor: 'grabbing'
+        }
+    }
+});
+const DataViewTh = (_a) => {
+    var { content, resizableProps = {}, hasResizableColumns = false, thProps } = _a, props = __rest(_a, ["content", "resizableProps", "hasResizableColumns", "thProps"]);
+    const thRef = (0, react_1.useRef)(null);
+    const [width, setWidth] = (0, react_1.useState)((resizableProps === null || resizableProps === void 0 ? void 0 : resizableProps.width) ? resizableProps.width : 0);
+    // Tracks the current column width for the onResize callback, because the width state is not updated until after the resize is complete
+    const trackedWidth = (0, react_1.useRef)(0);
+    const classes = useStyles();
+    const isResizable = (resizableProps === null || resizableProps === void 0 ? void 0 : resizableProps.isResizable) || false;
+    const increment = (resizableProps === null || resizableProps === void 0 ? void 0 : resizableProps.increment) || 5;
+    const shiftIncrement = (resizableProps === null || resizableProps === void 0 ? void 0 : resizableProps.shiftIncrement) || 25;
+    const resizeButtonAriaLabel = resizableProps === null || resizableProps === void 0 ? void 0 : resizableProps.resizeButtonAriaLabel;
+    const onResize = (resizableProps === null || resizableProps === void 0 ? void 0 : resizableProps.onResize) || undefined;
+    const screenReaderText = (resizableProps === null || resizableProps === void 0 ? void 0 : resizableProps.screenReaderText) || `Column ${width.toFixed(0)} pixels`;
+    const dataViewThClassName = isResizable ? classes.dataViewResizeableTh : undefined;
+    const resizeButtonRef = (0, react_1.useRef)(null);
+    const setInitialVals = (0, react_1.useRef)(true);
+    const dragOffset = (0, react_1.useRef)(0);
+    const isResizing = (0, react_1.useRef)(false);
+    const isInView = (0, react_1.useRef)(true);
+    if (isResizable && !resizeButtonAriaLabel) {
+        // eslint-disable-next-line no-console
+        console.warn('DataViewTh: Missing resizeButtonAriaLabel. An aria label must be passed to each resizable column to provide a context specific label for its resize button.');
+    }
+    (0, react_1.useEffect)(() => {
+        if (!isResizable) {
+            return;
+        }
+        const observed = resizeButtonRef.current;
+        const observer = new IntersectionObserver(([entry]) => {
+            isInView.current = entry.isIntersecting;
+        }, { threshold: 0.3 });
+        if (observed) {
+            observer.observe(observed);
+        }
+        return () => {
+            if (observed) {
+                observer.unobserve(observed);
+            }
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if ((isResizable || hasResizableColumns) && setInitialVals.current && width === 0) {
+            setWidth(((_a = thRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0);
+            setInitialVals.current = false;
+        }
+    }, [isResizable, hasResizableColumns, setInitialVals]);
+    const setDragOffset = (e) => {
+        var _a, _b;
+        const isRTL = (0, react_core_1.getLanguageDirection)(thRef.current) === 'rtl';
+        const startingMousePos = 'clientX' in e ? e.clientX : e.touches[0].clientX;
+        const startingColumnPos = (isRTL ? (_a = thRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left : (_b = thRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().right) || 0;
+        dragOffset.current = startingColumnPos - startingMousePos;
+    };
+    const handleMousedown = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        document.addEventListener('mousemove', callbackMouseMove);
+        document.addEventListener('mouseup', callbackMouseUp);
+        // When a user begins resizing a column, set the drag offset so the drag motion aligns with the column edge
+        if (dragOffset.current === 0) {
+            setDragOffset(e);
+        }
+        isResizing.current = true;
+    };
+    const handleMouseMove = (e) => {
+        const mousePos = e.clientX;
+        handleControlMove(e, dragOffset.current + mousePos);
+    };
+    const handleTouchStart = (e) => {
+        e.stopPropagation();
+        document.addEventListener('touchmove', callbackTouchMove, { passive: false });
+        document.addEventListener('touchend', callbackTouchEnd);
+        // When a user begins resizing a column, set the drag offset so the drag motion aligns with the column edge
+        if (dragOffset.current === 0) {
+            setDragOffset(e);
+        }
+        isResizing.current = true;
+    };
+    const handleTouchMove = (e) => {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        const touchPos = e.touches[0].clientX;
+        handleControlMove(e, touchPos);
+    };
+    const handleControlMove = (e, controlPosition) => {
+        var _a, _b;
+        e.stopPropagation();
+        if (!isResizing.current) {
+            return;
+        }
+        const columnRect = (_a = thRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (columnRect === undefined) {
+            return;
+        }
+        const mousePos = controlPosition;
+        const isRTL = (0, react_core_1.getLanguageDirection)(thRef.current) === 'rtl';
+        let newSize = isRTL ? (columnRect === null || columnRect === void 0 ? void 0 : columnRect.right) - mousePos : mousePos - (columnRect === null || columnRect === void 0 ? void 0 : columnRect.left);
+        // Prevent the column from shrinking below a specified minimum width
+        if (resizableProps.minWidth && newSize < resizableProps.minWidth) {
+            newSize = resizableProps.minWidth;
+        }
+        (_b = thRef.current) === null || _b === void 0 ? void 0 : _b.style.setProperty('min-width', newSize + 'px');
+        trackedWidth.current = newSize;
+        setWidth(newSize);
+    };
+    const handleMouseup = (e) => {
+        var _a;
+        if (!isResizing.current) {
+            return;
+        }
+        // Reset the isResizing and dragOffset values to their initial states
+        isResizing.current = false;
+        dragOffset.current = 0;
+        // Call the onResize callback with the new width
+        onResize && onResize(e, thProps === null || thProps === void 0 ? void 0 : thProps.id, trackedWidth.current);
+        // Handle scroll into view when column drag button is moved off screen
+        if (resizeButtonRef.current && !isInView.current) {
+            (_a = resizeButtonRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+        document.removeEventListener('mousemove', callbackMouseMove);
+        document.removeEventListener('mouseup', callbackMouseUp);
+    };
+    const handleTouchEnd = (e) => {
+        e.stopPropagation();
+        if (!isResizing) {
+            return;
+        }
+        // Reset the isResizing and dragOffset values to their initial states
+        isResizing.current = false;
+        dragOffset.current = 0;
+        // Call the onResize callback with the new width
+        onResize && onResize(e, thProps === null || thProps === void 0 ? void 0 : thProps.id, trackedWidth.current);
+        document.removeEventListener('touchmove', callbackTouchMove);
+        document.removeEventListener('touchend', callbackTouchEnd);
+    };
+    const callbackMouseMove = (0, react_1.useCallback)(handleMouseMove, []);
+    const callbackTouchEnd = (0, react_1.useCallback)(handleTouchEnd, []);
+    const callbackTouchMove = (0, react_1.useCallback)(handleTouchMove, []);
+    const callbackMouseUp = (0, react_1.useCallback)(handleMouseup, []);
+    const handleKeys = (e) => {
+        var _a, _b;
+        const key = e.key;
+        if (key === 'Tab') {
+            isResizing.current = false;
+        }
+        if (key !== 'ArrowLeft' && key !== 'ArrowRight') {
+            return;
+        }
+        e.preventDefault();
+        isResizing.current = true;
+        const isRTL = (0, react_core_1.getLanguageDirection)(thRef.current) === 'rtl';
+        const columnRect = (_a = thRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        let newSize = (columnRect === null || columnRect === void 0 ? void 0 : columnRect.width) || 0;
+        let delta = 0;
+        const _increment = e.shiftKey ? shiftIncrement : increment;
+        if (key === 'ArrowRight') {
+            if (isRTL) {
+                delta = -_increment;
+            }
+            else {
+                delta = _increment;
+            }
+        }
+        else if (key === 'ArrowLeft') {
+            if (isRTL) {
+                delta = _increment;
+            }
+            else {
+                delta = -_increment;
+            }
+        }
+        newSize = newSize + delta;
+        (_b = thRef.current) === null || _b === void 0 ? void 0 : _b.style.setProperty('min-width', newSize + 'px');
+        setWidth(newSize);
+        onResize && onResize(e, thProps === null || thProps === void 0 ? void 0 : thProps.id, newSize);
+    };
+    const resizableContent = ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { "aria-live": "polite", className: "pf-v6-screen-reader", children: screenReaderText }), (0, jsx_runtime_1.jsx)(react_core_1.Button, { ref: resizeButtonRef, variant: "plain", hasNoPadding: true, icon: (0, jsx_runtime_1.jsx)(ResizeIcon, {}), onMouseDown: handleMousedown, onKeyDown: handleKeys, onTouchStart: handleTouchStart, "aria-label": resizeButtonAriaLabel, className: classes.dataViewResizableButton })] }));
+    return ((0, jsx_runtime_1.jsx)(react_table_1.Th, Object.assign({}, thProps, props, { style: width > 0 ? { minWidth: width } : undefined, ref: thRef, modifier: "truncate", className: dataViewThClassName }, (isResizable && { additionalContent: resizableContent }), { children: content })));
+};
+exports.DataViewTh = DataViewTh;
+exports.default = exports.DataViewTh;

package/dist/cjs/Hooks/selection.d.ts

@@ -8,4 +8,5 @@ export declare const useDataViewSelection: (props?: UseDataViewSelectionProps) =
     selected: any[];
     onSelect: (isSelecting: boolean, items?: any[] | any) => void;
     isSelected: (item: any) => boolean;
+    setSelected: (items: any[]) => void;
 };

package/dist/cjs/Hooks/selection.js

@@ -17,10 +17,14 @@ const useDataViewSelection = (props) => {
             : setSelected(items ? prev => prev.filter(prevSelected => !(Array.isArray(items) ? items : [items]).some(item => matchOption(item, prevSelected))) : []);
     };
     const isSelected = (item) => Boolean(selected.find(selected => matchOption(selected, item)));
+    const setSelectedItems = (items) => {
+        setSelected(items);
+    };
     return {
         selected,
         onSelect,
-        isSelected
+        isSelected,
+        setSelected: setSelectedItems
     };
 };
 exports.useDataViewSelection = useDataViewSelection;

package/dist/cjs/Hooks/selection.test.js

@@ -19,6 +19,7 @@ describe('useDataViewSelection', () => {
             selected: [],
             onSelect: expect.any(Function),
             isSelected: expect.any(Function),
+            setSelected: expect.any(Function),
         });
     });
     it('should get initial state correctly - with initialSelected', () => {
@@ -28,6 +29,7 @@ describe('useDataViewSelection', () => {
             selected: initialSelected,
             onSelect: expect.any(Function),
             isSelected: expect.any(Function),
+            setSelected: expect.any(Function),
         });
     });
     it('should select items correctly - objects', () => __awaiter(void 0, void 0, void 0, function* () {
@@ -52,4 +54,50 @@ describe('useDataViewSelection', () => {
         expect(result.current.isSelected({ id: 1, name: 'test1' })).toBe(true);
         expect(result.current.isSelected({ id: 3, name: 'test2' })).toBe(false);
     });
+    it('should have setSelected function in return object', () => {
+        const { result } = (0, react_1.renderHook)(() => (0, selection_1.useDataViewSelection)({ matchOption: (a, b) => a.id === b.id }));
+        expect(result.current).toEqual({
+            selected: [],
+            onSelect: expect.any(Function),
+            isSelected: expect.any(Function),
+            setSelected: expect.any(Function),
+        });
+    });
+    it('should set selected items directly using setSelected - objects', () => __awaiter(void 0, void 0, void 0, function* () {
+        const initialSelected = [{ id: 1, name: 'test1' }];
+        const { result } = (0, react_1.renderHook)(() => (0, selection_1.useDataViewSelection)({ initialSelected, matchOption: (a, b) => a.id === b.id }));
+        const newSelected = [{ id: 2, name: 'test2' }, { id: 3, name: 'test3' }];
+        yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+            result.current.setSelected(newSelected);
+        }));
+        expect(result.current.selected).toEqual(newSelected);
+    }));
+    it('should set selected items directly using setSelected - strings', () => __awaiter(void 0, void 0, void 0, function* () {
+        const initialSelected = ['test1', 'test2'];
+        const { result } = (0, react_1.renderHook)(() => (0, selection_1.useDataViewSelection)({ initialSelected, matchOption: (a, b) => a === b }));
+        const newSelected = ['test3', 'test4', 'test5'];
+        yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+            result.current.setSelected(newSelected);
+        }));
+        expect(result.current.selected).toEqual(newSelected);
+    }));
+    it('should clear all selections using setSelected with empty array', () => __awaiter(void 0, void 0, void 0, function* () {
+        const initialSelected = [{ id: 1, name: 'test1' }, { id: 2, name: 'test2' }];
+        const { result } = (0, react_1.renderHook)(() => (0, selection_1.useDataViewSelection)({ initialSelected, matchOption: (a, b) => a.id === b.id }));
+        yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+            result.current.setSelected([]);
+        }));
+        expect(result.current.selected).toEqual([]);
+    }));
+    it('should update isSelected correctly after using setSelected', () => __awaiter(void 0, void 0, void 0, function* () {
+        const initialSelected = [{ id: 1, name: 'test1' }];
+        const { result } = (0, react_1.renderHook)(() => (0, selection_1.useDataViewSelection)({ initialSelected, matchOption: (a, b) => a.id === b.id }));
+        const newSelected = [{ id: 2, name: 'test2' }, { id: 3, name: 'test3' }];
+        yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+            result.current.setSelected(newSelected);
+        }));
+        expect(result.current.isSelected({ id: 1, name: 'test1' })).toBe(false);
+        expect(result.current.isSelected({ id: 2, name: 'test2' })).toBe(true);
+        expect(result.current.isSelected({ id: 3, name: 'test3' })).toBe(true);
+    }));
 });

package/dist/cjs/InternalContext/InternalContext.d.ts

@@ -5,6 +5,8 @@ export interface DataViewSelection {
     onSelect: (isSelecting: boolean, items?: any[] | any) => void;
     /** Checks if a specific item is currently selected */
     isSelected: (item: any) => boolean;
+    /** Directly sets the selected items */
+    setSelected?: (items: any[]) => void;
     /** Determines if selection is disabled for a given item */
     isSelectDisabled?: (item: any) => boolean;
 }

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

@@ -2,9 +2,12 @@ import { FC, ReactNode } from 'react';
 import { TdProps, ThProps, TrProps } from '@patternfly/react-table';
 import { DataViewTableTreeProps } from '../DataViewTableTree';
 import { DataViewTableBasicProps } from '../DataViewTableBasic';
+import { DataViewThResizableProps } from '../DataViewTh/DataViewTh';
 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 +47,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

@@ -14,6 +14,8 @@ export interface DataViewTableBasicProps extends Omit<TableProps, 'onSelect' | '
     bodyStates?: Partial<Record<DataViewState | string, React.ReactNode>>;
     /** Custom OUIA ID */
     ouiaId?: string;
+    /** @hide Indicates if the table is resizable */
+    hasResizableColumns?: boolean;
 }
 export declare const DataViewTableBasic: FC<DataViewTableBasicProps>;
 export default DataViewTableBasic;

package/dist/esm/DataViewTableBasic/DataViewTableBasic.js

@@ -16,7 +16,7 @@ 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, ouiaId = 'DataViewTableBasic', headStates, bodyStates, hasResizableColumns } = _a, props = __rest(_a, ["columns", "rows", "ouiaId", "headStates", "bodyStates", "hasResizableColumns"]);
     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]);
@@ -36,6 +36,6 @@ export const DataViewTableBasic = (_a) => {
                     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 })] })));
+    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 })] })));
 };
 export default DataViewTableBasic;

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;