@alaarab/ogrid-react 2.0.11 → 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

@@ -60,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

@@ -28,3 +28,4 @@ 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, sort, autosize actions).
  * Tracks which column's menu is open, anchor element, and action handlers.
  */
 export function useColumnHeaderMenuState(params) {
-    const { pinnedColumns, onPinColumn, onUnpinColumn, sortBy, sortDirection, onColumnSort, onColumnResized, columns, data: _data, getRowId: _getRowId, } = 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);
@@ -46,54 +47,41 @@ export function useColumnHeaderMenuState(params) {
     }, [openForColumn, canUnpin, onUnpinColumn, close]);
     const handleSortAsc = useCallback(() => {
         if (openForColumn && isSortable) {
-            onColumnSort(openForColumn);
+            onColumnSort(openForColumn, 'asc');
             close();
         }
     }, [openForColumn, isSortable, onColumnSort, close]);
     const handleSortDesc = useCallback(() => {
         if (openForColumn && isSortable) {
-            onColumnSort(openForColumn);
+            onColumnSort(openForColumn, 'desc');
             close();
         }
     }, [openForColumn, isSortable, onColumnSort, close]);
     const handleClearSort = useCallback(() => {
         if (openForColumn && isSortable) {
-            onColumnSort(openForColumn);
+            onColumnSort(openForColumn, null);
             close();
         }
     }, [openForColumn, isSortable, onColumnSort, close]);
     const handleAutosizeThis = useCallback(() => {
-        if (!openForColumn || !onColumnResized || !isResizable)
+        const resizer = onAutosizeColumn ?? onColumnResized;
+        if (!openForColumn || !resizer || !isResizable)
             return;
-        // Measure column content width
-        const cells = document.querySelectorAll(`[data-column-id="${openForColumn}"]`);
-        let maxWidth = 100; // Minimum width
-        cells.forEach((cell) => {
-            const textContent = cell.textContent || '';
-            // Rough estimate: 8px per character + 32px padding
-            const estimatedWidth = Math.min(textContent.length * 8 + 32, 500);
-            maxWidth = Math.max(maxWidth, estimatedWidth);
-        });
-        onColumnResized(openForColumn, maxWidth);
+        const col = columns.find((c) => c.columnId === openForColumn);
+        resizer(openForColumn, measureColumnContentWidth(openForColumn, col?.minWidth));
         close();
-    }, [openForColumn, onColumnResized, isResizable, close]);
+    }, [openForColumn, onAutosizeColumn, onColumnResized, isResizable, columns, close]);
     const handleAutosizeAll = useCallback(() => {
-        if (!onColumnResized)
+        const resizer = onAutosizeColumn ?? onColumnResized;
+        if (!resizer)
             return;
         columns.forEach((col) => {
             if (col.resizable === false)
                 return;
-            const cells = document.querySelectorAll(`[data-column-id="${col.columnId}"]`);
-            let maxWidth = 100;
-            cells.forEach((cell) => {
-                const textContent = cell.textContent || '';
-                const estimatedWidth = Math.min(textContent.length * 8 + 32, 500);
-                maxWidth = Math.max(maxWidth, estimatedWidth);
-            });
-            onColumnResized(col.columnId, maxWidth);
+            resizer(col.columnId, measureColumnContentWidth(col.columnId, col.minWidth));
         });
         close();
-    }, [columns, onColumnResized, close]);
+    }, [columns, onAutosizeColumn, onColumnResized, close]);
     return {
         isOpen,
         openForColumn,

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,6 +151,48 @@ export function useDataGridState(params) {
         pinnedColumns,
         onColumnPinned,
     });
+    // 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);
@@ -167,9 +210,14 @@ 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,
@@ -178,6 +226,7 @@ export function useDataGridState(params) {
         sortDirection,
         onColumnSort: stableOnColumnSort,
         onColumnResized,
+        onAutosizeColumn: handleAutosizeColumn,
         columns: flatColumns,
         data: items,
         getRowId: getRowId,
@@ -333,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,
@@ -358,7 +407,7 @@ export function useDataGridState(params) {
         },
     }), [
         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,

package/dist/esm/hooks/useDataGridTableOrchestration.js

@@ -0,0 +1,200 @@
+import { useCallback, useRef, useMemo } from 'react';
+import { useDataGridState } from './useDataGridState';
+import { useColumnResize } from './useColumnResize';
+import { useColumnReorder } from './useColumnReorder';
+import { useVirtualScroll } from './useVirtualScroll';
+import { useLatestRef } from './useLatestRef';
+import { buildHeaderRows } from '../utils';
+// ---------------------------------------------------------------------------
+// Hook
+// ---------------------------------------------------------------------------
+/**
+ * Shared orchestration hook for DataGridTable.
+ *
+ * Encapsulates all state management and computation that is identical across
+ * Radix, Fluent, and Material DataGridTable implementations. Each UI package
+ * calls this hook, then renders its own framework-specific JSX using the
+ * returned values.
+ */
+export function useDataGridTableOrchestration(params) {
+    const { props } = params;
+    // ── Refs ────────────────────────────────────────────────────────────────
+    const wrapperRef = useRef(null);
+    const tableContainerRef = useRef(null);
+    const lastMouseShiftRef = useRef(false);
+    // ── Core state ──────────────────────────────────────────────────────────
+    const state = useDataGridState({ props, wrapperRef });
+    const { layout, rowSelection: rowSel, editing, interaction, contextMenu: ctxMenu, viewModels, pinning } = state;
+    const { visibleCols: visibleColsTyped, totalColCount, hasCheckboxCol, hasRowNumbersCol, colOffset, containerWidth, minTableWidth, desiredTableWidth, columnSizingOverrides, setColumnSizingOverrides, } = layout;
+    const visibleCols = visibleColsTyped;
+    const { selectedRowIds, updateSelection, handleRowCheckboxChange, handleSelectAll, allSelected, someSelected } = rowSel;
+    const { editingCell, setEditingCell, pendingEditorValue, setPendingEditorValue, commitCellEdit, cancelPopoverEdit, popoverAnchorEl, setPopoverAnchorEl } = editing;
+    const { setActiveCell, handleCellMouseDown, selectionRange, hasCellSelection, handleGridKeyDown, handleFillHandleMouseDown, handleCopy, handleCut, handlePaste, cutRange, copyRange, canUndo, canRedo, onUndo, onRedo, isDragging } = interaction;
+    const { menuPosition, handleCellContextMenu, closeContextMenu } = ctxMenu;
+    const { headerFilterInput, cellDescriptorInput, statusBarConfig, showEmptyInGrid, onCellError } = viewModels;
+    const { headerMenu } = pinning;
+    const handlePasteVoid = useCallback(() => { void handlePaste(); }, [handlePaste]);
+    // ── Props destructuring ─────────────────────────────────────────────────
+    const { items, columns, getRowId, emptyState, layoutMode = 'fill', rowSelection = 'none', freezeRows, freezeCols, suppressHorizontalScroll, isLoading = false, loadingMessage = 'Loading\u2026', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, visibleColumns, columnOrder, onColumnOrderChange, columnReorder, virtualScroll, density = 'normal', pinnedColumns, currentPage = 1, pageSize: propPageSize = 25, } = props;
+    // ── Derived values ──────────────────────────────────────────────────────
+    const rowNumberOffset = hasRowNumbersCol ? (currentPage - 1) * propPageSize : 0;
+    const headerRows = useMemo(() => buildHeaderRows(columns, visibleColumns), [columns, visibleColumns]);
+    const allowOverflowX = !suppressHorizontalScroll && containerWidth > 0 && (minTableWidth > containerWidth || desiredTableWidth > containerWidth);
+    const fitToContent = layoutMode === 'content';
+    // ── Column resize ──────────────────────────────────────────────────────
+    const { handleResizeStart, getColumnWidth } = useColumnResize({
+        columnSizingOverrides,
+        setColumnSizingOverrides,
+    });
+    // ── Column reorder ─────────────────────────────────────────────────────
+    const { isDragging: isReorderDragging, dropIndicatorX, handleHeaderMouseDown } = useColumnReorder({
+        columns: visibleCols,
+        columnOrder,
+        onColumnOrderChange,
+        enabled: columnReorder === true,
+        pinnedColumns,
+        wrapperRef,
+    });
+    // ── Virtual scroll ─────────────────────────────────────────────────────
+    const virtualScrollEnabled = virtualScroll?.enabled === true;
+    const virtualRowHeight = virtualScroll?.rowHeight ?? 36;
+    const { visibleRange } = useVirtualScroll({
+        totalRows: items.length,
+        rowHeight: virtualRowHeight,
+        enabled: virtualScrollEnabled,
+        overscan: virtualScroll?.overscan,
+        containerRef: wrapperRef,
+    });
+    // ── Memoized callback groups ───────────────────────────────────────────
+    const editCallbacks = useMemo(() => ({ commitCellEdit, setEditingCell, setPendingEditorValue, cancelPopoverEdit }), [commitCellEdit, setEditingCell, setPendingEditorValue, cancelPopoverEdit]);
+    const interactionHandlers = useMemo(() => ({ handleCellMouseDown, setActiveCell, setEditingCell, handleCellContextMenu }), [handleCellMouseDown, setActiveCell, setEditingCell, handleCellContextMenu]);
+    // ── Stable refs for volatile state ─────────────────────────────────────
+    const cellDescriptorInputRef = useLatestRef(cellDescriptorInput);
+    const pendingEditorValueRef = useLatestRef(pendingEditorValue);
+    const popoverAnchorElRef = useLatestRef(popoverAnchorEl);
+    const selectedRowIdsRef = useLatestRef(selectedRowIds);
+    // ── Stable row-click handler ───────────────────────────────────────────
+    const handleSingleRowClick = useCallback((e) => {
+        if (rowSelection !== 'single')
+            return;
+        const rowId = e.currentTarget.dataset.rowId;
+        if (!rowId)
+            return;
+        const ids = selectedRowIdsRef.current;
+        updateSelection(ids.has(rowId) ? new Set() : new Set([rowId]));
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- selectedRowIdsRef is a stable ref
+    }, [rowSelection, updateSelection]);
+    // ── Return ─────────────────────────────────────────────────────────────
+    return {
+        // Refs
+        wrapperRef,
+        tableContainerRef,
+        lastMouseShiftRef,
+        // Full state sub-objects
+        state,
+        layout,
+        rowSel,
+        editing,
+        interaction,
+        ctxMenu,
+        viewModels,
+        pinning,
+        // Column resize
+        handleResizeStart,
+        getColumnWidth,
+        // Column reorder
+        isReorderDragging,
+        dropIndicatorX,
+        handleHeaderMouseDown,
+        // Virtual scroll
+        virtualScrollEnabled,
+        virtualRowHeight,
+        visibleRange,
+        // Derived from props
+        items,
+        columns,
+        getRowId,
+        emptyState,
+        layoutMode,
+        rowSelection,
+        freezeRows,
+        freezeCols,
+        suppressHorizontalScroll,
+        isLoading,
+        loadingMessage,
+        ariaLabel,
+        ariaLabelledBy,
+        visibleColumns,
+        columnOrder,
+        columnReorder,
+        density,
+        pinnedColumns,
+        currentPage,
+        propPageSize,
+        // Computed values
+        rowNumberOffset,
+        headerRows,
+        allowOverflowX,
+        fitToContent,
+        // Memoized callback groups
+        editCallbacks,
+        interactionHandlers,
+        // Stable refs for volatile state
+        cellDescriptorInputRef,
+        pendingEditorValueRef,
+        popoverAnchorElRef,
+        selectedRowIdsRef,
+        // Convenience handlers
+        handleSingleRowClick,
+        handlePasteVoid,
+        // Layout-derived references
+        visibleCols,
+        totalColCount,
+        hasCheckboxCol,
+        hasRowNumbersCol,
+        colOffset,
+        containerWidth,
+        minTableWidth,
+        desiredTableWidth,
+        columnSizingOverrides,
+        setColumnSizingOverrides,
+        // Row selection shortcuts
+        selectedRowIds,
+        updateSelection,
+        handleRowCheckboxChange,
+        handleSelectAll,
+        allSelected,
+        someSelected,
+        // Editing shortcuts
+        editingCell,
+        setPopoverAnchorEl,
+        cancelPopoverEdit,
+        // Interaction shortcuts
+        setActiveCell,
+        selectionRange,
+        hasCellSelection,
+        handleGridKeyDown,
+        handleFillHandleMouseDown,
+        handleCopy,
+        handleCut,
+        cutRange,
+        copyRange,
+        canUndo,
+        canRedo,
+        onUndo,
+        onRedo,
+        isDragging,
+        // Context menu shortcuts
+        menuPosition,
+        handleCellContextMenu,
+        closeContextMenu,
+        // ViewModel shortcuts
+        headerFilterInput,
+        cellDescriptorInput,
+        statusBarConfig,
+        showEmptyInGrid,
+        onCellError,
+        // Pinning shortcuts
+        headerMenu,
+    };
+}

package/dist/esm/hooks/useOGrid.js

@@ -1,5 +1,5 @@
 import { useMemo, useCallback, useState, useEffect, useRef, useImperativeHandle, } from 'react';
-import { mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, flattenColumns, processClientSideData, } from '../utils';
+import { mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, flattenColumns, processClientSideData, computeNextSortState, } from '../utils';
 import { useFilterOptions } from './useFilterOptions';
 import { useSideBarState } from './useSideBarState';
 const DEFAULT_PAGE_SIZE = 25;
@@ -72,11 +72,8 @@ export function useOGrid(props, ref) {
             setInternalVisibleColumns(cols);
         onVisibleColumnsChange?.(cols);
     }, [controlledVisibleColumns, onVisibleColumnsChange]);
-    const handleSort = useCallback((columnKey) => {
-        setSort({
-            field: columnKey,
-            direction: sort.field === columnKey && sort.direction === 'asc' ? 'desc' : 'asc',
-        });
+    const handleSort = useCallback((columnKey, direction) => {
+        setSort(computeNextSortState(sort, columnKey, direction));
     }, [sort, setSort]);
     /** Single filter change handler — wraps discriminated FilterValue into mergeFilter. */
     const handleFilterChange = useCallback((key, value) => {

package/dist/esm/index.js

@@ -2,7 +2,9 @@
 export { CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, GRID_BORDER_RADIUS, } from '@alaarab/ogrid-core';
 export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './types';
 // Hooks
-export { useFilterOptions, useOGrid, useActiveCell, useCellEditing, useContextMenu, useCellSelection, useClipboard, useRowSelection, useKeyboardNavigation, useUndoRedo, useDebounce, useFillHandle, useDataGridState, useColumnHeaderFilterState, useTextFilterState, useMultiSelectFilterState, usePeopleFilterState, useDateFilterState, useColumnChooserState, useInlineCellEditorState, useColumnResize, useRichSelectState, useSideBarState, useTableLayout, useColumnReorder, useVirtualScroll, useLatestRef, usePaginationControls, } from './hooks';
+export { useFilterOptions, useOGrid, useActiveCell, useCellEditing, useContextMenu, useCellSelection, useClipboard, useRowSelection, useKeyboardNavigation, useUndoRedo, useDebounce, useFillHandle, useDataGridState, useColumnHeaderFilterState, useTextFilterState, useMultiSelectFilterState, usePeopleFilterState, useDateFilterState, useColumnChooserState, useInlineCellEditorState, useColumnResize, useRichSelectState, useSideBarState, useTableLayout, useColumnReorder, useVirtualScroll, useLatestRef, usePaginationControls, useDataGridTableOrchestration, } from './hooks';
+// Constants
+export { GRID_ROOT_STYLE, CURSOR_CELL_STYLE, POPOVER_ANCHOR_STYLE, PREVENT_DEFAULT, NOOP, STOP_PROPAGATION, } from './constants/domHelpers';
 // Components
 export { OGridLayout } from './components/OGridLayout';
 export { StatusBar } from './components/StatusBar';
@@ -12,5 +14,8 @@ export { MarchingAntsOverlay } from './components/MarchingAntsOverlay';
 export { SideBar } from './components/SideBar';
 export { CellErrorBoundary } from './components/CellErrorBoundary';
 export { EmptyState } from './components/EmptyState';
+export { DateFilterContent, getColumnHeaderFilterStateParams, getDateFilterContentProps, } from './components/ColumnHeaderFilterContent';
 // Utilities
 export { escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, getCellValue, flattenColumns, buildHeaderRows, getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, getStatusBarParts, getDataGridStatusBarConfig, GRID_CONTEXT_MENU_ITEMS, getContextMenuHandlers, formatShortcut, getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, getHeaderFilterConfig, getCellRenderDescriptor, isRowInRange, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, processClientSideData, areGridRowPropsEqual, } from './utils';
+// Shared component props & renderers (for UI packages to consume)
+export { renderFilterContent } from './components/ColumnHeaderFilterRenderers';

package/dist/esm/utils/index.js

@@ -1,5 +1,5 @@
 // Shared utilities re-exported from core
-export { escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, getCellValue, flattenColumns, buildHeaderRows, getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, getStatusBarParts, getDataGridStatusBarConfig, getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, GRID_CONTEXT_MENU_ITEMS, getContextMenuHandlers, formatShortcut, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, processClientSideData, } from '@alaarab/ogrid-core';
+export { escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, getCellValue, flattenColumns, buildHeaderRows, getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, getStatusBarParts, getDataGridStatusBarConfig, getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, GRID_CONTEXT_MENU_ITEMS, getContextMenuHandlers, formatShortcut, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, processClientSideData, computeNextSortState, measureColumnContentWidth, AUTOSIZE_EXTRA_PX, AUTOSIZE_MAX_PX, } from '@alaarab/ogrid-core';
 // View model utilities (re-exported from core + React-specific getCellInteractionProps)
 export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, } from './dataGridViewModel';
 export { areGridRowPropsEqual, isRowInRange } from './gridRowComparator';

package/dist/types/components/ColumnChooserProps.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ */
+import type { IColumnDefinition } from '../types/columnTypes';
+export interface IColumnChooserProps {
+    columns: IColumnDefinition[];
+    visibleColumns: Set<string>;
+    onVisibilityChange: (columnKey: string, visible: boolean) => void;
+    className?: string;
+}

package/dist/types/components/ColumnHeaderFilterContent.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Shared filter content rendering for ColumnHeaderFilter across all React UI packages.
+ * Each UI package provides its own popover wrapper + trigger; this component renders
+ * the inner filter content (text, multiselect, people, date) given the shared state
+ * from useColumnHeaderFilterState.
+ */
+import * as React from 'react';
+import type { ColumnFilterType, IDateFilterValue } from '../types/columnTypes';
+import type { UserLike } from '../types/dataGridTypes';
+import type { UseColumnHeaderFilterStateResult } from '../hooks/useColumnHeaderFilterState';
+export interface IColumnHeaderFilterProps {
+    columnKey: string;
+    columnName: string;
+    filterType: ColumnFilterType;
+    isSorted?: boolean;
+    isSortedDescending?: boolean;
+    onSort?: () => void;
+    selectedValues?: string[];
+    onFilterChange?: (values: string[]) => void;
+    options?: string[];
+    isLoadingOptions?: boolean;
+    textValue?: string;
+    onTextChange?: (value: string) => void;
+    selectedUser?: UserLike;
+    onUserChange?: (user: UserLike | undefined) => void;
+    peopleSearch?: (query: string) => Promise<UserLike[]>;
+    dateValue?: IDateFilterValue;
+    onDateChange?: (value: IDateFilterValue | undefined) => void;
+}
+export interface DateFilterContentProps {
+    tempDateFrom: string;
+    setTempDateFrom: (v: string) => void;
+    tempDateTo: string;
+    setTempDateTo: (v: string) => void;
+    onApply: () => void;
+    onClear: () => void;
+    classNames?: DateFilterClassNames;
+}
+export interface DateFilterClassNames {
+    popoverActions?: string;
+    clearButton?: string;
+    applyButton?: string;
+}
+export declare const DateFilterContent: React.FC<DateFilterContentProps>;
+export declare function getColumnHeaderFilterStateParams(props: IColumnHeaderFilterProps): {
+    filterType: ColumnFilterType;
+    isSorted: boolean;
+    isSortedDescending: boolean;
+    onSort: (() => void) | undefined;
+    selectedValues: string[] | undefined;
+    onFilterChange: ((values: string[]) => void) | undefined;
+    options: string[] | undefined;
+    isLoadingOptions: boolean;
+    textValue: string;
+    onTextChange: ((value: string) => void) | undefined;
+    selectedUser: UserLike | undefined;
+    onUserChange: ((user: UserLike | undefined) => void) | undefined;
+    peopleSearch: ((query: string) => Promise<UserLike[]>) | undefined;
+    dateValue: IDateFilterValue | undefined;
+    onDateChange: ((value: IDateFilterValue | undefined) => void) | undefined;
+};
+export declare function getDateFilterContentProps(state: UseColumnHeaderFilterStateResult, classNames?: DateFilterClassNames): DateFilterContentProps;

package/dist/types/components/ColumnHeaderFilterRenderers.d.ts

@@ -0,0 +1,71 @@
+/**
+ * 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.
+ */
+import type * as React from 'react';
+import type { ColumnFilterType } from '../types/columnTypes';
+import type { UserLike } from '../types/dataGridTypes';
+import type { UseColumnHeaderFilterStateResult } from '../hooks/useColumnHeaderFilterState';
+/**
+ * Framework-specific renderers for each filter type.
+ * Each UI package maps its own sub-filter components to these slots.
+ */
+export interface FilterContentRenderers {
+    renderMultiSelect: (props: MultiSelectRendererProps) => React.ReactNode;
+    renderText: (props: TextRendererProps) => React.ReactNode;
+    renderPeople: (props: PeopleRendererProps) => React.ReactNode;
+    renderDate: (props: DateRendererProps) => React.ReactNode;
+}
+export interface MultiSelectRendererProps {
+    searchText: string;
+    onSearchChange: (value: string) => void;
+    options: string[];
+    filteredOptions: string[];
+    selected: Set<string>;
+    onOptionToggle: (option: string, checked: boolean) => void;
+    onSelectAll: () => void;
+    onClearSelection: () => void;
+    onApply: () => void;
+    isLoading: boolean;
+}
+export interface TextRendererProps {
+    value: string;
+    onValueChange: (value: string) => void;
+    onApply: () => void;
+    onClear: () => void;
+}
+export interface PeopleRendererProps {
+    selectedUser: UserLike | undefined;
+    searchText: string;
+    onSearchChange: (value: string) => void;
+    suggestions: UserLike[];
+    isLoading: boolean;
+    onUserSelect: (user: UserLike) => void;
+    onClearUser: () => void;
+    inputRef: React.RefObject<HTMLInputElement | null>;
+}
+export interface DateRendererProps {
+    tempDateFrom: string;
+    setTempDateFrom: (v: string) => void;
+    tempDateTo: string;
+    setTempDateTo: (v: string) => void;
+    onApply: () => void;
+    onClear: () => void;
+}
+/**
+ * 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 declare function renderFilterContent(filterType: ColumnFilterType, state: UseColumnHeaderFilterStateResult, options: string[], isLoadingOptions: boolean, selectedUser: UserLike | undefined, renderers: FilterContentRenderers): React.ReactNode;

package/dist/types/components/PaginationControlsProps.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 interface IPaginationControlsProps {
+    currentPage: number;
+    pageSize: number;
+    totalCount: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (pageSize: number) => void;
+    pageSizeOptions?: number[];
+    entityLabelPlural?: string;
+    className?: string;
+}

package/dist/types/constants/domHelpers.d.ts

@@ -0,0 +1,17 @@
+import type * as React from 'react';
+/**
+ * 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 declare const GRID_ROOT_STYLE: React.CSSProperties;
+/** Applied to cells that support editing — shows the cell cursor. */
+export declare const CURSOR_CELL_STYLE: React.CSSProperties;
+/** Minimum size for popover anchor elements. */
+export declare const POPOVER_ANCHOR_STYLE: React.CSSProperties;
+/** Prevents the default browser action for mouse events. */
+export declare const PREVENT_DEFAULT: (e: React.MouseEvent) => void;
+/** No-operation function. */
+export declare const NOOP: () => void;
+/** Stops event propagation (e.g. click on checkbox inside a row). */
+export declare const STOP_PROPAGATION: (e: React.MouseEvent) => void;

package/dist/types/hooks/index.d.ts

@@ -22,7 +22,7 @@ export { useDebounce } from './useDebounce';
 export { useFillHandle } from './useFillHandle';
 export type { UseFillHandleResult, UseFillHandleParams } from './useFillHandle';
 export { useDataGridState } from './useDataGridState';
-export type { UseDataGridStateParams, UseDataGridStateResult, DataGridLayoutState, DataGridRowSelectionState, DataGridEditingState, DataGridCellInteractionState, DataGridContextMenuState, DataGridViewModelState, } from './useDataGridState';
+export type { UseDataGridStateParams, UseDataGridStateResult, DataGridLayoutState, DataGridRowSelectionState, DataGridEditingState, DataGridCellInteractionState, DataGridContextMenuState, DataGridViewModelState, DataGridPinningState, } from './useDataGridState';
 export { useColumnHeaderFilterState } from './useColumnHeaderFilterState';
 export type { UseColumnHeaderFilterStateParams, UseColumnHeaderFilterStateResult, } from './useColumnHeaderFilterState';
 export { useTextFilterState } from './useTextFilterState';
@@ -56,3 +56,5 @@ export type { IVirtualScrollConfig, UseVirtualScrollParams, UseVirtualScrollResu
 export { useLatestRef } from './useLatestRef';
 export { usePaginationControls } from './usePaginationControls';
 export type { UsePaginationControlsProps, UsePaginationControlsResult, } from './usePaginationControls';
+export { useDataGridTableOrchestration } from './useDataGridTableOrchestration';
+export type { UseDataGridTableOrchestrationParams, UseDataGridTableOrchestrationResult, } from './useDataGridTableOrchestration';

package/dist/types/hooks/useColumnHeaderMenuState.d.ts

@@ -4,11 +4,13 @@ export interface UseColumnHeaderMenuStateParams {
     onUnpinColumn: (columnId: string) => void;
     sortBy?: string;
     sortDirection: 'asc' | 'desc';
-    onColumnSort: (columnKey: string) => void;
+    onColumnSort: (columnKey: string, direction?: 'asc' | 'desc' | null) => void;
     onColumnResized?: (columnId: string, width: number) => void;
+    onAutosizeColumn?: (columnId: string, width: number) => void;
     columns: Array<{
         columnId: string;
         width?: number;
+        minWidth?: number;
         sortable?: boolean;
         resizable?: boolean;
     }>;

package/dist/types/hooks/useDataGridState.d.ts

@@ -128,12 +128,8 @@ export interface DataGridPinningState {
     pinColumn: (columnId: string, side: 'left' | 'right') => void;
     unpinColumn: (columnId: string) => void;
     isPinned: (columnId: string) => 'left' | 'right' | undefined;
-    computeLeftOffsets: (visibleCols: {
-        columnId: string;
-    }[], columnWidths: Record<string, number>, defaultWidth: number, hasCheckboxColumn: boolean, checkboxColumnWidth: number) => Record<string, number>;
-    computeRightOffsets: (visibleCols: {
-        columnId: string;
-    }[], columnWidths: Record<string, number>, defaultWidth: number) => Record<string, number>;
+    leftOffsets: Record<string, number>;
+    rightOffsets: Record<string, number>;
     headerMenu: {
         isOpen: boolean;
         openForColumn: string | null;

package/dist/types/hooks/useDataGridTableOrchestration.d.ts

@@ -0,0 +1,131 @@
+import type { RefObject } from 'react';
+import type { IOGridDataGridProps, IColumnDef } from '../types';
+import type { UseDataGridStateResult, DataGridLayoutState, DataGridRowSelectionState, DataGridEditingState, DataGridCellInteractionState, DataGridContextMenuState, DataGridViewModelState, DataGridPinningState } from './useDataGridState';
+import type { UseColumnResizeResult } from './useColumnResize';
+import type { UseColumnReorderResult } from './useColumnReorder';
+import type { UseVirtualScrollResult } from './useVirtualScroll';
+import type { HeaderFilterConfigInput, CellRenderDescriptorInput } from '../utils';
+import type { IStatusBarProps, RowId, HeaderRow } from '../types';
+/** Parameters for the orchestration hook. */
+export interface UseDataGridTableOrchestrationParams<T> {
+    props: IOGridDataGridProps<T>;
+}
+/** Everything the framework-specific view layer needs to render. */
+export interface UseDataGridTableOrchestrationResult<T> {
+    wrapperRef: RefObject<HTMLDivElement | null>;
+    tableContainerRef: RefObject<HTMLDivElement | null>;
+    lastMouseShiftRef: React.MutableRefObject<boolean>;
+    state: UseDataGridStateResult<T>;
+    layout: DataGridLayoutState<T>;
+    rowSel: DataGridRowSelectionState;
+    editing: DataGridEditingState<T>;
+    interaction: DataGridCellInteractionState;
+    ctxMenu: DataGridContextMenuState;
+    viewModels: DataGridViewModelState<T>;
+    pinning: DataGridPinningState;
+    handleResizeStart: UseColumnResizeResult<T>['handleResizeStart'];
+    getColumnWidth: UseColumnResizeResult<T>['getColumnWidth'];
+    isReorderDragging: UseColumnReorderResult['isDragging'];
+    dropIndicatorX: UseColumnReorderResult['dropIndicatorX'];
+    handleHeaderMouseDown: UseColumnReorderResult['handleHeaderMouseDown'];
+    virtualScrollEnabled: boolean;
+    virtualRowHeight: number;
+    visibleRange: UseVirtualScrollResult['visibleRange'];
+    items: T[];
+    columns: IOGridDataGridProps<T>['columns'];
+    getRowId: IOGridDataGridProps<T>['getRowId'];
+    emptyState: IOGridDataGridProps<T>['emptyState'];
+    layoutMode: 'fill' | 'content';
+    rowSelection: IOGridDataGridProps<T>['rowSelection'];
+    freezeRows: IOGridDataGridProps<T>['freezeRows'];
+    freezeCols: IOGridDataGridProps<T>['freezeCols'];
+    suppressHorizontalScroll: IOGridDataGridProps<T>['suppressHorizontalScroll'];
+    isLoading: boolean;
+    loadingMessage: string;
+    ariaLabel: string | undefined;
+    ariaLabelledBy: string | undefined;
+    visibleColumns: IOGridDataGridProps<T>['visibleColumns'];
+    columnOrder: IOGridDataGridProps<T>['columnOrder'];
+    columnReorder: IOGridDataGridProps<T>['columnReorder'];
+    density: 'compact' | 'normal' | 'comfortable';
+    pinnedColumns: IOGridDataGridProps<T>['pinnedColumns'];
+    currentPage: number;
+    propPageSize: number;
+    rowNumberOffset: number;
+    headerRows: HeaderRow<T>[];
+    allowOverflowX: boolean;
+    fitToContent: boolean;
+    editCallbacks: {
+        commitCellEdit: DataGridEditingState<T>['commitCellEdit'];
+        setEditingCell: DataGridEditingState<T>['setEditingCell'];
+        setPendingEditorValue: DataGridEditingState<T>['setPendingEditorValue'];
+        cancelPopoverEdit: DataGridEditingState<T>['cancelPopoverEdit'];
+    };
+    interactionHandlers: {
+        handleCellMouseDown: DataGridCellInteractionState['handleCellMouseDown'];
+        setActiveCell: DataGridCellInteractionState['setActiveCell'];
+        setEditingCell: DataGridEditingState<T>['setEditingCell'];
+        handleCellContextMenu: DataGridContextMenuState['handleCellContextMenu'];
+    };
+    cellDescriptorInputRef: React.MutableRefObject<CellRenderDescriptorInput<T>>;
+    pendingEditorValueRef: React.MutableRefObject<unknown>;
+    popoverAnchorElRef: React.MutableRefObject<HTMLElement | null>;
+    selectedRowIdsRef: React.MutableRefObject<Set<RowId>>;
+    handleSingleRowClick: (e: React.MouseEvent<HTMLTableRowElement>) => void;
+    handlePasteVoid: () => void;
+    visibleCols: IColumnDef<T>[];
+    totalColCount: number;
+    hasCheckboxCol: boolean;
+    hasRowNumbersCol: boolean;
+    colOffset: number;
+    containerWidth: number;
+    minTableWidth: number;
+    desiredTableWidth: number;
+    columnSizingOverrides: Record<string, {
+        widthPx: number;
+    }>;
+    setColumnSizingOverrides: React.Dispatch<React.SetStateAction<Record<string, {
+        widthPx: number;
+    }>>>;
+    selectedRowIds: Set<RowId>;
+    updateSelection: DataGridRowSelectionState['updateSelection'];
+    handleRowCheckboxChange: DataGridRowSelectionState['handleRowCheckboxChange'];
+    handleSelectAll: DataGridRowSelectionState['handleSelectAll'];
+    allSelected: boolean;
+    someSelected: boolean;
+    editingCell: DataGridEditingState<T>['editingCell'];
+    setPopoverAnchorEl: DataGridEditingState<T>['setPopoverAnchorEl'];
+    cancelPopoverEdit: DataGridEditingState<T>['cancelPopoverEdit'];
+    setActiveCell: DataGridCellInteractionState['setActiveCell'];
+    selectionRange: DataGridCellInteractionState['selectionRange'];
+    hasCellSelection: boolean;
+    handleGridKeyDown: DataGridCellInteractionState['handleGridKeyDown'];
+    handleFillHandleMouseDown: DataGridCellInteractionState['handleFillHandleMouseDown'];
+    handleCopy: DataGridCellInteractionState['handleCopy'];
+    handleCut: DataGridCellInteractionState['handleCut'];
+    cutRange: DataGridCellInteractionState['cutRange'];
+    copyRange: DataGridCellInteractionState['copyRange'];
+    canUndo: boolean;
+    canRedo: boolean;
+    onUndo: DataGridCellInteractionState['onUndo'];
+    onRedo: DataGridCellInteractionState['onRedo'];
+    isDragging: boolean;
+    menuPosition: DataGridContextMenuState['menuPosition'];
+    handleCellContextMenu: DataGridContextMenuState['handleCellContextMenu'];
+    closeContextMenu: DataGridContextMenuState['closeContextMenu'];
+    headerFilterInput: HeaderFilterConfigInput;
+    cellDescriptorInput: CellRenderDescriptorInput<T>;
+    statusBarConfig: IStatusBarProps | null;
+    showEmptyInGrid: boolean;
+    onCellError: DataGridViewModelState<T>['onCellError'];
+    headerMenu: DataGridPinningState['headerMenu'];
+}
+/**
+ * Shared orchestration hook for DataGridTable.
+ *
+ * Encapsulates all state management and computation that is identical across
+ * Radix, Fluent, and Material DataGridTable implementations. Each UI package
+ * calls this hook, then renders its own framework-specific JSX using the
+ * returned values.
+ */
+export declare function useDataGridTableOrchestration<T>(params: UseDataGridTableOrchestrationParams<T>): UseDataGridTableOrchestrationResult<T>;

package/dist/types/index.d.ts

@@ -1,8 +1,9 @@
 export { CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, GRID_BORDER_RADIUS, } from '@alaarab/ogrid-core';
 export type { ColumnFilterType, IColumnFilterDef, IColumnMeta, IColumnDef, IColumnGroupDef, IColumnDefinition, ICellValueChangedEvent, ICellEditorProps, CellEditorParams, IValueParserParams, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, IOGridApi, IOGridProps, IOGridDataGridProps, RowSelectionMode, RowId, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, HeaderCell, HeaderRow, SideBarPanelId, ISideBarDef, IDateFilterValue, IVirtualScrollConfig, IColumnReorderConfig, } from './types';
 export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './types';
-export { useFilterOptions, useOGrid, useActiveCell, useCellEditing, useContextMenu, useCellSelection, useClipboard, useRowSelection, useKeyboardNavigation, useUndoRedo, useDebounce, useFillHandle, useDataGridState, useColumnHeaderFilterState, useTextFilterState, useMultiSelectFilterState, usePeopleFilterState, useDateFilterState, useColumnChooserState, useInlineCellEditorState, useColumnResize, useRichSelectState, useSideBarState, useTableLayout, useColumnReorder, useVirtualScroll, useLatestRef, usePaginationControls, } from './hooks';
-export type { UseFilterOptionsResult, UseOGridResult, UseOGridPagination, UseOGridColumnChooser, UseOGridLayout, UseOGridFilters, ColumnChooserPlacement, UseActiveCellResult, UseCellEditingResult, EditingCell, UseContextMenuResult, ContextMenuPosition, UseCellSelectionResult, UseCellSelectionParams, UseClipboardResult, UseClipboardParams, UseRowSelectionResult, UseRowSelectionParams, UseKeyboardNavigationResult, UseKeyboardNavigationParams, UseUndoRedoResult, UseUndoRedoParams, UseFillHandleResult, UseFillHandleParams, UseDataGridStateParams, UseDataGridStateResult, DataGridLayoutState, DataGridRowSelectionState, DataGridEditingState, DataGridCellInteractionState, DataGridContextMenuState, DataGridViewModelState, UseColumnHeaderFilterStateParams, UseColumnHeaderFilterStateResult, UseTextFilterStateParams, UseTextFilterStateResult, UseMultiSelectFilterStateParams, UseMultiSelectFilterStateResult, UsePeopleFilterStateParams, UsePeopleFilterStateResult, UseDateFilterStateParams, UseDateFilterStateResult, UseColumnChooserStateParams, UseColumnChooserStateResult, UseInlineCellEditorStateParams, UseInlineCellEditorStateResult, InlineCellEditorType, UseColumnResizeParams, UseColumnResizeResult, UseRichSelectStateParams, UseRichSelectStateResult, UseSideBarStateParams, UseSideBarStateResult, UseTableLayoutParams, UseTableLayoutResult, UseColumnReorderParams, UseColumnReorderResult, UseVirtualScrollParams, UseVirtualScrollResult, UsePaginationControlsProps, UsePaginationControlsResult, } from './hooks';
+export { useFilterOptions, useOGrid, useActiveCell, useCellEditing, useContextMenu, useCellSelection, useClipboard, useRowSelection, useKeyboardNavigation, useUndoRedo, useDebounce, useFillHandle, useDataGridState, useColumnHeaderFilterState, useTextFilterState, useMultiSelectFilterState, usePeopleFilterState, useDateFilterState, useColumnChooserState, useInlineCellEditorState, useColumnResize, useRichSelectState, useSideBarState, useTableLayout, useColumnReorder, useVirtualScroll, useLatestRef, usePaginationControls, useDataGridTableOrchestration, } from './hooks';
+export type { UseFilterOptionsResult, UseOGridResult, UseOGridPagination, UseOGridColumnChooser, UseOGridLayout, UseOGridFilters, ColumnChooserPlacement, UseActiveCellResult, UseCellEditingResult, EditingCell, UseContextMenuResult, ContextMenuPosition, UseCellSelectionResult, UseCellSelectionParams, UseClipboardResult, UseClipboardParams, UseRowSelectionResult, UseRowSelectionParams, UseKeyboardNavigationResult, UseKeyboardNavigationParams, UseUndoRedoResult, UseUndoRedoParams, UseFillHandleResult, UseFillHandleParams, UseDataGridStateParams, UseDataGridStateResult, DataGridLayoutState, DataGridRowSelectionState, DataGridEditingState, DataGridCellInteractionState, DataGridContextMenuState, DataGridViewModelState, DataGridPinningState, UseColumnHeaderFilterStateParams, UseColumnHeaderFilterStateResult, UseTextFilterStateParams, UseTextFilterStateResult, UseMultiSelectFilterStateParams, UseMultiSelectFilterStateResult, UsePeopleFilterStateParams, UsePeopleFilterStateResult, UseDateFilterStateParams, UseDateFilterStateResult, UseColumnChooserStateParams, UseColumnChooserStateResult, UseInlineCellEditorStateParams, UseInlineCellEditorStateResult, InlineCellEditorType, UseColumnResizeParams, UseColumnResizeResult, UseRichSelectStateParams, UseRichSelectStateResult, UseSideBarStateParams, UseSideBarStateResult, UseTableLayoutParams, UseTableLayoutResult, UseColumnReorderParams, UseColumnReorderResult, UseVirtualScrollParams, UseVirtualScrollResult, UsePaginationControlsProps, UsePaginationControlsResult, UseDataGridTableOrchestrationParams, UseDataGridTableOrchestrationResult, } from './hooks';
+export { GRID_ROOT_STYLE, CURSOR_CELL_STYLE, POPOVER_ANCHOR_STYLE, PREVENT_DEFAULT, NOOP, STOP_PROPAGATION, } from './constants/domHelpers';
 export { OGridLayout } from './components/OGridLayout';
 export type { OGridLayoutProps } from './components/OGridLayout';
 export { StatusBar } from './components/StatusBar';
@@ -19,5 +20,11 @@ export { CellErrorBoundary } from './components/CellErrorBoundary';
 export type { CellErrorBoundaryProps } from './components/CellErrorBoundary';
 export { EmptyState } from './components/EmptyState';
 export type { EmptyStateProps } from './components/EmptyState';
+export { DateFilterContent, getColumnHeaderFilterStateParams, getDateFilterContentProps, } from './components/ColumnHeaderFilterContent';
+export type { IColumnHeaderFilterProps, DateFilterContentProps, DateFilterClassNames, } from './components/ColumnHeaderFilterContent';
 export { escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, getCellValue, flattenColumns, buildHeaderRows, getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, getStatusBarParts, getDataGridStatusBarConfig, GRID_CONTEXT_MENU_ITEMS, getContextMenuHandlers, formatShortcut, getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, getHeaderFilterConfig, getCellRenderDescriptor, isRowInRange, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, processClientSideData, areGridRowPropsEqual, } from './utils';
 export type { CsvColumn, StatusBarPart, StatusBarPartsInput, GridContextMenuItem, GridContextMenuHandlerProps, PaginationViewModel, HeaderFilterConfigInput, HeaderFilterConfig, CellRenderDescriptorInput, CellRenderDescriptor, CellRenderMode, CellInteractionHandlers, ParseValueResult, AggregationResult, GridRowComparatorProps, } from './utils';
+export { renderFilterContent } from './components/ColumnHeaderFilterRenderers';
+export type { FilterContentRenderers, MultiSelectRendererProps, TextRendererProps, PeopleRendererProps, DateRendererProps, } from './components/ColumnHeaderFilterRenderers';
+export type { IColumnChooserProps } from './components/ColumnChooserProps';
+export type { IPaginationControlsProps } from './components/PaginationControlsProps';

package/dist/types/types/dataGridTypes.d.ts

@@ -105,7 +105,7 @@ export interface IOGridDataGridProps<T> {
     getRowId: (item: T) => RowId;
     sortBy?: string;
     sortDirection: 'asc' | 'desc';
-    onColumnSort: (columnKey: string) => void;
+    onColumnSort: (columnKey: string, direction?: 'asc' | 'desc' | null) => void;
     visibleColumns: Set<string>;
     /** Optional column display order (column ids). When set, visible columns are ordered by this array. */
     columnOrder?: string[];

package/dist/types/utils/index.d.ts

@@ -1,4 +1,4 @@
-export { escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, getCellValue, flattenColumns, buildHeaderRows, getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, getStatusBarParts, getDataGridStatusBarConfig, getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, GRID_CONTEXT_MENU_ITEMS, getContextMenuHandlers, formatShortcut, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, processClientSideData, } from '@alaarab/ogrid-core';
+export { escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, getCellValue, flattenColumns, buildHeaderRows, getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, getStatusBarParts, getDataGridStatusBarConfig, getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, GRID_CONTEXT_MENU_ITEMS, getContextMenuHandlers, formatShortcut, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, processClientSideData, computeNextSortState, measureColumnContentWidth, AUTOSIZE_EXTRA_PX, AUTOSIZE_MAX_PX, } from '@alaarab/ogrid-core';
 export type { CsvColumn, StatusBarPart, StatusBarPartsInput, GridContextMenuItem, GridContextMenuHandlerProps, PaginationViewModel, ParseValueResult, AggregationResult, } from '@alaarab/ogrid-core';
 export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, } from './dataGridViewModel';
 export type { HeaderFilterConfigInput, HeaderFilterConfig, CellRenderDescriptorInput, CellRenderDescriptor, CellRenderMode, CellInteractionHandlers, } from './dataGridViewModel';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react",
-  "version": "2.0.11",
+  "version": "2.0.12",
   "description": "OGrid React – React hooks, headless components, and utilities for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -36,7 +36,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.0.11"
+    "@alaarab/ogrid-core": "2.0.12"
   },
   "peerDependencies": {
     "@tanstack/react-virtual": "^3.0.0",