@alaarab/ogrid-core 1.3.2 → 1.5.0

package/dist/esm/components/OGridLayout.js

@@ -1,16 +1,83 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const defaultGap = 16;
+import { SideBar } from './SideBar';
+// Stable style objects (avoid re-creating on every render)
+const borderedContainerStyle = {
+    border: '1px solid var(--ogrid-border, #e0e0e0)',
+    borderRadius: 6,
+    overflow: 'hidden',
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+    minHeight: 0,
+    background: 'var(--ogrid-bg, #fff)',
+};
+const toolbarStripStyle = {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '6px 12px',
+    borderBottom: '1px solid var(--ogrid-border, #e0e0e0)',
+    background: 'var(--ogrid-header-bg, #f5f5f5)',
+    gap: 8,
+    flexWrap: 'wrap',
+    minHeight: 0,
+};
+const toolbarSectionStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 8,
+};
+const footerStripStyle = {
+    borderTop: '1px solid var(--ogrid-border, #e0e0e0)',
+    background: 'var(--ogrid-header-bg, #f5f5f5)',
+    padding: '6px 12px',
+};
+const gridAreaFlexStyle = {
+    width: '100%',
+    minWidth: 0,
+    minHeight: 0,
+    flex: 1,
+    display: 'flex',
+};
+const gridAreaSoloStyle = {
+    width: '100%',
+    minWidth: 0,
+    minHeight: 0,
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+};
+const gridChildStyle = {
+    flex: 1,
+    minWidth: 0,
+    minHeight: 0,
+    display: 'flex',
+    flexDirection: 'column',
+};
 /**
- * Renders OGrid layout: [toolbar row | title, toolbar, columnChooser] [grid] [pagination].
- * Inner structure uses divs; only the root uses Container so UIs can use Box/div and pass gap.
+ * Renders OGrid layout as a unified bordered container:
+ *   [deprecated title above]
+ *   ┌────────────────────────────────────┐
+ *   │ [toolbar strip]                    │
+ *   ├────────────────────────────────────┤
+ *   │ [sidebar]? [grid]                  │
+ *   ├────────────────────────────────────┤
+ *   │ [footer strip / pagination]        │
+ *   └────────────────────────────────────┘
  */
 export function OGridLayout(props) {
-    const { containerComponent: Container = 'div', containerProps = {}, gap = defaultGap, className, title, toolbar, columnChooser, children, pagination, } = props;
-    // Always apply flex layout; merge with any containerProps styles
+    const { containerComponent: Container = 'div', containerProps = {}, gap = 8, className, title, toolbar, columnChooser, toolbarEnd: toolbarEndProp, children, pagination, sideBar, } = props;
+    const hasSideBar = sideBar != null;
+    const sideBarPosition = sideBar?.position ?? 'right';
+    // Backward compat: columnChooser prop → toolbarEnd
+    const toolbarEnd = toolbarEndProp ?? columnChooser;
+    const hasToolbar = toolbar != null || toolbarEnd != null;
+    // Root styles: flex column, fill parent height, gap for deprecated title spacing
     const rootStyle = {
         display: 'flex',
         flexDirection: 'column',
-        gap: typeof gap === 'number' ? `${gap}px` : gap,
+        height: '100%',
+        gap: title != null ? (typeof gap === 'number' ? `${gap}px` : gap) : undefined,
     };
-    return (_jsxs(Container, { className: className, style: rootStyle, ...containerProps, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 8, minHeight: 40 }, children: [title != null ? _jsx("div", { style: { margin: 0 }, children: title }) : null, toolbar, columnChooser] }), _jsx("div", { style: { width: '100%', minWidth: 0, flex: 1 }, children: children }), pagination] }));
+    return (_jsxs(Container, { className: className, style: rootStyle, ...containerProps, children: [title != null && _jsx("div", { style: { margin: 0 }, children: title }), _jsxs("div", { style: borderedContainerStyle, children: [hasToolbar && (_jsxs("div", { style: toolbarStripStyle, children: [_jsx("div", { style: toolbarSectionStyle, children: toolbar }), _jsx("div", { style: toolbarSectionStyle, children: toolbarEnd })] })), hasSideBar ? (_jsxs("div", { style: gridAreaFlexStyle, children: [sideBarPosition === 'left' && _jsx(SideBar, { ...sideBar }), _jsx("div", { style: gridChildStyle, children: children }), sideBarPosition !== 'left' && _jsx(SideBar, { ...sideBar })] })) : (_jsx("div", { style: gridAreaSoloStyle, children: children })), pagination && (_jsx("div", { style: footerStripStyle, children: pagination }))] })] }));
 }

package/dist/esm/components/SideBar.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const PANEL_WIDTH = 240;
+const TAB_WIDTH = 36;
+const PANEL_LABELS = {
+    columns: 'Columns',
+    filters: 'Filters',
+};
+export function SideBar(props) {
+    const { activePanel, onPanelChange, panels, position, columns, visibleColumns, onVisibilityChange, onSetVisibleColumns, filterableColumns, multiSelectFilters, textFilters, onMultiSelectFilterChange, onTextFilterChange, dateFilters, onDateFilterChange, filterOptions, } = props;
+    const isOpen = activePanel !== null;
+    const handleTabClick = (panel) => {
+        onPanelChange(activePanel === panel ? null : panel);
+    };
+    const tabStrip = (_jsx("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            width: TAB_WIDTH,
+            borderLeft: position === 'right' ? '1px solid var(--ogrid-border, #e0e0e0)' : undefined,
+            borderRight: position === 'left' ? '1px solid var(--ogrid-border, #e0e0e0)' : undefined,
+            background: 'var(--ogrid-header-bg, #f5f5f5)',
+        }, role: "tablist", "aria-label": "Side bar tabs", children: panels.map((panel) => (_jsx("button", { role: "tab", "aria-selected": activePanel === panel, "aria-label": PANEL_LABELS[panel], onClick: () => handleTabClick(panel), title: PANEL_LABELS[panel], style: {
+                width: TAB_WIDTH,
+                height: TAB_WIDTH,
+                border: 'none',
+                cursor: 'pointer',
+                background: activePanel === panel ? 'var(--ogrid-bg, #fff)' : 'transparent',
+                color: 'var(--ogrid-fg, #242424)',
+                fontWeight: activePanel === panel ? 'bold' : 'normal',
+                fontSize: 14,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }, children: panel === 'columns' ? '\u2261' : '\u2A65' }, panel))) }));
+    const panelContent = isOpen ? (_jsxs("div", { role: "tabpanel", "aria-label": PANEL_LABELS[activePanel], style: {
+            width: PANEL_WIDTH,
+            display: 'flex',
+            flexDirection: 'column',
+            borderLeft: position === 'right' ? '1px solid var(--ogrid-border, #e0e0e0)' : undefined,
+            borderRight: position === 'left' ? '1px solid var(--ogrid-border, #e0e0e0)' : undefined,
+            overflow: 'hidden',
+            background: 'var(--ogrid-bg, #fff)',
+            color: 'var(--ogrid-fg, #242424)',
+        }, children: [_jsxs("div", { style: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    padding: '8px 12px',
+                    borderBottom: '1px solid var(--ogrid-border, #e0e0e0)',
+                    fontWeight: 600,
+                }, children: [_jsx("span", { children: PANEL_LABELS[activePanel] }), _jsx("button", { onClick: () => onPanelChange(null), style: { border: 'none', background: 'transparent', cursor: 'pointer', fontSize: 16, color: 'var(--ogrid-fg, #242424)' }, "aria-label": "Close panel", children: "\u00D7" })] }), _jsxs("div", { style: { flex: 1, overflowY: 'auto', padding: '8px 12px' }, children: [activePanel === 'columns' && (_jsx(ColumnsPanel, { columns: columns, visibleColumns: visibleColumns, onVisibilityChange: onVisibilityChange, onSetVisibleColumns: onSetVisibleColumns })), activePanel === 'filters' && (_jsx(FiltersPanel, { filterableColumns: filterableColumns, multiSelectFilters: multiSelectFilters, textFilters: textFilters, onMultiSelectFilterChange: onMultiSelectFilterChange, onTextFilterChange: onTextFilterChange, dateFilters: dateFilters, onDateFilterChange: onDateFilterChange, filterOptions: filterOptions }))] })] })) : null;
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'row', flexShrink: 0 }, role: "complementary", "aria-label": "Side bar", children: [position === 'left' && tabStrip, position === 'left' && panelContent, position === 'right' && panelContent, position === 'right' && tabStrip] }));
+}
+// --- Internal sub-components ---
+function ColumnsPanel(props) {
+    const { columns, visibleColumns, onVisibilityChange, onSetVisibleColumns } = props;
+    const allVisible = columns.every((c) => visibleColumns.has(c.columnId));
+    const handleSelectAll = () => {
+        const next = new Set(visibleColumns);
+        columns.forEach((c) => next.add(c.columnId));
+        onSetVisibleColumns(next);
+    };
+    const handleClearAll = () => {
+        const next = new Set();
+        columns.forEach((c) => {
+            if (c.required && visibleColumns.has(c.columnId))
+                next.add(c.columnId);
+        });
+        onSetVisibleColumns(next);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { display: 'flex', gap: 8, marginBottom: 8 }, children: [_jsx("button", { onClick: handleSelectAll, disabled: allVisible, style: { flex: 1, cursor: 'pointer', background: 'var(--ogrid-bg-subtle, #f3f2f1)', color: 'var(--ogrid-fg, #242424)', border: '1px solid var(--ogrid-border, #e0e0e0)', borderRadius: 4, padding: '4px 8px' }, children: "Select All" }), _jsx("button", { onClick: handleClearAll, style: { flex: 1, cursor: 'pointer', background: 'var(--ogrid-bg-subtle, #f3f2f1)', color: 'var(--ogrid-fg, #242424)', border: '1px solid var(--ogrid-border, #e0e0e0)', borderRadius: 4, padding: '4px 8px' }, children: "Clear All" })] }), columns.map((col) => (_jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 6, padding: '2px 0', cursor: 'pointer' }, children: [_jsx("input", { type: "checkbox", checked: visibleColumns.has(col.columnId), onChange: (e) => onVisibilityChange(col.columnId, e.target.checked), disabled: col.required }), _jsx("span", { children: col.name })] }, col.columnId)))] }));
+}
+function FiltersPanel(props) {
+    const { filterableColumns, multiSelectFilters, textFilters, onMultiSelectFilterChange, onTextFilterChange, dateFilters, onDateFilterChange, filterOptions } = props;
+    if (filterableColumns.length === 0) {
+        return _jsx("div", { style: { color: 'var(--ogrid-muted, #999)', fontStyle: 'italic' }, children: "No filterable columns" });
+    }
+    return (_jsx(_Fragment, { children: filterableColumns.map((col) => {
+            const filterKey = col.filterField;
+            return (_jsxs("div", { style: { marginBottom: 12 }, children: [_jsx("div", { style: { fontWeight: 500, marginBottom: 4, fontSize: 13 }, children: col.name }), col.filterType === 'text' && (_jsx("input", { type: "text", value: textFilters[filterKey] ?? '', onChange: (e) => onTextFilterChange(filterKey, e.target.value), placeholder: `Filter ${col.name}...`, "aria-label": `Filter ${col.name}`, style: { width: '100%', boxSizing: 'border-box', padding: '4px 6px', background: 'var(--ogrid-bg, #fff)', color: 'var(--ogrid-fg, #242424)', border: '1px solid var(--ogrid-border, #e0e0e0)', borderRadius: 4 } })), col.filterType === 'date' && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 4, fontSize: 12 }, children: ["From:", _jsx("input", { type: "date", value: dateFilters[filterKey]?.from ?? '', onChange: (e) => {
+                                            const from = e.target.value || undefined;
+                                            const to = dateFilters[filterKey]?.to;
+                                            onDateFilterChange(filterKey, from || to ? { from, to } : undefined);
+                                        }, "aria-label": `${col.name} from date`, style: { flex: 1, padding: '2px 4px', background: 'var(--ogrid-bg, #fff)', color: 'var(--ogrid-fg, #242424)', border: '1px solid var(--ogrid-border, #e0e0e0)', borderRadius: 4 } })] }), _jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 4, fontSize: 12 }, children: ["To:", _jsx("input", { type: "date", value: dateFilters[filterKey]?.to ?? '', onChange: (e) => {
+                                            const to = e.target.value || undefined;
+                                            const from = dateFilters[filterKey]?.from;
+                                            onDateFilterChange(filterKey, from || to ? { from, to } : undefined);
+                                        }, "aria-label": `${col.name} to date`, style: { flex: 1, padding: '2px 4px', background: 'var(--ogrid-bg, #fff)', color: 'var(--ogrid-fg, #242424)', border: '1px solid var(--ogrid-border, #e0e0e0)', borderRadius: 4 } })] })] })), col.filterType === 'multiSelect' && (_jsx("div", { style: { maxHeight: 120, overflowY: 'auto' }, role: "group", "aria-label": `${col.name} options`, children: (filterOptions[filterKey] ?? []).map((opt) => {
+                            const selected = (multiSelectFilters[filterKey] ?? []).includes(opt);
+                            return (_jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 4, padding: '1px 0', cursor: 'pointer', fontSize: 13 }, children: [_jsx("input", { type: "checkbox", checked: selected, onChange: (e) => {
+                                            const current = multiSelectFilters[filterKey] ?? [];
+                                            const next = e.target.checked
+                                                ? [...current, opt]
+                                                : current.filter((v) => v !== opt);
+                                            onMultiSelectFilterChange(filterKey, next);
+                                        } }), _jsx("span", { children: opt })] }, opt));
+                        }) }))] }, col.columnId));
+        }) }));
+}

package/dist/esm/hooks/index.js

@@ -15,3 +15,5 @@ export { useColumnHeaderFilterState } from './useColumnHeaderFilterState';
 export { useColumnChooserState } from './useColumnChooserState';
 export { useInlineCellEditorState } from './useInlineCellEditorState';
 export { useColumnResize } from './useColumnResize';
+export { useRichSelectState } from './useRichSelectState';
+export { useSideBarState } from './useSideBarState';

package/dist/esm/hooks/useActiveCell.js

@@ -17,6 +17,11 @@ export function useActiveCell(wrapperRef, editingCell) {
         const cell = wrapperRef.current.querySelector(selector);
         if (cell) {
             if (typeof cell.scrollIntoView === 'function') {
+                // Account for sticky <thead> so scrollIntoView doesn't leave
+                // the cell hidden behind the header.
+                const thead = wrapperRef.current.querySelector('thead');
+                const headerHeight = thead ? thead.getBoundingClientRect().height : 0;
+                cell.style.scrollMarginTop = `${headerHeight}px`;
                 cell.scrollIntoView({ block: 'nearest', inline: 'nearest' });
             }
             if (document.activeElement !== cell && typeof cell.focus === 'function') {

package/dist/esm/hooks/useCellSelection.js

@@ -2,6 +2,16 @@ import { useState, useCallback, useRef, useEffect } from 'react';
 import { normalizeSelectionRange } from '../types';
 /** DOM attribute name used for drag-range highlighting (bypasses React). */
 const DRAG_ATTR = 'data-drag-range';
+/** Auto-scroll config */
+const AUTO_SCROLL_EDGE = 40; // px from wrapper edge to trigger
+const AUTO_SCROLL_MIN_SPEED = 2;
+const AUTO_SCROLL_MAX_SPEED = 20;
+const AUTO_SCROLL_INTERVAL = 16; // ~60fps
+/** Compute scroll speed proportional to distance past the edge, capped. */
+function autoScrollSpeed(distance) {
+    const t = Math.min(distance / AUTO_SCROLL_EDGE, 1);
+    return AUTO_SCROLL_MIN_SPEED + t * (AUTO_SCROLL_MAX_SPEED - AUTO_SCROLL_MIN_SPEED);
+}
 export function useCellSelection(params) {
     const { colOffset, rowCount, visibleColCount, setActiveCell, wrapperRef } = params;
     const [selectionRange, setSelectionRange] = useState(null);
@@ -11,6 +21,8 @@ export function useCellSelection(params) {
     const rafRef = useRef(0);
     /** Live drag range kept in a ref — only committed to React state on mouseup. */
     const liveDragRangeRef = useRef(null);
+    /** Auto-scroll interval during drag. */
+    const autoScrollRef = useRef(null);
     const handleCellMouseDown = useCallback((e, rowIndex, globalColIndex) => {
         // Only handle primary (left) button — let middle-click scroll and right-click context menu work natively
         if (e.button !== 0)
@@ -116,11 +128,81 @@ export function useCellSelection(params) {
                 endCol: dataCol,
             });
         };
+        /** Start or update auto-scroll interval based on mouse position relative to wrapper edges. */
+        const updateAutoScroll = () => {
+            const wrapper = wrapperRef.current;
+            const pos = lastMousePosRef.current;
+            if (!wrapper || !pos || !isDraggingRef.current) {
+                stopAutoScroll();
+                return;
+            }
+            const rect = wrapper.getBoundingClientRect();
+            let dx = 0;
+            let dy = 0;
+            if (pos.cy < rect.top + AUTO_SCROLL_EDGE) {
+                dy = -autoScrollSpeed(rect.top + AUTO_SCROLL_EDGE - pos.cy);
+            }
+            else if (pos.cy > rect.bottom - AUTO_SCROLL_EDGE) {
+                dy = autoScrollSpeed(pos.cy - (rect.bottom - AUTO_SCROLL_EDGE));
+            }
+            if (pos.cx < rect.left + AUTO_SCROLL_EDGE) {
+                dx = -autoScrollSpeed(rect.left + AUTO_SCROLL_EDGE - pos.cx);
+            }
+            else if (pos.cx > rect.right - AUTO_SCROLL_EDGE) {
+                dx = autoScrollSpeed(pos.cx - (rect.right - AUTO_SCROLL_EDGE));
+            }
+            if (dx === 0 && dy === 0) {
+                stopAutoScroll();
+                return;
+            }
+            // Start interval if not already running
+            if (!autoScrollRef.current) {
+                autoScrollRef.current = setInterval(() => {
+                    const w = wrapperRef.current;
+                    const p = lastMousePosRef.current;
+                    if (!w || !p || !isDraggingRef.current) {
+                        stopAutoScroll();
+                        return;
+                    }
+                    const r = w.getBoundingClientRect();
+                    let sdx = 0;
+                    let sdy = 0;
+                    if (p.cy < r.top + AUTO_SCROLL_EDGE)
+                        sdy = -autoScrollSpeed(r.top + AUTO_SCROLL_EDGE - p.cy);
+                    else if (p.cy > r.bottom - AUTO_SCROLL_EDGE)
+                        sdy = autoScrollSpeed(p.cy - (r.bottom - AUTO_SCROLL_EDGE));
+                    if (p.cx < r.left + AUTO_SCROLL_EDGE)
+                        sdx = -autoScrollSpeed(r.left + AUTO_SCROLL_EDGE - p.cx);
+                    else if (p.cx > r.right - AUTO_SCROLL_EDGE)
+                        sdx = autoScrollSpeed(p.cx - (r.right - AUTO_SCROLL_EDGE));
+                    if (sdx === 0 && sdy === 0) {
+                        stopAutoScroll();
+                        return;
+                    }
+                    w.scrollTop += sdy;
+                    w.scrollLeft += sdx;
+                    // After scrolling, re-resolve the cell under the mouse and update drag range
+                    const newRange = resolveRange(p.cx, p.cy);
+                    if (newRange) {
+                        liveDragRangeRef.current = newRange;
+                        applyDragAttrs(newRange);
+                    }
+                }, AUTO_SCROLL_INTERVAL);
+            }
+        };
+        const stopAutoScroll = () => {
+            if (autoScrollRef.current) {
+                clearInterval(autoScrollRef.current);
+                autoScrollRef.current = null;
+            }
+        };
         const onMove = (e) => {
             if (!isDraggingRef.current || !dragStartRef.current)
                 return;
             // Always store latest position so mouseUp can flush if RAF hasn't executed
             lastMousePosRef.current = { cx: e.clientX, cy: e.clientY };
+            // Update auto-scroll based on mouse proximity to edges
+            updateAutoScroll();
             // Cancel previous pending frame
             if (rafRef.current)
                 cancelAnimationFrame(rafRef.current);
@@ -149,6 +231,7 @@ export function useCellSelection(params) {
         const onUp = () => {
             if (!isDraggingRef.current)
                 return;
+            stopAutoScroll();
             if (rafRef.current) {
                 cancelAnimationFrame(rafRef.current);
                 rafRef.current = 0;
@@ -185,6 +268,7 @@ export function useCellSelection(params) {
             window.removeEventListener('mouseup', onUp, true);
             if (rafRef.current)
                 cancelAnimationFrame(rafRef.current);
+            stopAutoScroll();
         };
     }, [colOffset, setActiveCell, wrapperRef]);
     return {

package/dist/esm/hooks/useColumnHeaderFilterState.js

@@ -7,7 +7,7 @@ import { useDebounce } from './useDebounce';
 const SEARCH_DEBOUNCE_MS = 150;
 const EMPTY_OPTIONS = [];
 export function useColumnHeaderFilterState(params) {
-    const { filterType, onSort, selectedValues, onFilterChange, options, textValue = '', onTextChange, selectedUser, onUserChange, peopleSearch, } = params;
+    const { filterType, onSort, selectedValues, onFilterChange, options, textValue = '', onTextChange, selectedUser, onUserChange, peopleSearch, dateValue, onDateChange, } = params;
     const safeSelectedValues = selectedValues ?? EMPTY_OPTIONS;
     const safeOptions = options ?? EMPTY_OPTIONS;
     const headerRef = useRef(null);
@@ -22,12 +22,16 @@ export function useColumnHeaderFilterState(params) {
     const [peopleSuggestions, setPeopleSuggestions] = useState([]);
     const [isPeopleLoading, setIsPeopleLoading] = useState(false);
     const [peopleSearchText, setPeopleSearchText] = useState('');
+    const [tempDateFrom, setTempDateFrom] = useState(dateValue?.from ?? '');
+    const [tempDateTo, setTempDateTo] = useState(dateValue?.to ?? '');
     const [popoverPosition, setPopoverPosition] = useState(null);
     // Sync temp state when popover opens
     useEffect(() => {
         if (isFilterOpen) {
             setTempSelected(new Set(safeSelectedValues));
             setTempTextValue(textValue);
+            setTempDateFrom(dateValue?.from ?? '');
+            setTempDateTo(dateValue?.to ?? '');
             setSearchText('');
             setPeopleSearchText('');
             setPeopleSuggestions([]);
@@ -38,7 +42,7 @@ export function useColumnHeaderFilterState(params) {
         else {
             setPopoverPosition(null);
         }
-    }, [isFilterOpen, filterType, safeSelectedValues, textValue]);
+    }, [isFilterOpen, filterType, safeSelectedValues, textValue, dateValue]);
     // Click outside and Escape to close
     useEffect(() => {
         if (!isFilterOpen)
@@ -144,6 +148,16 @@ export function useColumnHeaderFilterState(params) {
         onUserChange?.(user);
         setFilterOpen(false);
     }, [onUserChange]);
+    const handleDateApply = useCallback(() => {
+        const from = tempDateFrom || undefined;
+        const to = tempDateTo || undefined;
+        onDateChange?.(from || to ? { from, to } : undefined);
+        setFilterOpen(false);
+    }, [onDateChange, tempDateFrom, tempDateTo]);
+    const handleDateClear = useCallback(() => {
+        setTempDateFrom('');
+        setTempDateTo('');
+    }, []);
     const handleClearUser = useCallback(() => {
         onUserChange?.(undefined);
         setFilterOpen(false);
@@ -163,8 +177,10 @@ export function useColumnHeaderFilterState(params) {
             return !!textValue.trim();
         if (filterType === 'people')
             return !!selectedUser;
+        if (filterType === 'date')
+            return !!(dateValue?.from || dateValue?.to);
         return false;
-    }, [filterType, safeSelectedValues, textValue, selectedUser]);
+    }, [filterType, safeSelectedValues, textValue, selectedUser, dateValue]);
     return {
         headerRef,
         popoverRef,
@@ -183,6 +199,10 @@ export function useColumnHeaderFilterState(params) {
         isPeopleLoading,
         peopleSearchText,
         setPeopleSearchText,
+        tempDateFrom,
+        setTempDateFrom,
+        tempDateTo,
+        setTempDateTo,
         hasActiveFilter,
         popoverPosition,
         handlers: {
@@ -192,6 +212,8 @@ export function useColumnHeaderFilterState(params) {
             handleTextClear,
             handleUserSelect,
             handleClearUser,
+            handleDateApply,
+            handleDateClear,
             handleCheckboxChange,
             handleSelectAll,
             handleClearSelection,

package/dist/esm/hooks/useColumnResize.js

@@ -1,43 +1,58 @@
-import { useCallback, useRef, useEffect } from 'react';
-export function useColumnResize({ columnSizingOverrides, setColumnSizingOverrides, minWidth = 80, defaultWidth = 120, }) {
-    const resizingRef = useRef(null);
+import { useCallback, useRef } from 'react';
+export function useColumnResize({ columnSizingOverrides, setColumnSizingOverrides, minWidth = 80, defaultWidth = 120, onColumnResized, }) {
+    const rafRef = useRef(0);
+    const onColumnResizedRef = useRef(onColumnResized);
+    onColumnResizedRef.current = onColumnResized;
     const handleResizeStart = useCallback((e, col) => {
         e.preventDefault();
         e.stopPropagation();
-        const currentWidth = columnSizingOverrides[col.columnId]?.widthPx
+        const startX = e.clientX;
+        const columnId = col.columnId;
+        const startWidth = columnSizingOverrides[columnId]?.widthPx
             ?? col.idealWidth
             ?? col.defaultWidth
             ?? defaultWidth;
-        resizingRef.current = {
-            columnId: col.columnId,
-            startX: e.clientX,
-            startWidth: currentWidth,
+        let latestWidth = startWidth;
+        // Lock cursor and prevent text selection during drag
+        const prevCursor = document.body.style.cursor;
+        const prevUserSelect = document.body.style.userSelect;
+        document.body.style.cursor = 'col-resize';
+        document.body.style.userSelect = 'none';
+        const flushWidth = () => {
+            setColumnSizingOverrides((prev) => ({
+                ...prev,
+                [columnId]: { widthPx: latestWidth },
+            }));
         };
-    }, [columnSizingOverrides, defaultWidth]);
-    const handleResizeMove = useCallback((e) => {
-        if (!resizingRef.current)
-            return;
-        const { columnId, startX, startWidth } = resizingRef.current;
-        const deltaX = e.clientX - startX;
-        const newWidth = Math.max(minWidth, startWidth + deltaX);
-        setColumnSizingOverrides((prev) => ({
-            ...prev,
-            [columnId]: { widthPx: newWidth },
-        }));
-    }, [setColumnSizingOverrides, minWidth]);
-    const handleResizeEnd = useCallback(() => {
-        resizingRef.current = null;
-    }, []);
-    useEffect(() => {
-        const handleMouseMove = (e) => handleResizeMove(e);
-        const handleMouseUp = () => handleResizeEnd();
-        document.addEventListener('mousemove', handleMouseMove);
-        document.addEventListener('mouseup', handleMouseUp);
-        return () => {
-            document.removeEventListener('mousemove', handleMouseMove);
-            document.removeEventListener('mouseup', handleMouseUp);
+        const onMove = (moveEvent) => {
+            const deltaX = moveEvent.clientX - startX;
+            latestWidth = Math.max(minWidth, startWidth + deltaX);
+            if (!rafRef.current) {
+                rafRef.current = requestAnimationFrame(() => {
+                    rafRef.current = 0;
+                    flushWidth();
+                });
+            }
+        };
+        const onUp = () => {
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+            // Restore cursor and user-select
+            document.body.style.cursor = prevCursor;
+            document.body.style.userSelect = prevUserSelect;
+            // Cancel pending RAF and flush final width synchronously
+            if (rafRef.current) {
+                cancelAnimationFrame(rafRef.current);
+                rafRef.current = 0;
+            }
+            flushWidth();
+            if (onColumnResizedRef.current) {
+                onColumnResizedRef.current(columnId, latestWidth);
+            }
         };
-    }, [handleResizeMove, handleResizeEnd]);
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+    }, [columnSizingOverrides, defaultWidth, minWidth, setColumnSizingOverrides]);
     const getColumnWidth = useCallback((col) => {
         return columnSizingOverrides[col.columnId]?.widthPx
             ?? col.idealWidth

package/dist/esm/hooks/useDataGridState.js

@@ -1,6 +1,7 @@
 import { useMemo, useCallback, useEffect, useState } from 'react';
 import { flattenColumns, getDataGridStatusBarConfig } from '../utils';
 import { parseValue } from '../utils/valueParsers';
+import { computeAggregations } from '../utils/aggregationUtils';
 import { useRowSelection } from './useRowSelection';
 import { useCellEditing } from './useCellEditing';
 import { useActiveCell } from './useActiveCell';
@@ -22,12 +23,25 @@ const NOOP_CTX = (_e) => { };
  */
 export function useDataGridState(params) {
     const { props, wrapperRef } = params;
-    const { items, columns, getRowId, visibleColumns, columnOrder, rowSelection = 'none', selectedRows: controlledSelectedRows, onSelectionChange, statusBar, emptyState, editable, cellSelection: cellSelectionProp, onCellValueChanged: onCellValueChangedProp, } = props;
+    const { items, columns, getRowId, visibleColumns, columnOrder, rowSelection = 'none', selectedRows: controlledSelectedRows, onSelectionChange, statusBar, emptyState, editable, cellSelection: cellSelectionProp, onCellValueChanged: onCellValueChangedProp, initialColumnWidths, onColumnResized, pinnedColumns, } = props;
     const cellSelection = cellSelectionProp !== false;
     // Wrap onCellValueChanged with undo/redo tracking — all edits are recorded automatically
     const undoRedo = useUndoRedo({ onCellValueChanged: onCellValueChangedProp });
     const onCellValueChanged = undoRedo.onCellValueChanged;
-    const flatColumns = useMemo(() => flattenColumns(columns), [columns]);
+    const flatColumnsRaw = useMemo(() => flattenColumns(columns), [columns]);
+    // Apply runtime pin overrides (from applyColumnState or programmatic changes)
+    const flatColumns = useMemo(() => {
+        if (!pinnedColumns || Object.keys(pinnedColumns).length === 0)
+            return flatColumnsRaw;
+        return flatColumnsRaw.map((col) => {
+            const override = pinnedColumns[col.columnId];
+            if (override && col.pinned !== override) {
+                return { ...col, pinned: override };
+            }
+            // If col was pinned by definition but not in overrides, keep original
+            return col;
+        });
+    }, [flatColumnsRaw, pinnedColumns]);
     const visibleCols = useMemo(() => {
         const filtered = visibleColumns
             ? flatColumns.filter((c) => visibleColumns.has(c.columnId))
@@ -146,12 +160,20 @@ export function useDataGridState(params) {
         measure();
         return () => ro.disconnect();
     }, [wrapperRef]);
+    const [columnSizingOverrides, setColumnSizingOverrides] = useState(() => {
+        if (!initialColumnWidths)
+            return {};
+        const result = {};
+        for (const [id, width] of Object.entries(initialColumnWidths)) {
+            result[id] = { widthPx: width };
+        }
+        return result;
+    });
     const minTableWidth = useMemo(() => {
         const PADDING = 16;
         const checkboxW = hasCheckboxCol ? 48 : 0;
         return visibleCols.reduce((sum, c) => sum + (c.minWidth ?? 80) + PADDING, checkboxW);
     }, [visibleCols, hasCheckboxCol]);
-    const [columnSizingOverrides, setColumnSizingOverrides] = useState({});
     useEffect(() => {
         const colIds = new Set(flatColumns.map((c) => c.columnId));
         setColumnSizingOverrides((prev) => {
@@ -166,11 +188,28 @@ export function useDataGridState(params) {
             return changed ? next : prev;
         });
     }, [flatColumns]);
-    const statusBarConfig = useMemo(() => getDataGridStatusBarConfig(statusBar, items.length, selectedRowIds.size), [statusBar, items.length, selectedRowIds.size]);
+    const desiredTableWidth = useMemo(() => {
+        const PADDING = 16;
+        const checkboxW = hasCheckboxCol ? 48 : 0;
+        return visibleCols.reduce((sum, c) => {
+            const override = columnSizingOverrides[c.columnId];
+            const w = override
+                ? override.widthPx
+                : (c.idealWidth ?? c.defaultWidth ?? c.minWidth ?? 80);
+            return sum + Math.max(c.minWidth ?? 80, w) + PADDING;
+        }, checkboxW);
+    }, [visibleCols, columnSizingOverrides, hasCheckboxCol]);
+    const aggregation = useMemo(() => computeAggregations(items, visibleCols, cellSelection ? selectionRange : null), [items, visibleCols, selectionRange, cellSelection]);
+    const statusBarConfig = useMemo(() => {
+        const base = getDataGridStatusBarConfig(statusBar, items.length, selectedRowIds.size);
+        if (!base)
+            return null;
+        return { ...base, aggregation: aggregation ?? undefined };
+    }, [statusBar, items.length, selectedRowIds.size, aggregation]);
     const showEmptyInGrid = items.length === 0 && !!emptyState;
     const hasCellSelection = selectionRange != null || activeCell != null;
     // --- View-model inputs (shared across all 3 DataGridTables) ---
-    const { sortBy, sortDirection, onColumnSort, textFilters = {}, onTextFilterChange, peopleFilters = {}, onPeopleFilterChange, peopleSearch, filterOptions, loadingFilterOptions, multiSelectFilters, onMultiSelectFilterChange, } = props;
+    const { sortBy, sortDirection, onColumnSort, textFilters = {}, onTextFilterChange, peopleFilters = {}, onPeopleFilterChange, peopleSearch, filterOptions, loadingFilterOptions, multiSelectFilters, onMultiSelectFilterChange, dateFilters = {}, onDateFilterChange, } = props;
     const headerFilterInput = useMemo(() => ({
         sortBy,
         sortDirection,
@@ -184,6 +223,8 @@ export function useDataGridState(params) {
         loadingFilterOptions,
         multiSelectFilters,
         onMultiSelectFilterChange,
+        dateFilters,
+        onDateFilterChange,
     }), [
         sortBy,
         sortDirection,
@@ -197,6 +238,8 @@ export function useDataGridState(params) {
         loadingFilterOptions,
         multiSelectFilters,
         onMultiSelectFilterChange,
+        dateFilters,
+        onDateFilterChange,
     ]);
     const cellDescriptorInput = useMemo(() => ({
         editingCell,
@@ -302,8 +345,10 @@ export function useDataGridState(params) {
         handleFillHandleMouseDown: cellSelection ? handleFillHandleMouseDown : NOOP,
         containerWidth,
         minTableWidth,
+        desiredTableWidth,
         columnSizingOverrides,
         setColumnSizingOverrides,
+        onColumnResized,
         headerFilterInput,
         cellDescriptorInput,
         commitCellEdit,