@alaarab/ogrid-react-material 2.0.9 → 2.0.12

package/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <strong>OGrid for Material UI</strong> — The lightweight React data grid with enterprise features and zero enterprise cost.
+  <strong>OGrid for React Material</strong> — The lightweight React data grid with enterprise features and zero enterprise cost.
 </p>
 
 <p align="center">

package/dist/esm/ColumnChooser/ColumnChooser.js

@@ -26,7 +26,7 @@ export const ColumnChooser = (props) => {
         ev.stopPropagation();
         setColumnVisible(columnKey)(ev.target.checked);
     };
-    return (_jsxs(Box, { className: className, sx: { display: 'inline-flex' }, children: [_jsxs(Button, { ref: buttonRef, variant: "outlined", size: "small", startIcon: _jsx(ViewColumnIcon, {}), endIcon: isOpen ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}), onClick: handleToggle, "aria-expanded": isOpen, "aria-haspopup": "listbox", sx: {
+    return (_jsxs(Box, { className: className, sx: { display: 'inline-flex' }, children: [_jsxs(Button, { ref: buttonRef, variant: "outlined", size: "small", color: "inherit", startIcon: _jsx(ViewColumnIcon, {}), endIcon: isOpen ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}), onClick: handleToggle, "aria-expanded": isOpen, "aria-haspopup": "listbox", sx: {
                     textTransform: 'none',
                     fontWeight: 600,
                     borderColor: isOpen ? 'primary.main' : 'divider',
@@ -39,7 +39,7 @@ export const ColumnChooser = (props) => {
                             py: 1,
                             borderBottom: 1,
                             borderColor: 'divider',
-                            bgcolor: 'grey.50',
+                            bgcolor: 'action.hover',
                         }, children: _jsxs(Typography, { variant: "subtitle2", fontWeight: 600, children: ["Select Columns (", visibleCount, " of ", totalCount, ")"] }) }), _jsx(Box, { sx: { maxHeight: 320, overflowY: 'auto', py: 0.5 }, children: columns.map((column) => (_jsx(Box, { sx: { px: 1.5, minHeight: 32, display: 'flex', alignItems: 'center' }, children: _jsx(FormControlLabel, { control: _jsx(Checkbox, { size: "small", checked: visibleColumns.has(column.columnId), onChange: handleCheckboxChange(column.columnId) }), label: _jsx(Typography, { variant: "body2", children: column.name }), sx: { m: 0 } }) }, column.columnId))) }), _jsxs(Box, { sx: {
                             display: 'flex',
                             justifyContent: 'flex-end',
@@ -48,6 +48,6 @@ export const ColumnChooser = (props) => {
                             py: 1,
                             borderTop: 1,
                             borderColor: 'divider',
-                            bgcolor: 'grey.50',
+                            bgcolor: 'action.hover',
                         }, children: [_jsx(Button, { size: "small", onClick: handleClearAll, sx: { textTransform: 'none' }, children: "Clear All" }), _jsx(Button, { size: "small", variant: "contained", onClick: handleSelectAll, sx: { textTransform: 'none' }, children: "Select All" })] })] })] }));
 };

package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.js

@@ -2,46 +2,20 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { Popover, Tooltip, IconButton, Box, Typography } from '@mui/material';
 import { ArrowUpward as ArrowUpwardIcon, ArrowDownward as ArrowDownwardIcon, SwapVert as SwapVertIcon, FilterList as FilterListIcon, } from '@mui/icons-material';
-import { useColumnHeaderFilterState } from '@alaarab/ogrid-react';
+import { useColumnHeaderFilterState, getColumnHeaderFilterStateParams, renderFilterContent, } from '@alaarab/ogrid-react';
 import { TextFilterPopover } from './TextFilterPopover';
 import { MultiSelectFilterPopover } from './MultiSelectFilterPopover';
 import { PeopleFilterPopover } from './PeopleFilterPopover';
+const materialRenderers = {
+    renderMultiSelect: (p) => (_jsx(MultiSelectFilterPopover, { searchText: p.searchText, onSearchChange: p.onSearchChange, options: p.options, filteredOptions: p.filteredOptions, selected: p.selected, onOptionToggle: p.onOptionToggle, onSelectAll: p.onSelectAll, onClearSelection: p.onClearSelection, onApply: p.onApply, isLoading: p.isLoading })),
+    renderText: (p) => (_jsx(TextFilterPopover, { value: p.value, onValueChange: p.onValueChange, onApply: p.onApply, onClear: p.onClear })),
+    renderPeople: (p) => (_jsx(PeopleFilterPopover, { selectedUser: p.selectedUser, searchText: p.searchText, onSearchChange: p.onSearchChange, suggestions: p.suggestions, isLoading: p.isLoading, onUserSelect: p.onUserSelect, onClearUser: p.onClearUser, inputRef: p.inputRef })),
+    renderDate: (p) => (_jsxs(Box, { sx: { p: 1.5, display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Typography, { variant: "caption", sx: { minWidth: 36 }, children: "From:" }), _jsx("input", { type: "date", value: p.tempDateFrom, onChange: (e) => p.setTempDateFrom(e.target.value), style: { flex: 1, padding: '4px 6px' } })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Typography, { variant: "caption", sx: { minWidth: 36 }, children: "To:" }), _jsx("input", { type: "date", value: p.tempDateTo, onChange: (e) => p.setTempDateTo(e.target.value), style: { flex: 1, padding: '4px 6px' } })] }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end', gap: 1, mt: 0.5 }, children: [_jsx("button", { onClick: p.onClear, disabled: !p.tempDateFrom && !p.tempDateTo, style: { padding: '4px 12px', cursor: 'pointer' }, children: "Clear" }), _jsx("button", { onClick: p.onApply, style: { padding: '4px 12px', cursor: 'pointer' }, children: "Apply" })] })] })),
+};
 export const ColumnHeaderFilter = React.memo((props) => {
-    const { columnName, filterType, isSorted = false, isSortedDescending = false, onSort, selectedValues, onFilterChange, options = [], isLoadingOptions = false, textValue = '', onTextChange, selectedUser, onUserChange, peopleSearch, dateValue, onDateChange, } = props;
-    const state = useColumnHeaderFilterState({
-        filterType,
-        isSorted,
-        isSortedDescending,
-        onSort,
-        selectedValues,
-        onFilterChange,
-        options,
-        isLoadingOptions,
-        textValue,
-        onTextChange,
-        selectedUser,
-        onUserChange,
-        peopleSearch,
-        dateValue,
-        onDateChange,
-    });
-    const { headerRef, peopleInputRef, isFilterOpen, setFilterOpen, tempSelected, tempTextValue, setTempTextValue, searchText, setSearchText, filteredOptions, peopleSuggestions, isPeopleLoading, peopleSearchText, setPeopleSearchText, hasActiveFilter, popoverPosition, handlers, } = state;
-    const safeOptions = options ?? [];
-    const renderPopoverContent = () => {
-        if (filterType === 'multiSelect') {
-            return (_jsx(MultiSelectFilterPopover, { searchText: searchText, onSearchChange: setSearchText, options: safeOptions, filteredOptions: filteredOptions, selected: tempSelected, onOptionToggle: handlers.handleCheckboxChange, onSelectAll: handlers.handleSelectAll, onClearSelection: handlers.handleClearSelection, onApply: handlers.handleApplyMultiSelect, isLoading: isLoadingOptions }));
-        }
-        if (filterType === 'text') {
-            return (_jsx(TextFilterPopover, { value: tempTextValue, onValueChange: setTempTextValue, onApply: handlers.handleTextApply, onClear: handlers.handleTextClear }));
-        }
-        if (filterType === 'people') {
-            return (_jsx(PeopleFilterPopover, { selectedUser: selectedUser, searchText: peopleSearchText, onSearchChange: setPeopleSearchText, suggestions: peopleSuggestions, isLoading: isPeopleLoading, onUserSelect: handlers.handleUserSelect, onClearUser: handlers.handleClearUser, inputRef: peopleInputRef }));
-        }
-        if (filterType === 'date') {
-            return (_jsxs(Box, { sx: { p: 1.5, display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Typography, { variant: "caption", sx: { minWidth: 36 }, children: "From:" }), _jsx("input", { type: "date", value: state.tempDateFrom, onChange: (e) => state.setTempDateFrom(e.target.value), style: { flex: 1, padding: '4px 6px' } })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Typography, { variant: "caption", sx: { minWidth: 36 }, children: "To:" }), _jsx("input", { type: "date", value: state.tempDateTo, onChange: (e) => state.setTempDateTo(e.target.value), style: { flex: 1, padding: '4px 6px' } })] }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end', gap: 1, mt: 0.5 }, children: [_jsx("button", { onClick: handlers.handleDateClear, disabled: !state.tempDateFrom && !state.tempDateTo, style: { padding: '4px 12px', cursor: 'pointer' }, children: "Clear" }), _jsx("button", { onClick: handlers.handleDateApply, style: { padding: '4px 12px', cursor: 'pointer' }, children: "Apply" })] })] }));
-        }
-        return null;
-    };
+    const { columnName, filterType, isSorted = false, isSortedDescending = false, onSort, options = [], isLoadingOptions = false, selectedUser, } = props;
+    const state = useColumnHeaderFilterState(getColumnHeaderFilterStateParams(props));
+    const { headerRef, isFilterOpen, setFilterOpen, hasActiveFilter, popoverPosition, handlers, } = state;
     return (_jsxs(Box, { ref: headerRef, sx: { display: 'flex', alignItems: 'center', width: '100%', minWidth: 0 }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0, overflow: 'hidden' }, children: _jsx(Tooltip, { title: columnName, arrow: true, children: _jsx(Typography, { variant: "body2", fontWeight: 600, noWrap: true, "data-header-label": true, sx: { lineHeight: 1.4 }, children: columnName }) }) }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', ml: 0.5, flexShrink: 0 }, children: [onSort && (_jsx(IconButton, { size: "small", onClick: handlers.handleSortClick, "aria-label": `Sort by ${columnName}`, title: isSorted ? (isSortedDescending ? 'Sorted descending' : 'Sorted ascending') : 'Sort', color: isSorted ? 'primary' : 'default', sx: { p: 0.25 }, children: isSorted ? (isSortedDescending ? (_jsx(ArrowDownwardIcon, { sx: { fontSize: 16 } })) : (_jsx(ArrowUpwardIcon, { sx: { fontSize: 16 } }))) : (_jsx(SwapVertIcon, { sx: { fontSize: 16 } })) })), filterType !== 'none' && (_jsxs(IconButton, { size: "small", onClick: handlers.handleFilterIconClick, "aria-label": `Filter ${columnName}`, title: `Filter ${columnName}`, color: hasActiveFilter || isFilterOpen ? 'primary' : 'default', sx: { p: 0.25, position: 'relative' }, children: [_jsx(FilterListIcon, { sx: { fontSize: 16 } }), hasActiveFilter && (_jsx(Box, { sx: {
                                     position: 'absolute',
                                     top: 2,
@@ -55,6 +29,6 @@ export const ColumnHeaderFilter = React.memo((props) => {
                         sx: { mt: 0.5, overflow: 'visible' },
                         onClick: (e) => e.stopPropagation(),
                     },
-                }, children: [_jsx(Box, { sx: { borderBottom: 1, borderColor: 'divider', px: 1.5, py: 1 }, children: _jsxs(Typography, { variant: "subtitle2", children: ["Filter: ", columnName] }) }), renderPopoverContent()] })] }));
+                }, children: [_jsx(Box, { sx: { borderBottom: 1, borderColor: 'divider', px: 1.5, py: 1 }, children: _jsxs(Typography, { variant: "subtitle2", children: ["Filter: ", columnName] }) }), renderFilterContent(filterType, state, options ?? [], isLoadingOptions, selectedUser, materialRenderers)] })] }));
 });
 ColumnHeaderFilter.displayName = 'ColumnHeaderFilter';

package/dist/esm/ColumnHeaderMenu/ColumnHeaderMenu.js

@@ -1,39 +1,53 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React from 'react';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import IconButton from '@mui/material/IconButton';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
-import { COLUMN_HEADER_MENU_ITEMS } from '@alaarab/ogrid-core';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo, useEffect, useState } from 'react';
+import { Menu, MenuItem, Divider } from '@mui/material';
+import { getColumnHeaderMenuItems } from '@alaarab/ogrid-core';
 /**
- * Column header dropdown menu for pin/unpin actions.
- * Uses Material UI Menu component.
+ * Column header dropdown menu for pin/sort/autosize actions.
+ * Uses Material UI Menu component with anchor position.
  */
 export function ColumnHeaderMenu(props) {
-    const { columnId, isOpen: _isOpen, anchorElement: _anchorElement, onClose, onPinLeft, onPinRight, onUnpin, canPinLeft, canPinRight, canUnpin, } = props;
-    const [triggerEl, setTriggerEl] = React.useState(null);
-    const handleTriggerClick = (event) => {
-        event.stopPropagation();
-        setTriggerEl(event.currentTarget);
+    const { isOpen, anchorElement, onClose, onPinLeft, onPinRight, onUnpin, onSortAsc, onSortDesc, onClearSort, onAutosizeThis, onAutosizeAll, canPinLeft, canPinRight, canUnpin, currentSort, isSortable, isResizable, } = props;
+    const [anchorPosition, setAnchorPosition] = useState(undefined);
+    useEffect(() => {
+        if (isOpen && anchorElement) {
+            const rect = anchorElement.getBoundingClientRect();
+            setAnchorPosition({
+                top: rect.bottom + 4,
+                left: rect.left,
+            });
+        }
+        else {
+            setAnchorPosition(undefined);
+        }
+    }, [isOpen, anchorElement]);
+    const menuInput = useMemo(() => ({
+        canPinLeft,
+        canPinRight,
+        canUnpin,
+        currentSort,
+        isSortable,
+        isResizable,
+    }), [canPinLeft, canPinRight, canUnpin, currentSort, isSortable, isResizable]);
+    const items = useMemo(() => getColumnHeaderMenuItems(menuInput), [menuInput]);
+    const handlers = {
+        pinLeft: onPinLeft,
+        pinRight: onPinRight,
+        unpin: onUnpin,
+        sortAsc: onSortAsc,
+        sortDesc: onSortDesc,
+        clearSort: onClearSort,
+        autosizeThis: onAutosizeThis,
+        autosizeAll: onAutosizeAll,
     };
-    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { size: "small", onClick: handleTriggerClick, "aria-label": `Column options for ${columnId}`, sx: {
-                    opacity: 0,
-                    transition: 'opacity 0.15s',
-                    padding: '4px',
-                    '.MuiTableCell-root:hover &': {
-                        opacity: 1,
-                    },
-                    '&:focus': {
-                        opacity: 1,
-                    },
-                }, children: _jsx(MoreVertIcon, { fontSize: "small" }) }), _jsxs(Menu, { anchorEl: triggerEl, open: Boolean(triggerEl), onClose: () => {
-                    setTriggerEl(null);
-                    onClose();
-                }, anchorOrigin: {
-                    vertical: 'bottom',
-                    horizontal: 'left',
-                }, transformOrigin: {
-                    vertical: 'top',
-                    horizontal: 'left',
-                }, children: [_jsx(MenuItem, { disabled: !canPinLeft, onClick: onPinLeft, children: COLUMN_HEADER_MENU_ITEMS[0].label }), _jsx(MenuItem, { disabled: !canPinRight, onClick: onPinRight, children: COLUMN_HEADER_MENU_ITEMS[1].label }), _jsx(MenuItem, { disabled: !canUnpin, onClick: onUnpin, children: COLUMN_HEADER_MENU_ITEMS[2].label })] })] }));
+    return (_jsx(Menu, { open: isOpen && !!anchorPosition, onClose: onClose, anchorReference: "anchorPosition", anchorPosition: anchorPosition, slotProps: {
+            paper: {
+                sx: {
+                    minWidth: 140,
+                },
+            },
+        }, children: items.map((item, idx) => (_jsxs(React.Fragment, { children: [_jsx(MenuItem, { disabled: item.disabled, onClick: () => {
+                        handlers[item.id]();
+                        onClose();
+                    }, children: item.label }), item.divider && idx < items.length - 1 && _jsx(Divider, {})] }, item.id))) }));
 }

package/dist/esm/DataGridTable/DataGridTable.js

@@ -1,14 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
-import { useCallback, useRef, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { createPortal } from 'react-dom';
-import { Box, CircularProgress, Typography, Button, Popover, Checkbox, Table, TableHead, TableBody, TableRow, TableCell, TableContainer, } from '@mui/material';
+import { Box, Popover, Checkbox, Table, TableHead, TableBody, TableRow, TableCell, TableContainer, } from '@mui/material';
 import { ColumnHeaderFilter } from '../ColumnHeaderFilter';
 import { ColumnHeaderMenu } from '../ColumnHeaderMenu';
 import { InlineCellEditor } from './InlineCellEditor';
 import { StatusBar } from './StatusBar';
 import { GridContextMenu } from './GridContextMenu';
-import { useDataGridState, useColumnResize, useColumnReorder, useVirtualScroll, useLatestRef, getHeaderFilterConfig, getCellRenderDescriptor, MarchingAntsOverlay, buildHeaderRows, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, areGridRowPropsEqual, CellErrorBoundary, CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, } from '@alaarab/ogrid-react';
+import { EmptyState } from './EmptyState';
+import { LoadingOverlay } from './LoadingOverlay';
+import { DropIndicator } from './DropIndicator';
+import { useDataGridTableOrchestration, getHeaderFilterConfig, getCellRenderDescriptor, MarchingAntsOverlay, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, areGridRowPropsEqual, CellErrorBoundary, CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, PREVENT_DEFAULT, NOOP, STOP_PROPAGATION, } from '@alaarab/ogrid-react';
 // ── Module-scope stable styles (avoid per-render Emotion resolutions) ──
 const gridRootSx = { position: 'relative', flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' };
 // Row
@@ -18,7 +21,13 @@ const CHECKBOX_CELL_SX = { width: CHECKBOX_COLUMN_WIDTH, minWidth: CHECKBOX_COLU
 const CHECKBOX_WRAPPER_SX = { display: 'flex', alignItems: 'center', justifyContent: 'center' };
 const CHECKBOX_PLACEHOLDER_SX = { width: CHECKBOX_COLUMN_WIDTH, minWidth: CHECKBOX_COLUMN_WIDTH, p: 0 };
 // Header
-const STICKY_HEADER_SX = { position: 'sticky', top: 0, zIndex: 8, bgcolor: 'action.hover', '& th': { bgcolor: 'action.hover' } };
+const STICKY_HEADER_SX = {
+    /* Removed position: 'sticky', top: 0 - breaks horizontal sticky on pinned columns.
+       Instead, apply sticky to individual header cells (HEADER_BASE_SX). */
+    zIndex: 8,
+    bgcolor: 'action.hover',
+    '& th': { bgcolor: 'action.hover' }
+};
 const HEADER_ROW_SX = { bgcolor: 'action.hover' };
 const GROUP_HEADER_CELL_SX = { textAlign: 'center', fontWeight: 600, borderBottom: 2, borderColor: 'divider', py: 0.75 };
 // Density padding helper
@@ -34,6 +43,7 @@ const CELL_CONTENT_BASE_SX = {
     width: '100%', height: '100%', display: 'flex', alignItems: 'center', minWidth: 0,
     px: '10px', py: '6px', boxSizing: 'border-box', overflow: 'hidden',
     textOverflow: 'ellipsis', whiteSpace: 'nowrap', userSelect: 'none', outline: 'none',
+    '&:focus-visible': { outline: '2px solid', outlineColor: 'primary.main', outlineOffset: '-2px', zIndex: 3 },
 };
 const CELL_CONTENT_NUMERIC_SX = { ...CELL_CONTENT_BASE_SX, justifyContent: 'flex-end', textAlign: 'right' };
 const CELL_CONTENT_BOOLEAN_SX = { ...CELL_CONTENT_BASE_SX, justifyContent: 'center', textAlign: 'center' };
@@ -41,8 +51,9 @@ const CELL_CONTENT_EDITABLE_SX = { ...CELL_CONTENT_BASE_SX, cursor: 'cell' };
 const CELL_CONTENT_NUMERIC_EDITABLE_SX = { ...CELL_CONTENT_NUMERIC_SX, cursor: 'cell' };
 const CELL_CONTENT_BOOLEAN_EDITABLE_SX = { ...CELL_CONTENT_BOOLEAN_SX, cursor: 'cell' };
 // Cell overlay states (only applied to the few active/selected cells)
-const CELL_ACTIVE_SX = { outline: '2px solid var(--ogrid-selection, #217346)', outlineOffset: '-1px', zIndex: 2, position: 'relative', overflow: 'visible' };
-const CELL_IN_RANGE_SX = { bgcolor: 'var(--ogrid-bg-range, rgba(33, 115, 70, 0.12))' };
+// Active cell: theme-aware bg so dark mode doesn't show white (MUI action.hover adapts to theme)
+const CELL_ACTIVE_SX = { outline: '2px solid var(--ogrid-selection, #217346)', outlineOffset: '-1px', zIndex: 2, position: 'relative', overflow: 'visible', bgcolor: 'action.hover', '&:focus-visible': { outline: '2px solid var(--ogrid-selection, #217346)', outlineOffset: '-1px' } };
+const CELL_IN_RANGE_SX = { bgcolor: 'var(--ogrid-bg-range, rgba(33, 115, 70, 0.12))', '&:focus-visible': { outline: 'none' } };
 const CELL_CUT_RANGE_SX = { bgcolor: 'action.hover', opacity: 0.7 };
 // Pre-computed overlay variant arrays (avoid per-cell array allocation + filter)
 // Key: `${base}_${overlay}` where overlay is 'active' | 'range' | 'cut'
@@ -98,12 +109,46 @@ const FILL_HANDLE_SX = {
 };
 // Cell <td> positioning variants
 const CELL_TD_BASE_SX = { position: 'relative', p: 0, height: '1px' };
-const CELL_TD_PINNED_LEFT_SX = { ...CELL_TD_BASE_SX, position: 'sticky', left: 0, zIndex: 6, bgcolor: 'background.paper', willChange: 'transform', borderLeft: '2px solid', borderLeftColor: 'primary.main' };
-const CELL_TD_PINNED_RIGHT_SX = { ...CELL_TD_BASE_SX, position: 'sticky', right: 0, zIndex: 6, bgcolor: 'background.paper', willChange: 'transform', borderRight: '2px solid', borderRightColor: 'primary.main' };
+const CELL_TD_PINNED_LEFT_SX = {
+    ...CELL_TD_BASE_SX, position: 'sticky', left: 0, zIndex: 6,
+    bgcolor: 'background.paper', willChange: 'transform',
+    '&::after': {
+        content: '""', position: 'absolute', top: '-1px', right: '-4px', bottom: '-1px',
+        width: '4px', background: 'linear-gradient(to right, rgba(0,0,0,0.12), transparent)', pointerEvents: 'none',
+    },
+};
+const CELL_TD_PINNED_RIGHT_SX = {
+    ...CELL_TD_BASE_SX, position: 'sticky', right: 0, zIndex: 6,
+    bgcolor: 'background.paper', willChange: 'transform',
+    '&::before': {
+        content: '""', position: 'absolute', top: '-1px', left: '-4px', bottom: '-1px',
+        width: '4px', background: 'linear-gradient(to left, rgba(0,0,0,0.12), transparent)', pointerEvents: 'none',
+    },
+};
 // Header cell positioning variants
-const HEADER_BASE_SX = { fontWeight: 600, position: 'relative' };
-const HEADER_PINNED_LEFT_SX = { ...HEADER_BASE_SX, position: 'sticky', left: 0, top: 0, zIndex: 9, bgcolor: 'action.hover', willChange: 'transform', borderLeft: '2px solid', borderLeftColor: 'primary.main' };
-const HEADER_PINNED_RIGHT_SX = { ...HEADER_BASE_SX, position: 'sticky', right: 0, top: 0, zIndex: 9, bgcolor: 'action.hover', willChange: 'transform', borderRight: '2px solid', borderRightColor: 'primary.main' };
+const HEADER_BASE_SX = {
+    fontWeight: 600,
+    position: 'sticky', /* Enables vertical sticky for all headers */
+    top: 0, /* Sticky vertically */
+    zIndex: 8, /* Stack above body cells */
+    bgcolor: 'action.hover' /* Required for sticky overlap */
+};
+const HEADER_PINNED_LEFT_SX = {
+    ...HEADER_BASE_SX, position: 'sticky', left: 0, top: 0,
+    zIndex: 10, bgcolor: 'action.hover', willChange: 'transform',
+    '&::after': {
+        content: '""', position: 'absolute', top: '-1px', right: '-4px', bottom: '-1px',
+        width: '4px', background: 'linear-gradient(to right, rgba(0,0,0,0.12), transparent)', pointerEvents: 'none',
+    },
+};
+const HEADER_PINNED_RIGHT_SX = {
+    ...HEADER_BASE_SX, position: 'sticky', right: 0, top: 0,
+    zIndex: 10, bgcolor: 'action.hover', willChange: 'transform',
+    '&::before': {
+        content: '""', position: 'absolute', top: '-1px', left: '-4px', bottom: '-1px',
+        width: '4px', background: 'linear-gradient(to left, rgba(0,0,0,0.12), transparent)', pointerEvents: 'none',
+    },
+};
 // Resize handle
 const RESIZE_HANDLE_SX = {
     position: 'absolute', top: 0, right: '-3px', bottom: 0, width: '8px',
@@ -120,22 +165,9 @@ const WRAPPER_SCROLL_SX = { display: 'flex', flexDirection: 'column', minHeight:
 // Table wrapper
 const TABLE_WRAPPER_SX = { position: 'relative', opacity: 1 };
 const TABLE_WRAPPER_LOADING_SX = { position: 'relative', opacity: 0.6 };
-// Empty state
-const EMPTY_STATE_SX = { py: 4, px: 2, textAlign: 'center', borderTop: 1, borderColor: 'divider', bgcolor: 'action.hover' };
-// Loading overlay
-const LOADING_OVERLAY_SX = {
-    position: 'absolute', inset: 0, zIndex: 2,
-    display: 'flex', alignItems: 'center', justifyContent: 'center',
-    background: 'var(--ogrid-loading-bg, rgba(255,255,255,0.7))',
-};
-const LOADING_INNER_SX = {
-    display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1,
-    p: 2, bgcolor: 'background.paper', border: 1, borderColor: 'divider', borderRadius: 1,
-};
-// Module-scope event handlers
-const STOP_PROPAGATION = (e) => e.stopPropagation();
-const PREVENT_DEFAULT = (e) => { e.preventDefault(); };
-const NOOP = () => { };
+// TableBody — remove bottom border from last row so DataGridTable has no outer border
+// (the OGridLayout container provides the border/radius)
+const TABLE_BODY_SX = { '& tr:last-child td': { borderBottom: 'none' } };
 function GridRowInner(props) {
     const { item, rowIndex, rowId, isSelected, columnLayouts, renderCellContent, handleSingleRowClick, handleRowCheckboxChange, lastMouseShiftRef, hasCheckboxCol, hasRowNumbersCol, rowNumberOffset, } = props;
     return (_jsxs(TableRow, { selected: isSelected, "data-row-id": rowId, onClick: handleSingleRowClick, sx: ROW_HOVER_SX, children: [hasCheckboxCol && (_jsx(TableCell, { padding: "checkbox", sx: CHECKBOX_CELL_SX, children: _jsx(Box, { "data-row-index": rowIndex, "data-col-index": 0, onClick: STOP_PROPAGATION, sx: CHECKBOX_WRAPPER_SX, children: _jsx(Checkbox, { checked: isSelected, onChange: (_, checked) => handleRowCheckboxChange(rowId, checked, rowIndex, lastMouseShiftRef.current), size: "small", "aria-label": `Select row ${rowIndex + 1}` }) }) })), hasRowNumbersCol && (_jsx(TableCell, { sx: {
@@ -150,82 +182,32 @@ function GridRowInner(props) {
                     position: 'sticky',
                     left: hasCheckboxCol ? CHECKBOX_COLUMN_WIDTH : 0,
                     zIndex: 3,
-                }, children: rowNumberOffset + rowIndex + 1 })), columnLayouts.map((cl, colIdx) => (_jsx(TableCell, { sx: cl.tdSx, style: { minWidth: cl.minWidth, width: cl.width, maxWidth: cl.maxWidth }, children: renderCellContent(item, cl.col, rowIndex, colIdx) }, cl.col.columnId)))] }));
+                }, children: rowNumberOffset + rowIndex + 1 })), columnLayouts.map((cl, colIdx) => (_jsx(TableCell, { "data-column-id": cl.col.columnId, sx: [cl.tdSx, { minWidth: cl.minWidth, width: cl.width, maxWidth: cl.maxWidth }], children: renderCellContent(item, cl.col, rowIndex, colIdx) }, cl.col.columnId)))] }));
 }
 const GridRow = React.memo(GridRowInner, areGridRowPropsEqual);
 function DataGridTableInner(props) {
-    const wrapperRef = useRef(null);
-    const tableContainerRef = useRef(null);
-    const state = useDataGridState({ props, wrapperRef });
-    const lastMouseShiftRef = useRef(false);
-    const { layout, rowSelection: rowSel, editing, interaction, contextMenu: ctxMenu, viewModels, pinning } = state;
-    const { visibleCols, hasCheckboxCol, hasRowNumbersCol, colOffset, containerWidth, minTableWidth, desiredTableWidth, columnSizingOverrides, setColumnSizingOverrides } = layout;
-    const { selectedRowIds, updateSelection, handleRowCheckboxChange, handleSelectAll, allSelected, someSelected } = rowSel;
-    const { editingCell, setEditingCell, pendingEditorValue, setPendingEditorValue, commitCellEdit, cancelPopoverEdit, popoverAnchorEl, setPopoverAnchorEl } = editing;
-    const { setActiveCell, handleCellMouseDown, handleSelectAllCells, selectionRange, hasCellSelection, handleGridKeyDown, handleFillHandleMouseDown, handleCopy, handleCut, handlePaste, cutRange, copyRange, canUndo, canRedo, onUndo, onRedo, isDragging } = interaction;
-    const handlePasteVoid = useCallback(() => { void handlePaste(); }, [handlePaste]);
-    const { menuPosition, handleCellContextMenu, closeContextMenu } = ctxMenu;
-    const { headerFilterInput, cellDescriptorInput, statusBarConfig, showEmptyInGrid, onCellError } = viewModels;
-    const { items, getRowId, emptyState, layoutMode = 'fill', rowSelection = 'none', freezeRows, freezeCols, suppressHorizontalScroll, isLoading = false, loadingMessage = 'Loading\u2026', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, columnOrder, onColumnOrderChange, columnReorder, virtualScroll, density = 'normal', pinnedColumns, currentPage = 1, pageSize: propPageSize = 25, } = props;
-    // Calculate row number offset for pagination
-    const rowNumberOffset = hasRowNumbersCol ? (currentPage - 1) * propPageSize : 0;
-    const fitToContent = layoutMode === 'content';
-    const allowOverflowX = !suppressHorizontalScroll && containerWidth > 0 && (minTableWidth > containerWidth || desiredTableWidth > containerWidth);
+    const o = useDataGridTableOrchestration({ props });
+    const { wrapperRef, tableContainerRef, lastMouseShiftRef, interaction, pinning, handleResizeStart, getColumnWidth, isReorderDragging, dropIndicatorX, handleHeaderMouseDown, virtualScrollEnabled, visibleRange, items, getRowId, emptyState, freezeRows, freezeCols, suppressHorizontalScroll, isLoading, loadingMessage, ariaLabel, ariaLabelledBy, columnReorder, density, rowNumberOffset, headerRows, allowOverflowX, fitToContent, editCallbacks, interactionHandlers, cellDescriptorInputRef, pendingEditorValueRef, popoverAnchorElRef, handleSingleRowClick, handlePasteVoid, visibleCols, hasCheckboxCol, hasRowNumbersCol, colOffset, minTableWidth, columnSizingOverrides, selectedRowIds, handleRowCheckboxChange, handleSelectAll, allSelected, someSelected, editingCell, setPopoverAnchorEl, cancelPopoverEdit, setActiveCell, selectionRange, hasCellSelection, handleGridKeyDown, handleFillHandleMouseDown, handleCopy, handleCut, cutRange, copyRange, canUndo, canRedo, onUndo, onRedo, isDragging, menuPosition, closeContextMenu, headerFilterInput, statusBarConfig, showEmptyInGrid, onCellError, } = o;
     // Density-aware cell padding
     const densityPadding = useMemo(() => getDensityPadding(density), [density]);
     const _cellSx = useMemo(() => ({ ...CELL_CONTENT_BASE_SX, ...densityPadding }), [densityPadding]);
     const headerCellSx = useMemo(() => ({ px: densityPadding.px, py: densityPadding.py }), [densityPadding]);
-    // Memoize header rows (recursive tree traversal)
-    const headerRows = useMemo(() => buildHeaderRows(props.columns, props.visibleColumns), [props.columns, props.visibleColumns]);
-    const { handleResizeStart, getColumnWidth } = useColumnResize({
-        columnSizingOverrides,
-        setColumnSizingOverrides,
-    });
-    const { isDragging: isReorderDragging, dropIndicatorX, handleHeaderMouseDown } = useColumnReorder({
-        columns: visibleCols,
-        columnOrder,
-        onColumnOrderChange,
-        enabled: columnReorder === true,
-        pinnedColumns,
-        wrapperRef,
-    });
-    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,
-    });
     // Pre-compute per-column layout (tdSx, widths) so GridRow doesn't recalculate per-cell
     const columnLayouts = useMemo(() => visibleCols.map((col, colIdx) => {
         const isFreezeCol = freezeCols != null && freezeCols >= 1 && colIdx < freezeCols;
-        const isPinnedLeft = col.pinned === 'left';
-        const isPinnedRight = col.pinned === 'right';
+        const isPinnedLeft = pinning.pinnedColumns[col.columnId] === 'left';
+        const isPinnedRight = pinning.pinnedColumns[col.columnId] === 'right';
         const columnWidth = getColumnWidth(col);
-        const tdSx = isPinnedLeft || (isFreezeCol && colIdx === 0) ? CELL_TD_PINNED_LEFT_SX : isPinnedRight ? CELL_TD_PINNED_RIGHT_SX : CELL_TD_BASE_SX;
-        return { col, tdSx, minWidth: col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH, width: columnWidth, maxWidth: columnWidth };
-    }), [visibleCols, freezeCols, getColumnWidth]);
-    const editCallbacks = useMemo(() => ({ commitCellEdit, setEditingCell, setPendingEditorValue, cancelPopoverEdit }), [commitCellEdit, setEditingCell, setPendingEditorValue, cancelPopoverEdit]);
-    const interactionHandlers = useMemo(() => ({ handleCellMouseDown, setActiveCell, setEditingCell, handleCellContextMenu }), [handleCellMouseDown, setActiveCell, setEditingCell, handleCellContextMenu]);
-    // Refs for volatile state — lets renderCellContent be stable (same function ref across
-    // selection changes) so that GridRow's React.memo comparator can skip unaffected rows.
-    const cellDescriptorInputRef = useLatestRef(cellDescriptorInput);
-    const pendingEditorValueRef = useLatestRef(pendingEditorValue);
-    const popoverAnchorElRef = useLatestRef(popoverAnchorEl);
-    // Stable row-click handler
-    const selectedRowIdsRef = useLatestRef(selectedRowIds);
-    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]);
+        const baseTdSx = isPinnedLeft || (isFreezeCol && colIdx === 0) ? CELL_TD_PINNED_LEFT_SX : isPinnedRight ? CELL_TD_PINNED_RIGHT_SX : CELL_TD_BASE_SX;
+        // Override sticky offset for pinned columns (supports multiple pinned columns)
+        const tdSx = isPinnedLeft && pinning.leftOffsets[col.columnId] != null
+            ? { ...baseTdSx, left: pinning.leftOffsets[col.columnId] }
+            : isPinnedRight && pinning.rightOffsets[col.columnId] != null
+                ? { ...baseTdSx, right: pinning.rightOffsets[col.columnId] }
+                : baseTdSx;
+        const hasResizeOverride = !!columnSizingOverrides[col.columnId];
+        return { col, tdSx, minWidth: hasResizeOverride ? columnWidth : (col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH), width: columnWidth, maxWidth: columnWidth };
+    }), [visibleCols, freezeCols, getColumnWidth, columnSizingOverrides, pinning.pinnedColumns, pinning.leftOffsets, pinning.rightOffsets]);
     // Wrapper sx (depends on dynamic values — memoize to avoid recreation)
     const wrapperSx = useMemo(() => ({
         position: 'relative',
@@ -268,42 +250,82 @@ function DataGridTableInner(props) {
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps -- *Ref vars are stable refs from useLatestRef
     [editCallbacks, interactionHandlers, handleFillHandleMouseDown, setPopoverAnchorEl, cancelPopoverEdit, getRowId, onCellError]);
-    return (_jsxs(Box, { sx: gridRootSx, children: [_jsxs(Box, { ref: wrapperRef, tabIndex: 0, role: "region", "aria-label": ariaLabel ?? (ariaLabelledBy ? undefined : 'Data grid'), "aria-labelledby": ariaLabelledBy, onMouseDown: (e) => { lastMouseShiftRef.current = e.shiftKey; }, onKeyDown: handleGridKeyDown, onContextMenu: PREVENT_DEFAULT, "data-overflow-x": allowOverflowX ? 'true' : 'false', "data-density": density, sx: wrapperSx, children: [_jsx(Box, { sx: WRAPPER_SCROLL_SX, children: _jsx(TableContainer, { sx: { minWidth: allowOverflowX ? minTableWidth : undefined }, children: _jsxs(Box, { ref: tableContainerRef, sx: isLoading && items.length > 0 ? TABLE_WRAPPER_LOADING_SX : TABLE_WRAPPER_SX, children: [_jsxs(Table, { size: "small", sx: { overflow: 'hidden', minWidth: minTableWidth }, "data-freeze-rows": freezeRows != null && freezeRows >= 1 ? freezeRows : undefined, "data-freeze-cols": freezeCols != null && freezeCols >= 1 ? freezeCols : undefined, children: [_jsx(TableHead, { sx: STICKY_HEADER_SX, children: headerRows.map((row, rowIdx) => (_jsxs(TableRow, { sx: HEADER_ROW_SX, children: [rowIdx === headerRows.length - 1 && hasCheckboxCol && (_jsx(TableCell, { padding: "checkbox", rowSpan: headerRows.length > 1 ? 1 : undefined, sx: CHECKBOX_CELL_SX, children: _jsx(Checkbox, { checked: allSelected, indeterminate: someSelected, onChange: (_, c) => handleSelectAll(!!c), size: "small", "aria-label": "Select all rows" }) })), rowIdx === 0 && rowIdx < headerRows.length - 1 && hasCheckboxCol && (_jsx(TableCell, { rowSpan: headerRows.length - 1, sx: CHECKBOX_PLACEHOLDER_SX })), rowIdx === headerRows.length - 1 && hasRowNumbersCol && (_jsx(TableCell, { component: "th", scope: "col", rowSpan: headerRows.length > 1 ? 1 : undefined, sx: {
-                                                                width: ROW_NUMBER_COLUMN_WIDTH,
-                                                                minWidth: ROW_NUMBER_COLUMN_WIDTH,
-                                                                maxWidth: ROW_NUMBER_COLUMN_WIDTH,
-                                                                textAlign: 'center',
-                                                                fontWeight: 600,
-                                                                backgroundColor: 'action.hover',
-                                                                position: 'sticky',
-                                                                left: hasCheckboxCol ? CHECKBOX_COLUMN_WIDTH : 0,
-                                                                zIndex: 4,
-                                                                ...headerCellSx,
-                                                            }, children: "#" })), rowIdx === 0 && rowIdx < headerRows.length - 1 && hasRowNumbersCol && (_jsx(TableCell, { rowSpan: headerRows.length - 1, sx: {
-                                                                width: ROW_NUMBER_COLUMN_WIDTH,
-                                                                minWidth: ROW_NUMBER_COLUMN_WIDTH,
-                                                                position: 'sticky',
-                                                                left: hasCheckboxCol ? CHECKBOX_COLUMN_WIDTH : 0,
-                                                                zIndex: 4,
-                                                                backgroundColor: 'background.paper',
+    return (_jsxs(Box, { sx: gridRootSx, children: [_jsxs(Box, { ref: wrapperRef, tabIndex: 0, role: "region", "aria-label": ariaLabel ?? (ariaLabelledBy ? undefined : 'Data grid'), "aria-labelledby": ariaLabelledBy, onMouseDown: (e) => { lastMouseShiftRef.current = e.shiftKey; }, onKeyDown: handleGridKeyDown, onContextMenu: PREVENT_DEFAULT, "data-overflow-x": allowOverflowX ? 'true' : 'false', "data-density": density, sx: wrapperSx, children: [_jsx(Box, { sx: WRAPPER_SCROLL_SX, children: _jsx(TableContainer, { sx: { minWidth: allowOverflowX ? minTableWidth : undefined }, children: _jsxs(Box, { ref: tableContainerRef, sx: isLoading && items.length > 0 ? TABLE_WRAPPER_LOADING_SX : TABLE_WRAPPER_SX, children: [_jsxs(Table, { size: "small", sx: { minWidth: minTableWidth, borderCollapse: 'separate', borderSpacing: 0 }, "data-freeze-rows": freezeRows != null && freezeRows >= 1 ? freezeRows : undefined, "data-freeze-cols": freezeCols != null && freezeCols >= 1 ? freezeCols : undefined, children: [_jsx(TableHead, { sx: STICKY_HEADER_SX, children: headerRows.map((row, rowIdx) => (_jsxs(TableRow, { sx: HEADER_ROW_SX, children: [rowIdx === headerRows.length - 1 && hasCheckboxCol && (_jsx(TableCell, { ...{ padding: "checkbox", rowSpan: headerRows.length > 1 ? 1 : undefined, sx: CHECKBOX_CELL_SX }, children: _jsx(Checkbox, { checked: allSelected, indeterminate: someSelected, onChange: (_, c) => handleSelectAll(!!c), size: "small", "aria-label": "Select all rows" }) })), rowIdx === 0 && rowIdx < headerRows.length - 1 && hasCheckboxCol && (_jsx(TableCell, { ...{ rowSpan: headerRows.length - 1, sx: CHECKBOX_PLACEHOLDER_SX } })), rowIdx === headerRows.length - 1 && hasRowNumbersCol && (_jsx(TableCell, { ...{
+                                                                component: "th",
+                                                                scope: "col",
+                                                                rowSpan: headerRows.length > 1 ? 1 : undefined,
+                                                                sx: {
+                                                                    width: ROW_NUMBER_COLUMN_WIDTH,
+                                                                    minWidth: ROW_NUMBER_COLUMN_WIDTH,
+                                                                    maxWidth: ROW_NUMBER_COLUMN_WIDTH,
+                                                                    textAlign: 'center',
+                                                                    fontWeight: 600,
+                                                                    backgroundColor: 'action.hover',
+                                                                    position: 'sticky',
+                                                                    left: hasCheckboxCol ? CHECKBOX_COLUMN_WIDTH : 0,
+                                                                    zIndex: 4,
+                                                                    ...headerCellSx,
+                                                                }
+                                                            }, children: "#" })), rowIdx === 0 && rowIdx < headerRows.length - 1 && hasRowNumbersCol && (_jsx(TableCell, { ...{
+                                                                rowSpan: headerRows.length - 1,
+                                                                sx: {
+                                                                    width: ROW_NUMBER_COLUMN_WIDTH,
+                                                                    minWidth: ROW_NUMBER_COLUMN_WIDTH,
+                                                                    position: 'sticky',
+                                                                    left: hasCheckboxCol ? CHECKBOX_COLUMN_WIDTH : 0,
+                                                                    zIndex: 4,
+                                                                    backgroundColor: 'background.paper',
+                                                                }
                                                             } })), row.map((cell, cellIdx) => {
                                                             if (cell.isGroup) {
-                                                                return (_jsx(TableCell, { colSpan: cell.colSpan, component: "th", scope: "colgroup", sx: GROUP_HEADER_CELL_SX, children: cell.label }, cellIdx));
+                                                                return (_jsx(TableCell, { ...{
+                                                                        colSpan: cell.colSpan,
+                                                                        component: "th",
+                                                                        scope: "colgroup",
+                                                                        sx: GROUP_HEADER_CELL_SX
+                                                                    }, children: cell.label }, cellIdx));
                                                             }
                                                             // Leaf cell
                                                             const col = cell.columnDef;
                                                             const colIdx = visibleCols.indexOf(col);
                                                             const isFreezeCol = freezeCols != null && freezeCols >= 1 && colIdx < freezeCols;
-                                                            const isPinnedLeft = col.pinned === 'left';
-                                                            const isPinnedRight = col.pinned === 'right';
+                                                            const isPinnedLeft = pinning.pinnedColumns[col.columnId] === 'left';
+                                                            const isPinnedRight = pinning.pinnedColumns[col.columnId] === 'right';
                                                             const columnWidth = getColumnWidth(col);
-                                                            const headerSx = isPinnedLeft || (isFreezeCol && colIdx === 0) ? HEADER_PINNED_LEFT_SX : isPinnedRight ? HEADER_PINNED_RIGHT_SX : HEADER_BASE_SX;
-                                                            return (_jsxs(TableCell, { component: "th", scope: "col", "data-column-id": col.columnId, rowSpan: headerRows.length > 1 ? headerRows.length - rowIdx : undefined, sx: { ...headerSx, ...headerCellSx }, style: {
-                                                                    minWidth: col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH,
-                                                                    width: columnWidth,
-                                                                    maxWidth: columnWidth,
-                                                                    ...(columnReorder ? { cursor: isReorderDragging ? 'grabbing' : 'grab' } : undefined),
-                                                                }, onMouseDown: columnReorder ? (e) => handleHeaderMouseDown(col.columnId, e) : undefined, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5 }, children: [_jsx(ColumnHeaderFilter, { ...getHeaderFilterConfig(col, headerFilterInput) }), _jsx(Box, { component: "button", onClick: (e) => {
+                                                            const baseHeaderSx = isPinnedLeft || (isFreezeCol && colIdx === 0) ? HEADER_PINNED_LEFT_SX : isPinnedRight ? HEADER_PINNED_RIGHT_SX : HEADER_BASE_SX;
+                                                            // Override sticky offset for pinned columns (supports multiple pinned columns)
+                                                            const headerSx = isPinnedLeft && pinning.leftOffsets[col.columnId] != null
+                                                                ? { ...baseHeaderSx, left: pinning.leftOffsets[col.columnId] }
+                                                                : isPinnedRight && pinning.rightOffsets[col.columnId] != null
+                                                                    ? { ...baseHeaderSx, right: pinning.rightOffsets[col.columnId] }
+                                                                    : baseHeaderSx;
+                                                            // Determine aria-sort value for sorted columns
+                                                            const isSorted = props.sortBy === col.columnId;
+                                                            const ariaSort = isSorted
+                                                                ? (props.sortDirection === 'asc' ? 'ascending' : 'descending')
+                                                                : undefined;
+                                                            return (_jsxs(TableCell, { ...{
+                                                                    component: "th",
+                                                                    scope: "col",
+                                                                    'data-column-id': col.columnId,
+                                                                    rowSpan: headerRows.length > 1 ? headerRows.length - rowIdx : undefined,
+                                                                    'aria-sort': ariaSort,
+                                                                    sx: {
+                                                                        ...headerSx,
+                                                                        ...headerCellSx,
+                                                                        minWidth: col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH,
+                                                                        width: columnWidth,
+                                                                        maxWidth: columnWidth,
+                                                                        ...(columnReorder ? { cursor: isReorderDragging ? 'grabbing' : 'grab' } : {}),
+                                                                        '&:focus-visible': {
+                                                                            outline: '2px solid',
+                                                                            outlineColor: 'primary.main',
+                                                                            outlineOffset: '-2px',
+                                                                            zIndex: 11,
+                                                                        },
+                                                                    },
+                                                                    onMouseDown: columnReorder ? (e) => handleHeaderMouseDown(col.columnId, e) : undefined
+                                                                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5 }, children: [_jsx(ColumnHeaderFilter, { ...getHeaderFilterConfig(col, headerFilterInput) }), _jsx(Box, { component: "button", onClick: (e) => {
                                                                                     e.stopPropagation();
                                                                                     pinning.headerMenu.open(col.columnId, e.currentTarget);
                                                                                 }, "aria-label": "Column options", title: "Column options", sx: {
@@ -314,8 +336,8 @@ function DataGridTableInner(props) {
                                                                                     fontSize: '16px',
                                                                                     lineHeight: 1,
                                                                                     color: 'text.secondary',
-                                                                                    opacity: 0,
-                                                                                    transition: 'opacity 0.15s, background-color 0.15s',
+                                                                                    opacity: 1,
+                                                                                    transition: 'background-color 0.15s',
                                                                                     borderRadius: '3px',
                                                                                     display: 'flex',
                                                                                     alignItems: 'center',
@@ -324,13 +346,14 @@ function DataGridTableInner(props) {
                                                                                     height: '20px',
                                                                                     '&:hover': {
                                                                                         bgcolor: 'action.hover',
-                                                                                        opacity: 1,
-                                                                                    },
-                                                                                    'th:hover &': {
-                                                                                        opacity: 1,
                                                                                     },
-                                                                                }, children: "\u22EE" })] }), _jsx(Box, { onMouseDown: (e) => handleResizeStart(e, col), sx: RESIZE_HANDLE_SX })] }, col.columnId));
-                                                        })] }, rowIdx))) }), !showEmptyInGrid && (_jsxs(TableBody, { children: [virtualScrollEnabled && visibleRange.offsetTop > 0 && (_jsx(TableRow, { style: { height: visibleRange.offsetTop }, "aria-hidden": true })), (virtualScrollEnabled
+                                                                                }, children: "\u22EE" })] }), _jsx(Box, { onMouseDown: (e) => {
+                                                                            setActiveCell(null);
+                                                                            interaction.setSelectionRange(null);
+                                                                            wrapperRef.current?.focus({ preventScroll: true });
+                                                                            handleResizeStart(e, col);
+                                                                        }, sx: RESIZE_HANDLE_SX })] }, col.columnId));
+                                                        })] }, rowIdx))) }), !showEmptyInGrid && (_jsxs(TableBody, { sx: TABLE_BODY_SX, children: [virtualScrollEnabled && visibleRange.offsetTop > 0 && (_jsx(TableRow, { style: { height: visibleRange.offsetTop }, "aria-hidden": true })), (virtualScrollEnabled
                                                         ? items.slice(visibleRange.startIndex, visibleRange.endIndex + 1).map((item, i) => {
                                                             const rowIndex = visibleRange.startIndex + i;
                                                             const rowIdStr = getRowId(item);
@@ -339,17 +362,7 @@ function DataGridTableInner(props) {
                                                         : items.map((item, rowIndex) => {
                                                             const rowIdStr = getRowId(item);
                                                             return (_jsx(GridRow, { item: item, rowIndex: rowIndex, rowId: rowIdStr, isSelected: selectedRowIds.has(rowIdStr), columnLayouts: columnLayouts, renderCellContent: renderCellContent, handleSingleRowClick: handleSingleRowClick, handleRowCheckboxChange: handleRowCheckboxChange, lastMouseShiftRef: lastMouseShiftRef, hasCheckboxCol: hasCheckboxCol, hasRowNumbersCol: hasRowNumbersCol, rowNumberOffset: rowNumberOffset, selectionRange: selectionRange, activeCell: interaction.activeCell, cutRange: cutRange, copyRange: copyRange, isDragging: isDragging, editingRowId: editingCell?.rowId ?? null }, rowIdStr));
-                                                        })), virtualScrollEnabled && visibleRange.offsetBottom > 0 && (_jsx(TableRow, { style: { height: visibleRange.offsetBottom }, "aria-hidden": true }))] }))] }), isReorderDragging && dropIndicatorX != null && (_jsx(Box, { sx: {
-                                            position: 'absolute',
-                                            top: 0,
-                                            bottom: 0,
-                                            width: 3,
-                                            bgcolor: 'var(--ogrid-primary, #217346)',
-                                            pointerEvents: 'none',
-                                            zIndex: 100,
-                                            transition: 'left 0.05s',
-                                            left: dropIndicatorX - (wrapperRef.current?.getBoundingClientRect().left ?? 0),
-                                        } })), _jsx(MarchingAntsOverlay, { containerRef: tableContainerRef, selectionRange: selectionRange, copyRange: copyRange, cutRange: cutRange, colOffset: colOffset }), showEmptyInGrid && emptyState && (_jsx(Box, { sx: EMPTY_STATE_SX, children: emptyState.render ? (emptyState.render()) : (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: "No results found" }), _jsx(Typography, { variant: "body2", color: "text.secondary", children: emptyState.message != null ? (emptyState.message) : emptyState.hasActiveFilters ? (_jsxs(_Fragment, { children: ["No items match your current filters. Try adjusting your search or", ' ', _jsx(Button, { variant: "text", size: "small", onClick: emptyState.onClearAll, children: "clear all filters" }), ' ', "to see all items."] })) : ('There are no items available at this time.') })] })) }))] }) }) }), menuPosition &&
-                        createPortal(_jsx(GridContextMenu, { x: menuPosition.x, y: menuPosition.y, hasSelection: hasCellSelection, canUndo: canUndo, canRedo: canRedo, onUndo: onUndo ?? NOOP, onRedo: onRedo ?? NOOP, onCopy: handleCopy, onCut: handleCut, onPaste: handlePasteVoid, onSelectAll: handleSelectAllCells, onClose: closeContextMenu }), document.body), _jsx(ColumnHeaderMenu, { columnId: pinning.headerMenu.openForColumn || '', isOpen: pinning.headerMenu.isOpen, anchorElement: pinning.headerMenu.anchorElement, onClose: pinning.headerMenu.close, onPinLeft: pinning.headerMenu.handlePinLeft, onPinRight: pinning.headerMenu.handlePinRight, onUnpin: pinning.headerMenu.handleUnpin, canPinLeft: pinning.headerMenu.canPinLeft, canPinRight: pinning.headerMenu.canPinRight, canUnpin: pinning.headerMenu.canUnpin })] }), statusBarConfig && (_jsx(StatusBar, { totalCount: statusBarConfig.totalCount, filteredCount: statusBarConfig.filteredCount, selectedCount: statusBarConfig.selectedCount ?? selectedRowIds.size, selectedCellCount: selectionRange ? (Math.abs(selectionRange.endRow - selectionRange.startRow) + 1) * (Math.abs(selectionRange.endCol - selectionRange.startCol) + 1) : undefined, aggregation: statusBarConfig.aggregation, suppressRowCount: statusBarConfig.suppressRowCount })), isLoading && (_jsx(Box, { sx: LOADING_OVERLAY_SX, children: _jsxs(Box, { sx: LOADING_INNER_SX, children: [_jsx(CircularProgress, { size: 24 }), _jsx(Typography, { variant: "body2", color: "text.secondary", children: loadingMessage })] }) }))] }));
+                                                        })), virtualScrollEnabled && visibleRange.offsetBottom > 0 && (_jsx(TableRow, { style: { height: visibleRange.offsetBottom }, "aria-hidden": true }))] }))] }), isReorderDragging && dropIndicatorX != null && (_jsx(DropIndicator, { dropIndicatorX: dropIndicatorX, wrapperLeft: wrapperRef.current?.getBoundingClientRect().left ?? 0 })), _jsx(MarchingAntsOverlay, { containerRef: tableContainerRef, selectionRange: selectionRange, copyRange: copyRange, cutRange: cutRange, colOffset: colOffset, items: items, visibleColumns: props.visibleColumns, columnSizingOverrides: columnSizingOverrides, columnOrder: props.columnOrder }), showEmptyInGrid && emptyState && (_jsx(EmptyState, { emptyState: emptyState }))] }) }) }), menuPosition &&
+                        createPortal(_jsx(GridContextMenu, { x: menuPosition.x, y: menuPosition.y, hasSelection: hasCellSelection, canUndo: canUndo, canRedo: canRedo, onUndo: onUndo ?? NOOP, onRedo: onRedo ?? NOOP, onCopy: handleCopy, onCut: handleCut, onPaste: handlePasteVoid, onSelectAll: o.interaction.handleSelectAllCells, onClose: closeContextMenu }), document.body), _jsx(ColumnHeaderMenu, { columnId: pinning.headerMenu.openForColumn || '', isOpen: pinning.headerMenu.isOpen, anchorElement: pinning.headerMenu.anchorElement, onClose: pinning.headerMenu.close, onPinLeft: pinning.headerMenu.handlePinLeft, onPinRight: pinning.headerMenu.handlePinRight, onUnpin: pinning.headerMenu.handleUnpin, onSortAsc: pinning.headerMenu.handleSortAsc, onSortDesc: pinning.headerMenu.handleSortDesc, onClearSort: pinning.headerMenu.handleClearSort, onAutosizeThis: pinning.headerMenu.handleAutosizeThis, onAutosizeAll: pinning.headerMenu.handleAutosizeAll, canPinLeft: pinning.headerMenu.canPinLeft, canPinRight: pinning.headerMenu.canPinRight, canUnpin: pinning.headerMenu.canUnpin, currentSort: pinning.headerMenu.currentSort, isSortable: pinning.headerMenu.isSortable, isResizable: pinning.headerMenu.isResizable })] }), statusBarConfig && (_jsx(StatusBar, { totalCount: statusBarConfig.totalCount, filteredCount: statusBarConfig.filteredCount, selectedCount: statusBarConfig.selectedCount ?? selectedRowIds.size, selectedCellCount: selectionRange ? (Math.abs(selectionRange.endRow - selectionRange.startRow) + 1) * (Math.abs(selectionRange.endCol - selectionRange.startCol) + 1) : undefined, aggregation: statusBarConfig.aggregation, suppressRowCount: statusBarConfig.suppressRowCount })), isLoading && (_jsx(LoadingOverlay, { message: loadingMessage }))] }));
 }
 export const DataGridTable = React.memo(DataGridTableInner);

package/dist/esm/DataGridTable/DropIndicator.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+export function DropIndicator({ dropIndicatorX, wrapperLeft }) {
+    return (_jsx(Box, { sx: {
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            width: 3,
+            bgcolor: 'var(--ogrid-primary, #217346)',
+            pointerEvents: 'none',
+            zIndex: 100,
+            transition: 'left 0.05s',
+            left: dropIndicatorX - wrapperLeft,
+        } }));
+}

package/dist/esm/DataGridTable/EmptyState.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography, Button } from '@mui/material';
+const EMPTY_STATE_SX = { py: 4, px: 2, textAlign: 'center', borderTop: 1, borderColor: 'divider', bgcolor: 'action.hover' };
+export function EmptyState({ emptyState }) {
+    return (_jsx(Box, { sx: EMPTY_STATE_SX, children: emptyState.render ? (emptyState.render()) : (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: "No results found" }), _jsx(Typography, { variant: "body2", color: "text.secondary", children: emptyState.message != null ? (emptyState.message) : emptyState.hasActiveFilters ? (_jsxs(_Fragment, { children: ["No items match your current filters. Try adjusting your search or", ' ', _jsx(Button, { variant: "text", size: "small", onClick: emptyState.onClearAll, children: "clear all filters" }), ' ', "to see all items."] })) : ('There are no items available at this time.') })] })) }));
+}

package/dist/esm/DataGridTable/LoadingOverlay.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, CircularProgress, Typography } from '@mui/material';
+const LOADING_OVERLAY_SX = {
+    position: 'absolute', inset: 0, zIndex: 2,
+    display: 'flex', alignItems: 'center', justifyContent: 'center',
+    background: 'var(--ogrid-loading-bg, rgba(255,255,255,0.7))',
+};
+const LOADING_INNER_SX = {
+    display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1,
+    p: 2, bgcolor: 'background.paper', border: 1, borderColor: 'divider', borderRadius: 1,
+};
+export function LoadingOverlay({ message }) {
+    return (_jsx(Box, { sx: LOADING_OVERLAY_SX, children: _jsxs(Box, { sx: LOADING_INNER_SX, children: [_jsx(CircularProgress, { size: 24 }), _jsx(Typography, { variant: "body2", color: "text.secondary", children: message })] }) }));
+}

package/dist/esm/OGrid/OGrid.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { forwardRef } from 'react';
+import { Box, useTheme } from '@mui/material';
+import { DataGridTable } from '../DataGridTable/DataGridTable';
+import { ColumnChooser } from '../ColumnChooser/ColumnChooser';
+import { PaginationControls } from '../PaginationControls/PaginationControls';
+import { useOGrid, OGridLayout, } from '@alaarab/ogrid-react';
+const OGridInner = forwardRef(function OGridInner(props, ref) {
+    const { dataGridProps, pagination, columnChooser, layout } = useOGrid(props, ref);
+    const theme = useTheme();
+    // Set --ogrid-* CSS variables so the shared OGridLayout adapts to MUI theme (both modes)
+    const containerSx = {
+        display: 'flex', flexDirection: 'column', gap: 1,
+        '--ogrid-bg': theme.palette.background.default,
+        '--ogrid-border': theme.palette.divider,
+        '--ogrid-header-bg': theme.palette.action.hover,
+        '--ogrid-fg': theme.palette.text.primary,
+        '--ogrid-fg-secondary': theme.palette.text.secondary,
+        '--ogrid-fg-muted': theme.palette.text.disabled,
+        '--ogrid-hover-bg': theme.palette.action.hover,
+    };
+    return (_jsx(OGridLayout, { containerComponent: Box, containerProps: { sx: containerSx }, className: layout.className, sideBar: layout.sideBarProps, toolbar: layout.toolbar, toolbarBelow: layout.toolbarBelow, toolbarEnd: columnChooser.placement === 'toolbar' ? (_jsx(ColumnChooser, { columns: columnChooser.columns, visibleColumns: columnChooser.visibleColumns, onVisibilityChange: columnChooser.onVisibilityChange })) : undefined, pagination: _jsx(PaginationControls, { currentPage: pagination.page, pageSize: pagination.pageSize, totalCount: pagination.displayTotalCount, onPageChange: pagination.setPage, onPageSizeChange: (size) => {
+                pagination.setPageSize(size);
+                pagination.setPage(1);
+            }, pageSizeOptions: pagination.pageSizeOptions, entityLabelPlural: pagination.entityLabelPlural }), children: _jsx(DataGridTable, { ...dataGridProps }) }));
+});
+OGridInner.displayName = 'OGrid';
+export const OGrid = React.memo(OGridInner);

package/dist/esm/OGrid/index.js

@@ -0,0 +1 @@
+export { OGrid } from './OGrid';

package/dist/esm/PaginationControls/PaginationControls.js

@@ -1,16 +1,22 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
-import { useMemo, useCallback } from 'react';
 import { IconButton, Button, Select, MenuItem, Box, Typography, } from '@mui/material';
 import { FirstPage as FirstPageIcon, LastPage as LastPageIcon, ChevronLeft as ChevronLeftIcon, ChevronRight as ChevronRightIcon, } from '@mui/icons-material';
-import { getPaginationViewModel } from '@alaarab/ogrid-react';
+import { usePaginationControls } from '@alaarab/ogrid-react';
 export const PaginationControls = React.memo((props) => {
     const { currentPage, pageSize, totalCount, onPageChange, onPageSizeChange, pageSizeOptions, entityLabelPlural, className, } = props;
-    const labelPlural = entityLabelPlural ?? 'items';
-    const vm = useMemo(() => getPaginationViewModel(currentPage, pageSize, totalCount, pageSizeOptions ? { pageSizeOptions } : undefined), [currentPage, pageSize, totalCount, pageSizeOptions]);
-    const handlePageSizeChange = useCallback((event) => {
-        onPageSizeChange(Number(event.target.value));
-    }, [onPageSizeChange]);
+    const { labelPlural, vm, handlePageSizeChange } = usePaginationControls({
+        currentPage,
+        pageSize,
+        totalCount,
+        onPageChange,
+        onPageSizeChange,
+        pageSizeOptions,
+        entityLabelPlural,
+    });
+    const handlePageSizeChangeEvent = (event) => {
+        handlePageSizeChange(Number(event.target.value));
+    };
     if (!vm) {
         return null;
     }
@@ -25,5 +31,5 @@ export const PaginationControls = React.memo((props) => {
             width: '100%',
             minWidth: 0,
             boxSizing: 'border-box',
-        }, children: [_jsxs(Typography, { variant: "body2", color: "text.secondary", children: ["Showing ", startItem, " to ", endItem, " of ", totalCount.toLocaleString(), " ", labelPlural] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5 }, children: [_jsx(IconButton, { size: "small", onClick: () => onPageChange(1), disabled: currentPage === 1, "aria-label": "First page", children: _jsx(FirstPageIcon, { fontSize: "small" }) }), _jsx(IconButton, { size: "small", onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1, "aria-label": "Previous page", children: _jsx(ChevronLeftIcon, { fontSize: "small" }) }), showStartEllipsis && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outlined", size: "small", onClick: () => onPageChange(1), "aria-label": "Page 1", sx: { minWidth: 32, px: 0.5 }, children: "1" }), _jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mx: 0.5 }, "aria-hidden": true, children: "\u2026" })] })), pageNumbers.map((pageNum) => (_jsx(Button, { variant: currentPage === pageNum ? 'contained' : 'outlined', size: "small", onClick: () => onPageChange(pageNum), "aria-label": `Page ${pageNum}`, "aria-current": currentPage === pageNum ? 'page' : undefined, sx: { minWidth: 32, px: 0.5 }, children: pageNum }, pageNum))), showEndEllipsis && (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mx: 0.5 }, "aria-hidden": true, children: "\u2026" }), _jsx(Button, { variant: "outlined", size: "small", onClick: () => onPageChange(totalPages), "aria-label": `Page ${totalPages}`, sx: { minWidth: 32, px: 0.5 }, children: totalPages })] })), _jsx(IconButton, { size: "small", onClick: () => onPageChange(currentPage + 1), disabled: currentPage >= totalPages, "aria-label": "Next page", children: _jsx(ChevronRightIcon, { fontSize: "small" }) }), _jsx(IconButton, { size: "small", onClick: () => onPageChange(totalPages), disabled: currentPage >= totalPages, "aria-label": "Last page", children: _jsx(LastPageIcon, { fontSize: "small" }) })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Typography, { variant: "body2", color: "text.secondary", children: "Rows" }), _jsx(Select, { value: pageSize, onChange: handlePageSizeChange, size: "small", "aria-label": "Rows per page", sx: { minWidth: 70 }, children: vm.pageSizeOptions.map((n) => (_jsx(MenuItem, { value: n, children: n }, n))) })] })] }));
+        }, children: [_jsxs(Typography, { variant: "body2", color: "text.secondary", children: ["Showing ", startItem, " to ", endItem, " of ", totalCount.toLocaleString(), " ", labelPlural] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5 }, children: [_jsx(IconButton, { size: "small", onClick: () => onPageChange(1), disabled: currentPage === 1, "aria-label": "First page", children: _jsx(FirstPageIcon, { fontSize: "small" }) }), _jsx(IconButton, { size: "small", onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1, "aria-label": "Previous page", children: _jsx(ChevronLeftIcon, { fontSize: "small" }) }), showStartEllipsis && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outlined", size: "small", onClick: () => onPageChange(1), "aria-label": "Page 1", sx: { minWidth: 32, px: 0.5 }, children: "1" }), _jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mx: 0.5 }, "aria-hidden": true, children: "\u2026" })] })), pageNumbers.map((pageNum) => (_jsx(Button, { variant: currentPage === pageNum ? 'contained' : 'outlined', size: "small", onClick: () => onPageChange(pageNum), "aria-label": `Page ${pageNum}`, "aria-current": currentPage === pageNum ? 'page' : undefined, sx: { minWidth: 32, px: 0.5 }, children: pageNum }, pageNum))), showEndEllipsis && (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mx: 0.5 }, "aria-hidden": true, children: "\u2026" }), _jsx(Button, { variant: "outlined", size: "small", onClick: () => onPageChange(totalPages), "aria-label": `Page ${totalPages}`, sx: { minWidth: 32, px: 0.5 }, children: totalPages })] })), _jsx(IconButton, { size: "small", onClick: () => onPageChange(currentPage + 1), disabled: currentPage >= totalPages, "aria-label": "Next page", children: _jsx(ChevronRightIcon, { fontSize: "small" }) }), _jsx(IconButton, { size: "small", onClick: () => onPageChange(totalPages), disabled: currentPage >= totalPages, "aria-label": "Last page", children: _jsx(LastPageIcon, { fontSize: "small" }) })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Typography, { variant: "body2", color: "text.secondary", children: "Rows" }), _jsx(Select, { value: pageSize, onChange: handlePageSizeChangeEvent, size: "small", "aria-label": "Rows per page", sx: { minWidth: 70 }, children: vm.pageSizeOptions.map((n) => (_jsx(MenuItem, { value: n, children: n }, n))) })] })] }));
 });

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 // Components
-export { OGrid, MaterialDataTable } from './MaterialDataTable';
+export { OGrid } from './OGrid';
 export { DataGridTable } from './DataGridTable/DataGridTable';
 export { ColumnChooser } from './ColumnChooser/ColumnChooser';
 export { ColumnHeaderFilter } from './ColumnHeaderFilter/ColumnHeaderFilter';

package/dist/types/ColumnChooser/ColumnChooser.d.ts

@@ -1,10 +1,4 @@
 import * as React from 'react';
-import type { IColumnDefinition } from '@alaarab/ogrid-react';
-export type { IColumnDefinition };
-export interface IColumnChooserProps {
-    columns: IColumnDefinition[];
-    visibleColumns: Set<string>;
-    onVisibilityChange: (columnKey: string, visible: boolean) => void;
-    className?: string;
-}
+import type { IColumnChooserProps } from '@alaarab/ogrid-react';
+export type { IColumnChooserProps };
 export declare const ColumnChooser: React.FC<IColumnChooserProps>;

package/dist/types/ColumnHeaderFilter/ColumnHeaderFilter.d.ts

@@ -1,22 +1,4 @@
 import * as React from 'react';
-import type { UserLike, ColumnFilterType, IDateFilterValue } from '@alaarab/ogrid-react';
-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;
-}
+import type { IColumnHeaderFilterProps } from '@alaarab/ogrid-react';
+export type { IColumnHeaderFilterProps };
 export declare const ColumnHeaderFilter: React.FC<IColumnHeaderFilterProps>;

package/dist/types/ColumnHeaderMenu/ColumnHeaderMenu.d.ts

@@ -6,12 +6,20 @@ export interface ColumnHeaderMenuProps {
     onPinLeft: () => void;
     onPinRight: () => void;
     onUnpin: () => void;
+    onSortAsc: () => void;
+    onSortDesc: () => void;
+    onClearSort: () => void;
+    onAutosizeThis: () => void;
+    onAutosizeAll: () => void;
     canPinLeft: boolean;
     canPinRight: boolean;
     canUnpin: boolean;
+    currentSort: 'asc' | 'desc' | null;
+    isSortable: boolean;
+    isResizable: boolean;
 }
 /**
- * Column header dropdown menu for pin/unpin actions.
- * Uses Material UI Menu component.
+ * Column header dropdown menu for pin/sort/autosize actions.
+ * Uses Material UI Menu component with anchor position.
  */
 export declare function ColumnHeaderMenu(props: ColumnHeaderMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/DataGridTable/DropIndicator.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+interface DropIndicatorProps {
+    dropIndicatorX: number;
+    wrapperLeft: number;
+}
+export declare function DropIndicator({ dropIndicatorX, wrapperLeft }: DropIndicatorProps): React.ReactElement;
+export {};

package/dist/types/DataGridTable/EmptyState.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface EmptyStateProps {
+    emptyState: {
+        render?: () => React.ReactNode;
+        message?: React.ReactNode;
+        hasActiveFilters?: boolean;
+        onClearAll?: () => void;
+    };
+}
+export declare function EmptyState({ emptyState }: EmptyStateProps): React.ReactElement;
+export {};

package/dist/types/DataGridTable/LoadingOverlay.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+interface LoadingOverlayProps {
+    message: string;
+}
+export declare function LoadingOverlay({ message }: LoadingOverlayProps): React.ReactElement;
+export {};

package/dist/types/{MaterialDataTable/MaterialDataTable.d.ts → OGrid/OGrid.d.ts}

@@ -3,5 +3,3 @@ import { type IOGridProps, type IOGridApi } from '@alaarab/ogrid-react';
 export type { IOGridProps } from '@alaarab/ogrid-react';
 declare const OGridInner: React.ForwardRefExoticComponent<IOGridProps<unknown> & React.RefAttributes<IOGridApi<unknown>>>;
 export declare const OGrid: typeof OGridInner;
-/** @deprecated Use `OGrid` instead. Backward-compat alias. */
-export declare const MaterialDataTable: React.ForwardRefExoticComponent<IOGridProps<unknown> & React.RefAttributes<IOGridApi<unknown>>>;

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

@@ -0,0 +1 @@
+export { OGrid, type IOGridProps } from './OGrid';

package/dist/types/PaginationControls/PaginationControls.d.ts

@@ -1,12 +1,4 @@
 import * as React from 'react';
-export interface IPaginationControlsProps {
-    currentPage: number;
-    pageSize: number;
-    totalCount: number;
-    onPageChange: (page: number) => void;
-    onPageSizeChange: (pageSize: number) => void;
-    pageSizeOptions?: number[];
-    entityLabelPlural?: string;
-    className?: string;
-}
+import type { IPaginationControlsProps } from '@alaarab/ogrid-react';
+export type { IPaginationControlsProps };
 export declare const PaginationControls: React.FC<IPaginationControlsProps>;

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-export { OGrid, MaterialDataTable, type IOGridProps } from './MaterialDataTable';
+export { OGrid, type IOGridProps } from './OGrid';
 export { DataGridTable } from './DataGridTable/DataGridTable';
 export { ColumnChooser, type IColumnChooserProps } from './ColumnChooser/ColumnChooser';
 export { ColumnHeaderFilter, type IColumnHeaderFilterProps } from './ColumnHeaderFilter/ColumnHeaderFilter';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@alaarab/ogrid-react-material",
-  "version": "2.0.9",
-  "description": "OGrid Material UI implementation – MUI Table–based data grid with sorting, filtering, pagination, column chooser, spreadsheet selection, and CSV export.",
+  "version": "2.0.12",
+  "description": "OGrid React Material implementation – MUI Table–based data grid with sorting, filtering, pagination, column chooser, spreadsheet selection, and CSV export.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -39,7 +39,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-react": "2.0.9"
+    "@alaarab/ogrid-react": "2.0.12"
   },
   "peerDependencies": {
     "@emotion/react": "^11.0.0",
@@ -58,8 +58,8 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "eslint-plugin-storybook": "10.2.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

package/dist/esm/MaterialDataTable/MaterialDataTable.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { forwardRef } from 'react';
-import { Box } from '@mui/material';
-import { DataGridTable } from '../DataGridTable/DataGridTable';
-import { ColumnChooser } from '../ColumnChooser/ColumnChooser';
-import { PaginationControls } from '../PaginationControls/PaginationControls';
-import { useOGrid, OGridLayout, } from '@alaarab/ogrid-react';
-const OGridInner = forwardRef(function OGridInner(props, ref) {
-    const { dataGridProps, pagination, columnChooser, layout } = useOGrid(props, ref);
-    return (_jsx(OGridLayout, { containerComponent: Box, containerProps: { sx: { display: 'flex', flexDirection: 'column', gap: 1 } }, className: layout.className, sideBar: layout.sideBarProps, toolbar: layout.toolbar, toolbarBelow: layout.toolbarBelow, toolbarEnd: columnChooser.placement === 'toolbar' ? (_jsx(ColumnChooser, { columns: columnChooser.columns, visibleColumns: columnChooser.visibleColumns, onVisibilityChange: columnChooser.onVisibilityChange })) : undefined, pagination: _jsx(PaginationControls, { currentPage: pagination.page, pageSize: pagination.pageSize, totalCount: pagination.displayTotalCount, onPageChange: pagination.setPage, onPageSizeChange: (size) => {
-                pagination.setPageSize(size);
-                pagination.setPage(1);
-            }, pageSizeOptions: pagination.pageSizeOptions, entityLabelPlural: pagination.entityLabelPlural }), children: _jsx(DataGridTable, { ...dataGridProps }) }));
-});
-OGridInner.displayName = 'OGrid';
-export const OGrid = React.memo(OGridInner);
-/** @deprecated Use `OGrid` instead. Backward-compat alias. */
-export const MaterialDataTable = OGrid;

package/dist/esm/MaterialDataTable/index.js

@@ -1 +0,0 @@
-export { OGrid, MaterialDataTable } from './MaterialDataTable';

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

@@ -1 +0,0 @@
-export { OGrid, MaterialDataTable, type IOGridProps } from './MaterialDataTable';