@alaarab/ogrid-react 2.0.9 → 2.0.12

package/dist/esm/components/BaseInlineCellEditor.js

@@ -35,9 +35,9 @@ export const richSelectDropdownStyle = {
     maxHeight: 200,
     overflowY: 'auto',
     background: 'var(--ogrid-bg, #fff)',
-    border: '1px solid var(--ogrid-border, #ccc)',
+    border: '1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12))',
     zIndex: 10,
-    boxShadow: '0 4px 16px rgba(0,0,0,0.2)',
+    boxShadow: 'var(--ogrid-shadow, 0 4px 16px rgba(0,0,0,0.2))',
 };
 export const richSelectOptionStyle = {
     padding: '6px 8px',

package/dist/esm/components/CellErrorBoundary.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 const DEFAULT_FALLBACK_STYLE = {
-    color: '#d32f2f',
+    color: 'var(--ogrid-error, #d32f2f)',
     fontSize: '0.75rem',
     padding: '2px 4px',
 };

package/dist/esm/components/ColumnChooserProps.js

@@ -0,0 +1,6 @@
+/**
+ * Shared props interface for ColumnChooser across all React UI packages.
+ * Each UI package renders its own framework-specific trigger, popover, and checkboxes
+ * but shares this common prop shape.
+ */
+export {};

package/dist/esm/components/ColumnHeaderFilterContent.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const DateFilterContent = ({ tempDateFrom, setTempDateFrom, tempDateTo, setTempDateTo, onApply, onClear, classNames, }) => (_jsxs(_Fragment, { children: [_jsxs("div", { style: { padding: '8px 12px', display: 'flex', flexDirection: 'column', gap: 6 }, children: [_jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 6, fontSize: 12 }, children: ["From:", _jsx("input", { type: "date", value: tempDateFrom, onChange: (e) => setTempDateFrom(e.target.value), style: { flex: 1 } })] }), _jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 6, fontSize: 12 }, children: ["To:", _jsx("input", { type: "date", value: tempDateTo, onChange: (e) => setTempDateTo(e.target.value), style: { flex: 1 } })] })] }), _jsxs("div", { className: classNames?.popoverActions, children: [_jsx("button", { className: classNames?.clearButton, onClick: onClear, disabled: !tempDateFrom && !tempDateTo, children: "Clear" }), _jsx("button", { className: classNames?.applyButton, onClick: onApply, children: "Apply" })] })] }));
+DateFilterContent.displayName = 'DateFilterContent';
+// ---- Utility to extract useColumnHeaderFilterState params from props ----
+export function getColumnHeaderFilterStateParams(props) {
+    return {
+        filterType: props.filterType,
+        isSorted: props.isSorted ?? false,
+        isSortedDescending: props.isSortedDescending ?? false,
+        onSort: props.onSort,
+        selectedValues: props.selectedValues,
+        onFilterChange: props.onFilterChange,
+        options: props.options,
+        isLoadingOptions: props.isLoadingOptions ?? false,
+        textValue: props.textValue ?? '',
+        onTextChange: props.onTextChange,
+        selectedUser: props.selectedUser,
+        onUserChange: props.onUserChange,
+        peopleSearch: props.peopleSearch,
+        dateValue: props.dateValue,
+        onDateChange: props.onDateChange,
+    };
+}
+// ---- Helper to build date filter props from state ----
+export function getDateFilterContentProps(state, classNames) {
+    return {
+        tempDateFrom: state.tempDateFrom,
+        setTempDateFrom: state.setTempDateFrom,
+        tempDateTo: state.tempDateTo,
+        setTempDateTo: state.setTempDateTo,
+        onApply: state.handlers.handleDateApply,
+        onClear: state.handlers.handleDateClear,
+        classNames,
+    };
+}

package/dist/esm/components/ColumnHeaderFilterRenderers.js

@@ -0,0 +1,67 @@
+/**
+ * Shared filter content dispatching for ColumnHeaderFilter across all React UI packages.
+ *
+ * Each UI package provides framework-specific sub-filter components (TextFilterPopover,
+ * MultiSelectFilterPopover, PeopleFilterPopover, date content). This utility dispatches
+ * to the correct renderer based on filterType, eliminating the duplicated if/switch chain
+ * that was previously in each UI package's ColumnHeaderFilter component.
+ */
+/**
+ * Dispatches to the appropriate filter content renderer based on filterType.
+ * Eliminates the duplicated if/switch chain in each UI package's ColumnHeaderFilter.
+ *
+ * @param filterType - The column's filter type
+ * @param state - The result from useColumnHeaderFilterState
+ * @param options - The filter options array (for multiSelect)
+ * @param isLoadingOptions - Whether options are loading
+ * @param selectedUser - The currently selected user (for people filter)
+ * @param renderers - Framework-specific renderer functions
+ * @returns The rendered filter content, or null for unsupported filter types
+ */
+export function renderFilterContent(filterType, state, options, isLoadingOptions, selectedUser, renderers) {
+    if (filterType === 'multiSelect') {
+        return renderers.renderMultiSelect({
+            searchText: state.searchText,
+            onSearchChange: state.setSearchText,
+            options,
+            filteredOptions: state.filteredOptions,
+            selected: state.tempSelected,
+            onOptionToggle: state.handlers.handleCheckboxChange,
+            onSelectAll: state.handlers.handleSelectAll,
+            onClearSelection: state.handlers.handleClearSelection,
+            onApply: state.handlers.handleApplyMultiSelect,
+            isLoading: isLoadingOptions,
+        });
+    }
+    if (filterType === 'text') {
+        return renderers.renderText({
+            value: state.tempTextValue,
+            onValueChange: state.setTempTextValue,
+            onApply: state.handlers.handleTextApply,
+            onClear: state.handlers.handleTextClear,
+        });
+    }
+    if (filterType === 'people') {
+        return renderers.renderPeople({
+            selectedUser,
+            searchText: state.peopleSearchText,
+            onSearchChange: state.setPeopleSearchText,
+            suggestions: state.peopleSuggestions,
+            isLoading: state.isPeopleLoading,
+            onUserSelect: state.handlers.handleUserSelect,
+            onClearUser: state.handlers.handleClearUser,
+            inputRef: state.peopleInputRef,
+        });
+    }
+    if (filterType === 'date') {
+        return renderers.renderDate({
+            tempDateFrom: state.tempDateFrom,
+            setTempDateFrom: state.setTempDateFrom,
+            tempDateTo: state.tempDateTo,
+            setTempDateTo: state.setTempDateTo,
+            onApply: state.handlers.handleDateApply,
+            onClear: state.handlers.handleDateClear,
+        });
+    }
+    return null;
+}

package/dist/esm/components/MarchingAntsOverlay.js

@@ -8,38 +8,9 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * Uses SVG rects positioned via cell data-attribute measurements.
  */
 import { useEffect, useRef, useState, useCallback } from 'react';
+import { measureRange, injectGlobalStyles } from '@alaarab/ogrid-core';
 const MARCHING_ANTS_ANIMATION = { animation: 'ogrid-marching-ants 0.5s linear infinite' };
-// Inject the @keyframes rule once into <head> (deduplicates across multiple OGrid instances / module copies)
-function ensureKeyframes() {
-    if (typeof document === 'undefined')
-        return;
-    if (document.getElementById('ogrid-marching-ants-keyframes'))
-        return;
-    const style = document.createElement('style');
-    style.id = 'ogrid-marching-ants-keyframes';
-    style.textContent =
-        '@keyframes ogrid-marching-ants{to{stroke-dashoffset:-8}}';
-    document.head.appendChild(style);
-}
-/** Measure the bounding rect of a range within a container. */
-function measureRange(container, range, colOffset) {
-    const startGlobalCol = range.startCol + colOffset;
-    const endGlobalCol = range.endCol + colOffset;
-    const topLeft = container.querySelector(`[data-row-index="${range.startRow}"][data-col-index="${startGlobalCol}"]`);
-    const bottomRight = container.querySelector(`[data-row-index="${range.endRow}"][data-col-index="${endGlobalCol}"]`);
-    if (!topLeft || !bottomRight)
-        return null;
-    const cRect = container.getBoundingClientRect();
-    const tlRect = topLeft.getBoundingClientRect();
-    const brRect = bottomRight.getBoundingClientRect();
-    return {
-        top: tlRect.top - cRect.top,
-        left: tlRect.left - cRect.left,
-        width: brRect.right - tlRect.left,
-        height: brRect.bottom - tlRect.top,
-    };
-}
-export function MarchingAntsOverlay({ containerRef, selectionRange, copyRange, cutRange, colOffset, }) {
+export function MarchingAntsOverlay({ containerRef, selectionRange, copyRange, cutRange, colOffset, items, visibleColumns, columnSizingOverrides, columnOrder, }) {
     const [selRect, setSelRect] = useState(null);
     const [clipRect, setClipRect] = useState(null);
     const rafRef = useRef(0);
@@ -53,10 +24,11 @@ export function MarchingAntsOverlay({ containerRef, selectionRange, copyRange, c
         }
         setSelRect(selectionRange ? measureRange(container, selectionRange, colOffset) : null);
         setClipRect(clipRange ? measureRange(container, clipRange, colOffset) : null);
-    }, [selectionRange, clipRange, containerRef, colOffset]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectionRange, clipRange, containerRef, colOffset, items, visibleColumns, columnSizingOverrides, columnOrder]);
     // Inject keyframes on mount
     useEffect(() => {
-        ensureKeyframes();
+        injectGlobalStyles('ogrid-marching-ants-keyframes', '@keyframes ogrid-marching-ants{to{stroke-dashoffset:-8}}');
     }, []);
     // Measure when any range changes; re-measure on resize
     useEffect(() => {
@@ -88,23 +60,32 @@ export function MarchingAntsOverlay({ containerRef, selectionRange, copyRange, c
         selectionRange.startCol === clipRange.startCol &&
         selectionRange.endRow === clipRange.endRow &&
         selectionRange.endCol === clipRange.endCol;
-    return (_jsxs(_Fragment, { children: [selRect && !clipRangeMatchesSel && (_jsx("svg", { style: {
+    // Round to integer pixels so the stroke aligns to the pixel grid and corners connect cleanly
+    const roundRect = (r) => ({
+        top: Math.round(r.top),
+        left: Math.round(r.left),
+        width: Math.round(r.width),
+        height: Math.round(r.height),
+    });
+    const selR = selRect ? roundRect(selRect) : null;
+    const clipR = clipRect ? roundRect(clipRect) : null;
+    return (_jsxs(_Fragment, { children: [selR && !clipRangeMatchesSel && (_jsx("svg", { style: {
                     position: 'absolute',
-                    top: selRect.top,
-                    left: selRect.left,
-                    width: selRect.width,
-                    height: selRect.height,
+                    top: selR.top,
+                    left: selR.left,
+                    width: selR.width,
+                    height: selR.height,
                     pointerEvents: 'none',
                     zIndex: 4,
                     overflow: 'visible',
-                }, "aria-hidden": "true", children: _jsx("rect", { x: "1", y: "1", width: Math.max(0, selRect.width - 2), height: Math.max(0, selRect.height - 2), fill: "none", stroke: "var(--ogrid-selection, #217346)", strokeWidth: "2" }) })), clipRect && (_jsx("svg", { style: {
+                }, "aria-hidden": "true", children: _jsx("rect", { x: "1", y: "1", width: Math.max(0, selR.width - 2), height: Math.max(0, selR.height - 2), fill: "none", stroke: "var(--ogrid-selection, #217346)", strokeWidth: "2", style: { shapeRendering: 'crispEdges' } }) })), clipR && (_jsx("svg", { style: {
                     position: 'absolute',
-                    top: clipRect.top,
-                    left: clipRect.left,
-                    width: clipRect.width,
-                    height: clipRect.height,
+                    top: clipR.top,
+                    left: clipR.left,
+                    width: clipR.width,
+                    height: clipR.height,
                     pointerEvents: 'none',
                     zIndex: 5,
                     overflow: 'visible',
-                }, "aria-hidden": "true", children: _jsx("rect", { x: "1", y: "1", width: Math.max(0, clipRect.width - 2), height: Math.max(0, clipRect.height - 2), fill: "none", stroke: "var(--ogrid-selection, #217346)", strokeWidth: "2", strokeDasharray: "4 4", style: MARCHING_ANTS_ANIMATION }) }))] }));
+                }, "aria-hidden": "true", children: _jsx("rect", { x: "1", y: "1", width: Math.max(0, clipR.width - 2), height: Math.max(0, clipR.height - 2), fill: "none", stroke: "var(--ogrid-selection, #217346)", strokeWidth: "2", strokeDasharray: "4 4", style: { ...MARCHING_ANTS_ANIMATION, shapeRendering: 'crispEdges' } }) }))] }));
 }

package/dist/esm/components/PaginationControlsProps.js

@@ -0,0 +1,6 @@
+/**
+ * Shared props interface for PaginationControls across all React UI packages.
+ * Each UI package renders its own framework-specific buttons, selects, and layout
+ * but shares this common prop shape.
+ */
+export {};

package/dist/esm/constants/domHelpers.js

@@ -0,0 +1,16 @@
+/**
+ * Module-scope stable constants shared across all React UI DataGridTable implementations.
+ * Avoid per-render allocations by keeping these at module scope.
+ */
+/** Root container style for the DataGridTable (flex column layout). */
+export const GRID_ROOT_STYLE = { position: 'relative', flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' };
+/** Applied to cells that support editing — shows the cell cursor. */
+export const CURSOR_CELL_STYLE = { cursor: 'cell' };
+/** Minimum size for popover anchor elements. */
+export const POPOVER_ANCHOR_STYLE = { minHeight: '100%', minWidth: 40 };
+/** Prevents the default browser action for mouse events. */
+export const PREVENT_DEFAULT = (e) => { e.preventDefault(); };
+/** No-operation function. */
+export const NOOP = () => { };
+/** Stops event propagation (e.g. click on checkbox inside a row). */
+export const STOP_PROPAGATION = (e) => { e.stopPropagation(); };

package/dist/esm/hooks/index.js

@@ -27,3 +27,5 @@ export { useTableLayout } from './useTableLayout';
 export { useColumnReorder } from './useColumnReorder';
 export { useVirtualScroll } from './useVirtualScroll';
 export { useLatestRef } from './useLatestRef';
+export { usePaginationControls } from './usePaginationControls';
+export { useDataGridTableOrchestration } from './useDataGridTableOrchestration';

package/dist/esm/hooks/useColumnHeaderMenuState.js

@@ -1,10 +1,11 @@
 import { useState, useCallback } from 'react';
+import { measureColumnContentWidth } from '../utils';
 /**
- * Manages state for the column header menu (pin left/right/unpin actions).
+ * Manages state for the column header menu (pin, sort, autosize actions).
  * Tracks which column's menu is open, anchor element, and action handlers.
  */
 export function useColumnHeaderMenuState(params) {
-    const { pinnedColumns, onPinColumn, onUnpinColumn } = params;
+    const { pinnedColumns, onPinColumn, onUnpinColumn, sortBy, sortDirection, onColumnSort, onColumnResized, onAutosizeColumn, columns, data: _data, getRowId: _getRowId, } = params;
     const [isOpen, setIsOpen] = useState(false);
     const [openForColumn, setOpenForColumn] = useState(null);
     const [anchorElement, setAnchorElement] = useState(null);
@@ -22,6 +23,10 @@ export function useColumnHeaderMenuState(params) {
     const canPinLeft = currentPinState !== 'left';
     const canPinRight = currentPinState !== 'right';
     const canUnpin = !!currentPinState;
+    const currentColumn = columns.find((c) => c.columnId === openForColumn);
+    const currentSort = openForColumn === sortBy ? sortDirection : null;
+    const isSortable = currentColumn?.sortable !== false;
+    const isResizable = currentColumn?.resizable !== false;
     const handlePinLeft = useCallback(() => {
         if (openForColumn && canPinLeft) {
             onPinColumn(openForColumn, 'left');
@@ -40,6 +45,43 @@ export function useColumnHeaderMenuState(params) {
             close();
         }
     }, [openForColumn, canUnpin, onUnpinColumn, close]);
+    const handleSortAsc = useCallback(() => {
+        if (openForColumn && isSortable) {
+            onColumnSort(openForColumn, 'asc');
+            close();
+        }
+    }, [openForColumn, isSortable, onColumnSort, close]);
+    const handleSortDesc = useCallback(() => {
+        if (openForColumn && isSortable) {
+            onColumnSort(openForColumn, 'desc');
+            close();
+        }
+    }, [openForColumn, isSortable, onColumnSort, close]);
+    const handleClearSort = useCallback(() => {
+        if (openForColumn && isSortable) {
+            onColumnSort(openForColumn, null);
+            close();
+        }
+    }, [openForColumn, isSortable, onColumnSort, close]);
+    const handleAutosizeThis = useCallback(() => {
+        const resizer = onAutosizeColumn ?? onColumnResized;
+        if (!openForColumn || !resizer || !isResizable)
+            return;
+        const col = columns.find((c) => c.columnId === openForColumn);
+        resizer(openForColumn, measureColumnContentWidth(openForColumn, col?.minWidth));
+        close();
+    }, [openForColumn, onAutosizeColumn, onColumnResized, isResizable, columns, close]);
+    const handleAutosizeAll = useCallback(() => {
+        const resizer = onAutosizeColumn ?? onColumnResized;
+        if (!resizer)
+            return;
+        columns.forEach((col) => {
+            if (col.resizable === false)
+                return;
+            resizer(col.columnId, measureColumnContentWidth(col.columnId, col.minWidth));
+        });
+        close();
+    }, [columns, onAutosizeColumn, onColumnResized, close]);
     return {
         isOpen,
         openForColumn,
@@ -49,8 +91,16 @@ export function useColumnHeaderMenuState(params) {
         handlePinLeft,
         handlePinRight,
         handleUnpin,
+        handleSortAsc,
+        handleSortDesc,
+        handleClearSort,
+        handleAutosizeThis,
+        handleAutosizeAll,
         canPinLeft,
         canPinRight,
         canUnpin,
+        currentSort,
+        isSortable,
+        isResizable,
     };
 }

package/dist/esm/hooks/useColumnResize.js

@@ -36,6 +36,26 @@ export function useColumnResize({ columnSizingOverrides, setColumnSizingOverride
                 ?? col.defaultWidth
                 ?? defaultWidth;
         let latestWidth = startWidth;
+        // Lock all column widths to their current DOM widths on first resize.
+        // With table-layout:auto, resizing one column causes the browser to compress others.
+        // Snapshotting all widths prevents this — only the dragged column changes.
+        const thead = thEl?.closest('thead');
+        if (thead) {
+            const allThs = thead.querySelectorAll('th[data-column-id]');
+            if (allThs.length > 0) {
+                setColumnSizingOverrides((prev) => {
+                    const next = { ...prev };
+                    allThs.forEach((th) => {
+                        const colId = th.dataset.columnId;
+                        if (colId && !next[colId]) {
+                            next[colId] = { widthPx: th.getBoundingClientRect().width };
+                        }
+                    });
+                    next[columnId] = { widthPx: startWidth };
+                    return next;
+                });
+            }
+        }
         // Lock cursor and prevent text selection during drag
         const prevCursor = document.body.style.cursor;
         const prevUserSelect = document.body.style.userSelect;
@@ -73,6 +93,15 @@ export function useColumnResize({ columnSizingOverrides, setColumnSizingOverride
         const onUp = () => {
             cleanup();
             flushWidth();
+            // Remove any rogue :focus-visible outlines that appeared during the drag.
+            // Re-focus the grid wrapper so keyboard navigation still works.
+            const wrapper = thEl?.closest('[tabindex]');
+            if (wrapper) {
+                wrapper.focus({ preventScroll: true });
+            }
+            else if (document.activeElement instanceof HTMLElement) {
+                document.activeElement.blur();
+            }
             if (onColumnResizedRef.current) {
                 onColumnResizedRef.current(columnId, latestWidth);
             }

package/dist/esm/hooks/useDataGridState.js

@@ -1,5 +1,6 @@
-import { useMemo, useCallback, useState } from 'react';
+import { useMemo, useCallback, useState, useLayoutEffect } from 'react';
 import { flattenColumns, getDataGridStatusBarConfig, parseValue, computeAggregations } from '../utils';
+import { CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH } from '@alaarab/ogrid-core';
 import { useRowSelection } from './useRowSelection';
 import { useCellEditing } from './useCellEditing';
 import { useActiveCell } from './useActiveCell';
@@ -150,11 +151,48 @@ export function useDataGridState(params) {
         pinnedColumns,
         onColumnPinned,
     });
-    const headerMenuResult = useColumnHeaderMenuState({
-        pinnedColumns: pinningResult.pinnedColumns,
-        onPinColumn: pinningResult.pinColumn,
-        onUnpinColumn: pinningResult.unpinColumn,
-    });
+    // Measure actual column widths from the DOM for accurate pinning offsets.
+    // With table-layout: auto, rendered widths can exceed declared minimums.
+    const [measuredColumnWidths, setMeasuredColumnWidths] = useState({});
+    useLayoutEffect(() => {
+        const wrapper = wrapperRef.current;
+        if (!wrapper)
+            return;
+        const headerCells = wrapper.querySelectorAll('th[data-column-id]');
+        if (headerCells.length === 0)
+            return;
+        const measured = {};
+        headerCells.forEach((cell) => {
+            const colId = cell.getAttribute('data-column-id');
+            if (colId)
+                measured[colId] = cell.offsetWidth;
+        });
+        setMeasuredColumnWidths((prev) => {
+            // Only update if widths actually changed to avoid render loops
+            for (const key in measured) {
+                if (prev[key] !== measured[key])
+                    return measured;
+            }
+            if (Object.keys(prev).length !== Object.keys(measured).length)
+                return measured;
+            return prev;
+        });
+        // Re-measure when columns, container size, or resize overrides change
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [visibleCols, containerWidth, columnSizingOverrides]);
+    // Build column width map for pinning offset computation
+    const columnWidthMap = useMemo(() => {
+        const map = {};
+        for (const col of visibleCols) {
+            const override = columnSizingOverrides[col.columnId];
+            map[col.columnId] = override
+                ? override.widthPx
+                : (measuredColumnWidths[col.columnId] ?? col.idealWidth ?? col.defaultWidth ?? col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH);
+        }
+        return map;
+    }, [visibleCols, columnSizingOverrides, measuredColumnWidths]);
+    const leftOffsets = useMemo(() => pinningResult.computeLeftOffsets(visibleCols, columnWidthMap, DEFAULT_MIN_COLUMN_WIDTH, hasCheckboxCol, CHECKBOX_COLUMN_WIDTH), [pinningResult, visibleCols, columnWidthMap, hasCheckboxCol]);
+    const rightOffsets = useMemo(() => pinningResult.computeRightOffsets(visibleCols, columnWidthMap, DEFAULT_MIN_COLUMN_WIDTH), [pinningResult, visibleCols, columnWidthMap]);
     const aggregation = useMemo(() => computeAggregations(items, visibleCols, cellSelection ? selectionRange : null), [items, visibleCols, selectionRange, cellSelection]);
     const statusBarConfig = useMemo(() => {
         const base = getDataGridStatusBarConfig(statusBar, items.length, selectedRowIds.size);
@@ -172,9 +210,27 @@ export function useDataGridState(params) {
     const onFilterChangeRef = useLatestRef(onFilterChange);
     const peopleSearchRef = useLatestRef(peopleSearch);
     // Stable callback wrappers that delegate to refs
-    const stableOnColumnSort = useCallback((columnKey) => onColumnSortRef.current?.(columnKey), 
+    const stableOnColumnSort = useCallback((columnKey, direction) => onColumnSortRef.current?.(columnKey, direction), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
+    // Autosize callback — updates internal column sizing state + notifies external listener
+    const handleAutosizeColumn = useCallback((columnId, width) => {
+        setColumnSizingOverrides((prev) => ({ ...prev, [columnId]: { widthPx: width } }));
+        onColumnResized?.(columnId, width);
+    }, [setColumnSizingOverrides, onColumnResized]);
+    const headerMenuResult = useColumnHeaderMenuState({
+        pinnedColumns: pinningResult.pinnedColumns,
+        onPinColumn: pinningResult.pinColumn,
+        onUnpinColumn: pinningResult.unpinColumn,
+        sortBy,
+        sortDirection,
+        onColumnSort: stableOnColumnSort,
+        onColumnResized,
+        onAutosizeColumn: handleAutosizeColumn,
+        columns: flatColumns,
+        data: items,
+        getRowId: getRowId,
+    });
     const stableOnFilterChange = useCallback((...args) => onFilterChangeRef.current?.(...args), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
@@ -326,8 +382,8 @@ export function useDataGridState(params) {
         pinColumn: pinningResult.pinColumn,
         unpinColumn: pinningResult.unpinColumn,
         isPinned: pinningResult.isPinned,
-        computeLeftOffsets: pinningResult.computeLeftOffsets,
-        computeRightOffsets: pinningResult.computeRightOffsets,
+        leftOffsets,
+        rightOffsets,
         headerMenu: {
             isOpen: headerMenuResult.isOpen,
             openForColumn: headerMenuResult.openForColumn,
@@ -337,17 +393,28 @@ export function useDataGridState(params) {
             handlePinLeft: headerMenuResult.handlePinLeft,
             handlePinRight: headerMenuResult.handlePinRight,
             handleUnpin: headerMenuResult.handleUnpin,
+            handleSortAsc: headerMenuResult.handleSortAsc,
+            handleSortDesc: headerMenuResult.handleSortDesc,
+            handleClearSort: headerMenuResult.handleClearSort,
+            handleAutosizeThis: headerMenuResult.handleAutosizeThis,
+            handleAutosizeAll: headerMenuResult.handleAutosizeAll,
             canPinLeft: headerMenuResult.canPinLeft,
             canPinRight: headerMenuResult.canPinRight,
             canUnpin: headerMenuResult.canUnpin,
+            currentSort: headerMenuResult.currentSort,
+            isSortable: headerMenuResult.isSortable,
+            isResizable: headerMenuResult.isResizable,
         },
     }), [
         pinningResult.pinnedColumns, pinningResult.pinColumn, pinningResult.unpinColumn,
-        pinningResult.isPinned, pinningResult.computeLeftOffsets, pinningResult.computeRightOffsets,
+        pinningResult.isPinned, leftOffsets, rightOffsets,
         headerMenuResult.isOpen, headerMenuResult.openForColumn, headerMenuResult.anchorElement,
         headerMenuResult.open, headerMenuResult.close, headerMenuResult.handlePinLeft,
         headerMenuResult.handlePinRight, headerMenuResult.handleUnpin,
+        headerMenuResult.handleSortAsc, headerMenuResult.handleSortDesc, headerMenuResult.handleClearSort,
+        headerMenuResult.handleAutosizeThis, headerMenuResult.handleAutosizeAll,
         headerMenuResult.canPinLeft, headerMenuResult.canPinRight, headerMenuResult.canUnpin,
+        headerMenuResult.currentSort, headerMenuResult.isSortable, headerMenuResult.isResizable,
     ]);
     return {
         layout: layoutState,