@alaarab/ogrid-core 1.4.0 → 1.6.0

package/dist/esm/components/OGridLayout.js

@@ -35,6 +35,7 @@ const footerStripStyle = {
 const gridAreaFlexStyle = {
     width: '100%',
     minWidth: 0,
+    minHeight: 0,
     flex: 1,
     display: 'flex',
 };
@@ -55,7 +56,6 @@ const gridChildStyle = {
 };
 /**
  * Renders OGrid layout as a unified bordered container:
- *   [deprecated title above]
  *   ┌────────────────────────────────────┐
  *   │ [toolbar strip]                    │
  *   ├────────────────────────────────────┤
@@ -65,18 +65,14 @@ const gridChildStyle = {
  *   └────────────────────────────────────┘
  */
 export function OGridLayout(props) {
-    const { containerComponent: Container = 'div', containerProps = {}, gap = 8, className, title, toolbar, columnChooser, toolbarEnd: toolbarEndProp, children, pagination, sideBar, } = props;
+    const { containerComponent: Container = 'div', containerProps = {}, className, toolbar, toolbarEnd, 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',
         height: '100%',
-        gap: title != null ? (typeof gap === 'number' ? `${gap}px` : gap) : undefined,
     };
-    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 }))] })] }));
+    return (_jsx(Container, { className: className, style: rootStyle, ...containerProps, children: _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

@@ -6,7 +6,7 @@ const PANEL_LABELS = {
     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 { activePanel, onPanelChange, panels, position, columns, visibleColumns, onVisibilityChange, onSetVisibleColumns, filterableColumns, filters, onFilterChange, filterOptions, } = props;
     const isOpen = activePanel !== null;
     const handleTabClick = (panel) => {
         onPanelChange(activePanel === panel ? null : panel);
@@ -47,7 +47,7 @@ export function SideBar(props) {
                     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;
+                }, 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, filters: filters, onFilterChange: onFilterChange, 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 ---
@@ -70,28 +70,30 @@ function ColumnsPanel(props) {
     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;
+    const { filterableColumns, filters, onFilterChange, 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) => {
+            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: filters[filterKey]?.type === 'text' ? filters[filterKey].value : '', onChange: (e) => onFilterChange(filterKey, e.target.value ? { type: 'text', value: e.target.value } : undefined), 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: filters[filterKey]?.type === 'date' ? (filters[filterKey].value.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 existingValue = filters[filterKey]?.type === 'date' ? filters[filterKey].value : {};
+                                            const to = existingValue.to;
+                                            onFilterChange(filterKey, from || to ? { type: 'date', value: { 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: filters[filterKey]?.type === 'date' ? (filters[filterKey].value.to ?? '') : '', onChange: (e) => {
                                             const to = e.target.value || undefined;
-                                            const from = dateFilters[filterKey]?.from;
-                                            onDateFilterChange(filterKey, from || to ? { from, to } : undefined);
+                                            const existingValue = filters[filterKey]?.type === 'date' ? filters[filterKey].value : {};
+                                            const from = existingValue.from;
+                                            onFilterChange(filterKey, from || to ? { type: 'date', value: { 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);
+                            const selected = filters[filterKey]?.type === 'multiSelect' ? filters[filterKey].value.includes(opt) : false;
                             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 current = filters[filterKey]?.type === 'multiSelect' ? filters[filterKey].value : [];
                                             const next = e.target.checked
                                                 ? [...current, opt]
                                                 : current.filter((v) => v !== opt);
-                                            onMultiSelectFilterChange(filterKey, next);
+                                            onFilterChange(filterKey, next.length > 0 ? { type: 'multiSelect', value: next } : undefined);
                                         } }), _jsx("span", { children: opt })] }, opt));
                         }) }))] }, col.columnId));
         }) }));

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/useColumnResize.js

@@ -1,50 +1,64 @@
-import { useCallback, useRef, useEffect } from 'react';
+import { useCallback, useRef } from 'react';
 export function useColumnResize({ columnSizingOverrides, setColumnSizingOverrides, minWidth = 80, defaultWidth = 120, onColumnResized, }) {
-    const resizingRef = useRef(null);
+    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
-            ?? col.idealWidth
-            ?? col.defaultWidth
-            ?? defaultWidth;
-        resizingRef.current = {
-            columnId: col.columnId,
-            startX: e.clientX,
-            startWidth: currentWidth,
+        const startX = e.clientX;
+        const columnId = col.columnId;
+        // Measure the actual rendered width from the DOM. With table-layout: auto,
+        // the browser may have auto-sized the column wider than the config values.
+        // The resize handle is a direct child of <th>, so parentElement is the header cell.
+        const thEl = e.currentTarget.parentElement;
+        const startWidth = thEl
+            ? thEl.getBoundingClientRect().width
+            : columnSizingOverrides[columnId]?.widthPx
+                ?? col.idealWidth
+                ?? col.defaultWidth
+                ?? defaultWidth;
+        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(() => {
-        if (resizingRef.current && onColumnResized) {
-            const { columnId } = resizingRef.current;
-            const width = columnSizingOverrides[columnId]?.widthPx;
-            if (width != null) {
-                onColumnResized(columnId, width);
+        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);
             }
-        }
-        resizingRef.current = null;
-    }, [onColumnResized, columnSizingOverrides]);
-    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);
         };
-    }, [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

@@ -23,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, initialColumnWidths, onColumnResized, } = 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))
@@ -159,13 +172,8 @@ export function useDataGridState(params) {
     const minTableWidth = useMemo(() => {
         const PADDING = 16;
         const checkboxW = hasCheckboxCol ? 48 : 0;
-        return visibleCols.reduce((sum, c) => {
-            // Use the widest explicit width: resize override > idealWidth > defaultWidth > minWidth > 80
-            const override = columnSizingOverrides[c.columnId];
-            const w = override?.widthPx ?? c.idealWidth ?? c.defaultWidth ?? c.minWidth ?? 80;
-            return sum + w + PADDING;
-        }, checkboxW);
-    }, [visibleCols, hasCheckboxCol, columnSizingOverrides]);
+        return visibleCols.reduce((sum, c) => sum + (c.minWidth ?? 80) + PADDING, checkboxW);
+    }, [visibleCols, hasCheckboxCol]);
     useEffect(() => {
         const colIds = new Set(flatColumns.map((c) => c.columnId));
         setColumnSizingOverrides((prev) => {
@@ -201,37 +209,25 @@ export function useDataGridState(params) {
     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, dateFilters = {}, onDateFilterChange, } = props;
+    const { sortBy, sortDirection, onColumnSort, filters, onFilterChange, filterOptions, loadingFilterOptions, peopleSearch, } = props;
     const headerFilterInput = useMemo(() => ({
         sortBy,
         sortDirection,
         onColumnSort,
-        textFilters,
-        onTextFilterChange,
-        peopleFilters,
-        onPeopleFilterChange,
-        peopleSearch,
+        filters,
+        onFilterChange,
         filterOptions,
         loadingFilterOptions,
-        multiSelectFilters,
-        onMultiSelectFilterChange,
-        dateFilters,
-        onDateFilterChange,
+        peopleSearch,
     }), [
         sortBy,
         sortDirection,
         onColumnSort,
-        textFilters,
-        onTextFilterChange,
-        peopleFilters,
-        onPeopleFilterChange,
-        peopleSearch,
+        filters,
+        onFilterChange,
         filterOptions,
         loadingFilterOptions,
-        multiSelectFilters,
-        onMultiSelectFilterChange,
-        dateFilters,
-        onDateFilterChange,
+        peopleSearch,
     ]);
     const cellDescriptorInput = useMemo(() => ({
         editingCell,
@@ -297,59 +293,71 @@ export function useDataGridState(params) {
         setPendingEditorValue(undefined);
     }, [setEditingCell, setPendingEditorValue]);
     return {
-        flatColumns,
-        visibleCols,
-        visibleColumnCount,
-        totalColCount,
-        colOffset,
-        hasCheckboxCol,
-        rowIndexByRowId,
-        selectedRowIds,
-        updateSelection,
-        handleRowCheckboxChange,
-        handleSelectAll,
-        allSelected,
-        someSelected,
-        editingCell,
-        setEditingCell,
-        pendingEditorValue,
-        setPendingEditorValue,
-        activeCell: cellSelection ? activeCell : null,
-        setActiveCell: cellSelection ? setActiveCell : NOOP,
-        selectionRange: cellSelection ? selectionRange : null,
-        setSelectionRange: cellSelection ? setSelectionRange : NOOP,
-        handleCellMouseDown: cellSelection ? handleCellMouseDown : NOOP_MOUSE,
-        handleSelectAllCells: cellSelection ? handleSelectAllCells : NOOP,
-        contextMenu: cellSelection ? contextMenu : null,
-        setContextMenu: cellSelection ? setContextMenu : NOOP,
-        handleCellContextMenu: cellSelection ? handleCellContextMenu : NOOP_CTX,
-        closeContextMenu: cellSelection ? closeContextMenu : NOOP,
-        canUndo: undoRedo.canUndo,
-        canRedo: undoRedo.canRedo,
-        onUndo: undoRedo.undo,
-        onRedo: undoRedo.redo,
-        handleCopy: cellSelection ? handleCopy : NOOP,
-        handleCut: cellSelection ? handleCut : NOOP,
-        handlePaste: cellSelection ? handlePaste : NOOP_ASYNC,
-        cutRange: cellSelection ? cutRange : null,
-        copyRange: cellSelection ? copyRange : null,
-        handleGridKeyDown: cellSelection ? handleGridKeyDown : NOOP_KEY,
-        handleFillHandleMouseDown: cellSelection ? handleFillHandleMouseDown : NOOP,
-        containerWidth,
-        minTableWidth,
-        desiredTableWidth,
-        columnSizingOverrides,
-        setColumnSizingOverrides,
-        onColumnResized,
-        headerFilterInput,
-        cellDescriptorInput,
-        commitCellEdit,
-        cancelPopoverEdit,
-        popoverAnchorEl,
-        setPopoverAnchorEl,
-        clearClipboardRanges: cellSelection ? clearClipboardRanges : NOOP,
-        statusBarConfig,
-        showEmptyInGrid,
-        hasCellSelection: cellSelection ? hasCellSelection : false,
+        layout: {
+            flatColumns,
+            visibleCols,
+            visibleColumnCount,
+            totalColCount,
+            colOffset,
+            hasCheckboxCol,
+            rowIndexByRowId,
+            containerWidth,
+            minTableWidth,
+            desiredTableWidth,
+            columnSizingOverrides,
+            setColumnSizingOverrides,
+            onColumnResized,
+        },
+        rowSelection: {
+            selectedRowIds,
+            updateSelection,
+            handleRowCheckboxChange,
+            handleSelectAll,
+            allSelected,
+            someSelected,
+        },
+        editing: {
+            editingCell,
+            setEditingCell,
+            pendingEditorValue,
+            setPendingEditorValue,
+            commitCellEdit,
+            cancelPopoverEdit,
+            popoverAnchorEl,
+            setPopoverAnchorEl,
+        },
+        interaction: {
+            activeCell: cellSelection ? activeCell : null,
+            setActiveCell: cellSelection ? setActiveCell : NOOP,
+            selectionRange: cellSelection ? selectionRange : null,
+            setSelectionRange: cellSelection ? setSelectionRange : NOOP,
+            handleCellMouseDown: cellSelection ? handleCellMouseDown : NOOP_MOUSE,
+            handleSelectAllCells: cellSelection ? handleSelectAllCells : NOOP,
+            hasCellSelection: cellSelection ? hasCellSelection : false,
+            handleGridKeyDown: cellSelection ? handleGridKeyDown : NOOP_KEY,
+            handleFillHandleMouseDown: cellSelection ? handleFillHandleMouseDown : NOOP,
+            handleCopy: cellSelection ? handleCopy : NOOP,
+            handleCut: cellSelection ? handleCut : NOOP,
+            handlePaste: cellSelection ? handlePaste : NOOP_ASYNC,
+            cutRange: cellSelection ? cutRange : null,
+            copyRange: cellSelection ? copyRange : null,
+            clearClipboardRanges: cellSelection ? clearClipboardRanges : NOOP,
+            canUndo: undoRedo.canUndo,
+            canRedo: undoRedo.canRedo,
+            onUndo: undoRedo.undo,
+            onRedo: undoRedo.redo,
+        },
+        contextMenu: {
+            menuPosition: cellSelection ? contextMenu : null,
+            setMenuPosition: cellSelection ? setContextMenu : NOOP,
+            handleCellContextMenu: cellSelection ? handleCellContextMenu : NOOP_CTX,
+            closeContextMenu: cellSelection ? closeContextMenu : NOOP,
+        },
+        viewModels: {
+            headerFilterInput,
+            cellDescriptorInput,
+            statusBarConfig,
+            showEmptyInGrid,
+        },
     };
 }