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

package/dist/esm/DataViewTh/DataViewTh.js

@@ -0,0 +1,215 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useRef, useEffect, Fragment } from 'react';
+import { Th } from '@patternfly/react-table';
+import { Button, getLanguageDirection } from '@patternfly/react-core';
+import { createUseStyles } from 'react-jss';
+import tableCellPaddingBlockEnd from '@patternfly/react-tokens/dist/esm/c_table_cell_PaddingBlockEnd';
+import tableCellPaddingInlineEnd from '@patternfly/react-tokens/dist/esm/c_table_cell_PaddingInlineEnd';
+import globalFontSizeBodyDefault from '@patternfly/react-tokens/dist/esm/t_global_font_size_body_default';
+const ResizeIcon = () => (_jsx("svg", { className: "pf-v6-svg", viewBox: "0 0 1024 1024", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em", children: _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 = createUseStyles({
+    dataViewResizeableTh: {
+        [tableCellPaddingInlineEnd.name]: `calc(${globalFontSizeBodyDefault.var} * 2)`
+    },
+    dataViewResizableButton: {
+        position: 'absolute',
+        insetInlineEnd: `calc(${globalFontSizeBodyDefault.var} / 2)`,
+        insetBlockEnd: tableCellPaddingBlockEnd.var,
+        cursor: 'grab',
+        '&:active': {
+            cursor: 'grabbing'
+        }
+    }
+});
+export const DataViewTh = (_a) => {
+    var { content, resizableProps = {}, hasResizableColumns = false, thProps } = _a, props = __rest(_a, ["content", "resizableProps", "hasResizableColumns", "thProps"]);
+    const thRef = useRef(null);
+    const [width, setWidth] = 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 = 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 = useRef(null);
+    const setInitialVals = useRef(true);
+    const dragOffset = useRef(0);
+    const isResizing = useRef(false);
+    const isInView = 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.');
+    }
+    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);
+            }
+        };
+    }, []);
+    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 = 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 = 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 = useCallback(handleMouseMove, []);
+    const callbackTouchEnd = useCallback(handleTouchEnd, []);
+    const callbackTouchMove = useCallback(handleTouchMove, []);
+    const callbackMouseUp = 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 = 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 = (_jsxs(Fragment, { children: [_jsx("div", { "aria-live": "polite", className: "pf-v6-screen-reader", children: screenReaderText }), _jsx(Button, { ref: resizeButtonRef, variant: "plain", hasNoPadding: true, icon: _jsx(ResizeIcon, {}), onMouseDown: handleMousedown, onKeyDown: handleKeys, onTouchStart: handleTouchStart, "aria-label": resizeButtonAriaLabel, className: classes.dataViewResizableButton })] }));
+    return (_jsx(Th, Object.assign({}, thProps, props, { style: width > 0 ? { minWidth: width } : undefined, ref: thRef, modifier: "truncate", className: dataViewThClassName }, (isResizable && { additionalContent: resizableContent }), { children: content })));
+};
+export default DataViewTh;

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.ts","../src/DataView/DataView.test.tsx","../src/DataView/DataView.tsx","../src/DataView/index.ts","../src/DataViewCheckboxFilter/DataViewCheckboxFilter.test.tsx","../src/DataViewCheckboxFilter/DataViewCheckboxFilter.tsx","../src/DataViewCheckboxFilter/index.ts","../src/DataViewEventsContext/DataViewEventsContext.test.tsx","../src/DataViewEventsContext/DataViewEventsContext.tsx","../src/DataViewEventsContext/index.ts","../src/DataViewFilters/DataViewFilters.test.tsx","../src/DataViewFilters/DataViewFilters.tsx","../src/DataViewFilters/index.tsx","../src/DataViewTable/DataViewTable.test.tsx","../src/DataViewTable/DataViewTable.tsx","../src/DataViewTable/index.ts","../src/DataViewTableBasic/DataViewTableBasic.test.tsx","../src/DataViewTableBasic/DataViewTableBasic.tsx","../src/DataViewTableBasic/index.ts","../src/DataViewTableHead/DataViewTableHead.test.tsx","../src/DataViewTableHead/DataViewTableHead.tsx","../src/DataViewTableHead/index.ts","../src/DataViewTableTree/DataViewTableTree.test.tsx","../src/DataViewTableTree/DataViewTableTree.tsx","../src/DataViewTableTree/index.ts","../src/DataViewTextFilter/DataViewTextFilter.test.tsx","../src/DataViewTextFilter/DataViewTextFilter.tsx","../src/DataViewTextFilter/index.ts","../src/DataViewToolbar/DataViewToolbar.test.tsx","../src/DataViewToolbar/DataViewToolbar.tsx","../src/DataViewToolbar/index.ts","../src/Hooks/filters.test.tsx","../src/Hooks/filters.ts","../src/Hooks/index.ts","../src/Hooks/pagination.test.tsx","../src/Hooks/pagination.ts","../src/Hooks/selection.test.tsx","../src/Hooks/selection.ts","../src/Hooks/sort.test.tsx","../src/Hooks/sort.ts","../src/InternalContext/InternalContext.test.tsx","../src/InternalContext/InternalContext.tsx","../src/InternalContext/index.ts"],"version":"5.9.2"}
+{"root":["../src/index.ts","../src/DataView/DataView.test.tsx","../src/DataView/DataView.tsx","../src/DataView/index.ts","../src/DataViewCheckboxFilter/DataViewCheckboxFilter.test.tsx","../src/DataViewCheckboxFilter/DataViewCheckboxFilter.tsx","../src/DataViewCheckboxFilter/index.ts","../src/DataViewEventsContext/DataViewEventsContext.test.tsx","../src/DataViewEventsContext/DataViewEventsContext.tsx","../src/DataViewEventsContext/index.ts","../src/DataViewFilters/DataViewFilters.test.tsx","../src/DataViewFilters/DataViewFilters.tsx","../src/DataViewFilters/index.tsx","../src/DataViewTable/DataViewTable.test.tsx","../src/DataViewTable/DataViewTable.tsx","../src/DataViewTable/index.ts","../src/DataViewTableBasic/DataViewTableBasic.test.tsx","../src/DataViewTableBasic/DataViewTableBasic.tsx","../src/DataViewTableBasic/index.ts","../src/DataViewTableHead/DataViewTableHead.test.tsx","../src/DataViewTableHead/DataViewTableHead.tsx","../src/DataViewTableHead/index.ts","../src/DataViewTableTree/DataViewTableTree.test.tsx","../src/DataViewTableTree/DataViewTableTree.tsx","../src/DataViewTableTree/index.ts","../src/DataViewTextFilter/DataViewTextFilter.test.tsx","../src/DataViewTextFilter/DataViewTextFilter.tsx","../src/DataViewTextFilter/index.ts","../src/DataViewTh/DataViewTh.tsx","../src/DataViewToolbar/DataViewToolbar.test.tsx","../src/DataViewToolbar/DataViewToolbar.tsx","../src/DataViewToolbar/index.ts","../src/Hooks/filters.test.tsx","../src/Hooks/filters.ts","../src/Hooks/index.ts","../src/Hooks/pagination.test.tsx","../src/Hooks/pagination.ts","../src/Hooks/selection.test.tsx","../src/Hooks/selection.ts","../src/Hooks/sort.test.tsx","../src/Hooks/sort.ts","../src/InternalContext/InternalContext.test.tsx","../src/InternalContext/InternalContext.tsx","../src/InternalContext/index.ts"],"version":"5.9.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-data-view",
-  "version": "6.4.0-prerelease.2",
+  "version": "6.4.0-prerelease.4",
   "description": "Data view used for Red Hat projects.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -32,9 +32,9 @@
   },
   "dependencies": {
     "@patternfly/react-component-groups": "^6.1.0",
-    "@patternfly/react-core": "^6.0.0",
-    "@patternfly/react-icons": "^6.0.0",
-    "@patternfly/react-table": "^6.0.0",
+    "@patternfly/react-core": "6.4.0-prerelease.2",
+    "@patternfly/react-icons": "6.4.0-prerelease.1",
+    "@patternfly/react-table": "6.4.0-prerelease.2",
     "clsx": "^2.1.1",
     "react-jss": "^10.10.0"
   },
@@ -43,9 +43,9 @@
     "react-dom": "^17 || ^18 || ^19"
   },
   "devDependencies": {
-    "@patternfly/documentation-framework": "^6.5.20",
-    "@patternfly/patternfly": "^6.0.0",
-    "@patternfly/react-code-editor": "^6.0.0",
+    "@patternfly/documentation-framework": "^6.24.2",
+    "@patternfly/patternfly": "6.4.0-prerelease.1",
+    "@patternfly/react-code-editor": "6.4.0-prerelease.1",
     "@patternfly/patternfly-a11y": "^5.1.0",
     "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",

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

@@ -0,0 +1,155 @@
+import { FunctionComponent } from 'react';
+import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+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 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
+  }
+];
+
+// you can also pass props to Tr by returning { row: DataViewTd[], props: TrProps } }
+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 ouiaId = 'TableExample';
+
+export const ResizableColumnsExample: FunctionComponent = () => {
+  const onResize = (
+    _e: React.MouseEvent | MouseEvent | React.KeyboardEvent | KeyboardEvent | TouchEvent,
+    id: string | number | undefined,
+    width: number
+  ) => {
+    // eslint-disable-next-line no-console
+    console.log(`resized column id: ${id} width to: ${width.toFixed(0)}px`);
+  };
+
+  const columns: DataViewTh[] = [
+    null,
+    'Repositories',
+    {
+      cell: 'Branches',
+      resizableProps: {
+        isResizable: true,
+        onResize,
+        resizeButtonAriaLabel: 'Resize repositories column'
+      },
+      props: { id: 'repositories' }
+    },
+    {
+      cell: 'Pull requests',
+      resizableProps: {
+        isResizable: true,
+        onResize,
+        resizeButtonAriaLabel: 'Resize pull requests column'
+      },
+      props: { info: { tooltip: 'More information' }, id: 'pull-requests' }
+    },
+    {
+      cell: 'This is a really long title',
+      resizableProps: {
+        isResizable: true,
+        onResize,
+        resizeButtonAriaLabel: 'Resize this is a really long title column'
+      },
+      props: { info: { tooltip: 'More information' }, id: 'this-is-a-really-long-title' }
+    },
+    {
+      cell: 'Last commit',
+      resizableProps: {
+        isResizable: true,
+        onResize,
+        resizeButtonAriaLabel: 'Resize last commit column'
+      },
+      props: { sort: { sortBy: {}, columnIndex: 4 }, id: 'last-commit' }
+    }
+  ];
+
+  return <DataViewTable isResizable aria-label="Repositories table" ouiaId={ouiaId} columns={columns} rows={rows} />;
+};

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

@@ -12,10 +12,19 @@ source: react
 # If you use typescript, the name of the interface to display props for
 # These are found through the sourceProps function provided in patternfly-docs.source.js
 sortValue: 3
-propComponents: ['DataViewTableBasic', 'DataViewTableTree', 'DataViewTrTree', 'DataViewTrObject']
+propComponents:
+  [
+    'DataViewTableBasic',
+    'DataViewTableTree',
+    'DataViewTrTree',
+    'DataViewTrObject',
+    'DataViewTh',
+    'DataViewThResizableProps'
+  ]
 sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Table/Table.md
 ---
-import { FunctionComponent, useMemo } from 'react';
+
+import { FunctionComponent, useMemo, useState } from 'react';
 import { BrowserRouter, useSearchParams } from 'react-router-dom';
 import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter } from '@patternfly/react-core';
 import { CubesIcon, FolderIcon, FolderOpenIcon, LeafIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
@@ -28,7 +37,9 @@ import { DataView, DataViewState } from '@patternfly/react-data-view/dist/dynami
 The **data view table** component renders your data into columns and rows within a [PatternFly table](/components/table) component. You can easily customize and configure the table with these additional [data view components and props](/extensions/data-view/table#props).
 
 ## Configuring rows and columns
+
 To define rows and columns for your table, use these props:
+
 - `columns`: Defines the column heads of the table. Each item in the array can be a `ReactNode` for simple heads, or an object with the following properties:
   - `cell`: Content to display in the column head.
   - `props` (optional): (`ThProps`) to pass to the `<Th>` component, such as `width`, `sort`, and other table head cell properties.
@@ -42,20 +53,38 @@ It is also possible to disable row selection using the `isSelectDisabled` functi
 If you want to have all expandable nodes open on initial load pass the `expandAll` prop to the DataViewTable component
 
 ### Table example
+
 ```js file="./DataViewTableExample.tsx"
 
 ```
 
+### Resizable columns
+
+To allow a column to resize, add `isResizable` to the `DataViewTable` element, and pass `resizableProps` to each applicable header cell. The `resizableProps` object consists of the following fields:
+
+- `isResizable` - indicates that the column is resizable
+- `resizeButtonAriaLabel` - an accessible name for the resizable column's resize button. This must be passed in if the column is resizable.
+- `onResize` - a callback that will return the source event and the new width of the column
+- `width` - a default width value for a column
+- `minWidth` - the minimum width a column may shrink to
+- `increment` - how many pixels the column will move left or right for keyboard navigation
+- `shiftIncrement` - how many pixels the column will move left or right while shift is held for keyboard navigation
+- `screenReaderText` - text that will be announced when a column is resized
+
+```js file="./DataViewTableResizableColumnsExample.tsx"
+
+```
+
 ## Tree table
 
-A tree table includes expandable rows and custom icons for leaf and parent nodes. 
+A tree table includes expandable rows and custom icons for leaf and parent nodes.
 To enable a tree table, pass the `isTreeTable` flag to the `<DataViewTable>` component.
 
-
 Tree table rows have to be defined with following keys:
-  - `row`: Defines the content for each cell in the row.
-  - `id`: Unique identifier for the row that's used for matching selected items.
-  - `children` (optional): Defines the children rows.
+
+- `row`: Defines the content for each cell in the row.
+- `id`: Unique identifier for the row that's used for matching selected items.
+- `children` (optional): Defines the children rows.
 
 To update a row's icon to reflect its expansion state, pass `collapsedIcon`, `expandedIcon`, and `leafIcon` to `<DataViewTable>`.
 
@@ -68,17 +97,21 @@ To disable row selection, pass the `isSelectDisabled` function to `selection` pr
 ```
 
 ## Sorting
+
 The following example demonstrates how to enable sorting functionality within a data view. This implementation supports dynamic sorting by column and persists the sort state in the page's URL via [React Router](https://reactrouter.com/).
 
 ### Sorting example
+
 ```js file="./SortingExample.tsx"
 
 ```
+
 ### Sorting state
 
 The `useDataViewSort` hook manages the sorting state of a data view and provides an easy way to handle sorting logic, such as synchronization with URL parameters and the definition of default sorting behavior.
 
 **Initial values:**
+
 - `initialSort` object to set default `sortBy` and `direction` values:
   - `sortBy`: Key of the initial column to sort.
   - `direction`: Default sorting direction (`asc` or `desc`).
@@ -88,44 +121,47 @@ The `useDataViewSort` hook manages the sorting state of a data view and provides
 - Customizable parameter names for the URL:
   - `sortByParam`: Name of the URL parameter for the column key.
   - `directionParam`: Name of the URL parameter for the sorting direction.
-The `useDataViewSort` hook integrates seamlessly with [React Router](https://reactrouter.com/) to manage the sort state via URL parameters. Alternatively, you can use `URLSearchParams` and `window.history.pushState` APIs, or other routing libraries. If URL synchronization is not configured, the sort state is managed internally within the component.
+    The `useDataViewSort` hook integrates seamlessly with [React Router](https://reactrouter.com/) to manage the sort state via URL parameters. Alternatively, you can use `URLSearchParams` and `window.history.pushState` APIs, or other routing libraries. If URL synchronization is not configured, the sort state is managed internally within the component.
 
 **Return values:**
+
 - `sortBy`: Key of the column currently being sorted.
 - `direction`: Current sorting direction (`asc` or `desc`).
 - `onSort`: Function to handle sorting changes programmatically or via user interaction.
 
 ## States
 
-The data view table allows you to react to the `activeState` of the data view (such as `empty`, `error`, `loading`). You can use the `headStates` and `bodyStates` props to define the table head and body for a given state. 
+The data view table allows you to react to the `activeState` of the data view (such as `empty`, `error`, `loading`). You can use the `headStates` and `bodyStates` props to define the table head and body for a given state.
 
 ### Empty
-When there is no data to render in the data view, you can instead display an empty state. 
 
-You can create your empty state by passing a [PatternFly empty state](/components/empty-state) to the `empty` key of `headStates` or `bodyStates`. 
+When there is no data to render in the data view, you can instead display an empty state.
+
+You can create your empty state by passing a [PatternFly empty state](/components/empty-state) to the `empty` key of `headStates` or `bodyStates`.
 
 ```js file="./DataViewTableEmptyExample.tsx"
 
 ```
 
 ### Error
+
 When there is a data connection or retrieval error, you can display an error state.
 
 The error state will be displayed when the data view `activeState` value is `error`.
 
-You can create your error state by passing either the [component groups extension's error state](/component-groups/error-state) or a [PatternFly empty state](/components/empty-state) to the `error` key of `headStates` or `bodyStates`. 
+You can create your error state by passing either the [component groups extension's error state](/component-groups/error-state) or a [PatternFly empty state](/components/empty-state) to the `error` key of `headStates` or `bodyStates`.
 
 ```js file="./DataViewTableErrorExample.tsx"
 
 ```
 
 ### Loading
+
 To indicate that data is loading, you can display a loading state.
 
 The loading state will be displayed when the data view `activeState` value is `loading`.
 
-You can create your loading state by passing either the [component groups extension's skeleton table](/component-groups/skeleton-table) or a customized [PatternFly empty state](/components/empty-state) to the `loading` key of `headStates` or `bodyStates`. 
-
+You can create your loading state by passing either the [component groups extension's skeleton table](/component-groups/skeleton-table) or a customized [PatternFly empty state](/components/empty-state) to the `loading` key of `headStates` or `bodyStates`.
 
 ```js file="./DataViewTableLoadingExample.tsx"
 

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

@@ -135,7 +135,6 @@ exports[`DataViewCheckboxFilter component should render correctly 1`] = `
                       class="pf-v6-c-label__actions"
                     >
                       <button
-                        aria-disabled="false"
                         aria-label="Close Workspace one"
                         class="pf-v6-c-button pf-m-plain pf-m-no-padding"
                         data-ouia-component-id="OUIA-Generated-Button-plain-1"
@@ -176,7 +175,6 @@ exports[`DataViewCheckboxFilter component should render correctly 1`] = `
           class="pf-v6-c-toolbar__item"
         >
           <button
-            aria-disabled="false"
             class="pf-v6-c-button pf-m-link pf-m-inline"
             data-ouia-component-id="DataViewToolbar-clear-all-filters"
             data-ouia-component-type="PF6/Button"

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

@@ -26,7 +26,6 @@ exports[`DataViewFilters component should render correctly 1`] = `
               class="pf-v6-c-toolbar__toggle"
             >
               <button
-                aria-disabled="false"
                 aria-haspopup="false"
                 aria-label="Show Filters"
                 class="pf-v6-c-button pf-m-plain"
@@ -173,7 +172,6 @@ exports[`DataViewFilters component should render correctly 1`] = `
           class="pf-v6-c-toolbar__item"
         >
           <button
-            aria-disabled="false"
             class="pf-v6-c-button pf-m-link pf-m-inline"
             data-ouia-component-id="DataViewToolbar-clear-all-filters"
             data-ouia-component-type="PF6/Button"