@alaarab/ogrid-react-material 2.0.11 → 2.0.13

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

@@ -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/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
@@ -48,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'
@@ -105,18 +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: 'sticky', /* Changed from relative - enables vertical sticky for all headers */
+    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 /* Increased from 9 to stack above base header cells (z-index: 8) */, 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: 10 /* Increased from 9 to stack above base header cells (z-index: 8) */, bgcolor: 'action.hover', willChange: 'transform', borderRight: '2px solid', borderRightColor: 'primary.main' };
+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',
@@ -133,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: {
@@ -163,87 +182,37 @@ 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, { 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',
         flex: 1,
-        minHeight: 0,
+        minHeight: isLoading && items.length === 0 ? 200 : 0,
         width: fitToContent ? 'fit-content' : '100%',
         maxWidth: '100%',
         overflowX: suppressHorizontalScroll ? 'hidden' : allowOverflowX ? 'auto' : 'hidden',
@@ -252,7 +221,7 @@ function DataGridTableInner(props) {
         willChange: 'scroll-position',
         '& [data-drag-range]': { bgcolor: 'rgba(33, 115, 70, 0.12) !important' },
         '& [data-drag-anchor]': { bgcolor: 'background.paper !important' },
-    }), [fitToContent, suppressHorizontalScroll, allowOverflowX]);
+    }), [fitToContent, suppressHorizontalScroll, allowOverflowX, isLoading, items.length]);
     const renderCellContent = useCallback((item, col, rowIndex, colIdx) => {
         const descriptor = getCellRenderDescriptor(item, col, rowIndex, colIdx, cellDescriptorInputRef.current);
         const rowId = getRowId(item);
@@ -281,7 +250,7 @@ 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, { ...{
+    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,
@@ -320,10 +289,16 @@ function DataGridTableInner(props) {
                                                             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;
+                                                            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
@@ -372,8 +347,13 @@ function DataGridTableInner(props) {
                                                                                     '&:hover': {
                                                                                         bgcolor: 'action.hover',
                                                                                     },
-                                                                                }, 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);
@@ -382,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, items: items, visibleColumns: props.visibleColumns, columnSizingOverrides: columnSizingOverrides, columnOrder: props.columnOrder }), 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, 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(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/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/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.11",
-  "description": "OGrid Material UI implementation – MUI Table–based data grid with sorting, filtering, pagination, column chooser, spreadsheet selection, and CSV export.",
+  "version": "2.0.13",
+  "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.11"
+    "@alaarab/ogrid-react": "2.0.13"
   },
   "peerDependencies": {
     "@emotion/react": "^11.0.0",

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';