@alaarab/ogrid-react-radix 2.0.1 → 2.0.3

package/dist/esm/ColumnChooser/ColumnChooser.module.css

@@ -39,7 +39,7 @@
   min-width: 220px;
   background: var(--ogrid-bg, #fff);
   border-radius: 6px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  box-shadow: var(--ogrid-shadow, 0 4px 16px rgba(0, 0, 0, 0.12));
   border: 1px solid var(--ogrid-border, #e0e0e0);
   display: flex;
   flex-direction: column;

package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.module.css

@@ -108,7 +108,7 @@
   background: var(--ogrid-bg, #fff);
   border: 1px solid var(--ogrid-border, #d1d1d1);
   border-radius: 8px;
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.14);
+  box-shadow: var(--ogrid-shadow, 0 4px 16px rgba(0, 0, 0, 0.12));
   overflow: hidden;
 }
 

package/dist/esm/ColumnHeaderFilter/PeopleFilterPopover.js

@@ -8,7 +8,7 @@ function UserAvatar({ user, size = 32 }) {
             width: size,
             height: size,
             borderRadius: '50%',
-            background: '#e0e0e0',
+            background: 'var(--ogrid-border, #e0e0e0)',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',

package/dist/esm/DataGridTable/DataGridTable.js

@@ -8,7 +8,7 @@ import { ColumnHeaderFilter } from '../ColumnHeaderFilter';
 import { InlineCellEditor } from './InlineCellEditor';
 import { StatusBar } from './StatusBar';
 import { GridContextMenu } from './GridContextMenu';
-import { useDataGridState, useColumnResize, useLatestRef, getHeaderFilterConfig, getCellRenderDescriptor, buildHeaderRows, MarchingAntsOverlay, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, areGridRowPropsEqual, CellErrorBoundary, DEFAULT_MIN_COLUMN_WIDTH, } from '@alaarab/ogrid-react';
+import { useDataGridState, useColumnResize, useColumnReorder, useVirtualScroll, useLatestRef, getHeaderFilterConfig, getCellRenderDescriptor, buildHeaderRows, MarchingAntsOverlay, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, areGridRowPropsEqual, CellErrorBoundary, DEFAULT_MIN_COLUMN_WIDTH, } from '@alaarab/ogrid-react';
 import styles from './DataGridTable.module.css';
 // Module-scope stable constants (avoid per-render allocations)
 const GRID_ROOT_STYLE = { position: 'relative', flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' };
@@ -35,7 +35,7 @@ function DataGridTableInner(props) {
     const handlePasteVoid = useCallback(() => { void handlePaste(); }, [handlePaste]);
     const { menuPosition, handleCellContextMenu, closeContextMenu } = ctxMenu;
     const { headerFilterInput, cellDescriptorInput, statusBarConfig, showEmptyInGrid, onCellError } = viewModels;
-    const { items, columns, getRowId, emptyState, layoutMode = 'fill', rowSelection = 'none', freezeRows, freezeCols, suppressHorizontalScroll, isLoading = false, loadingMessage = 'Loading\u2026', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, visibleColumns, } = props;
+    const { items, columns, getRowId, emptyState, layoutMode = 'fill', rowSelection = 'none', freezeRows, freezeCols, suppressHorizontalScroll, isLoading = false, loadingMessage = 'Loading\u2026', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, visibleColumns, columnOrder, onColumnOrderChange, columnReorder, virtualScroll, pinnedColumns, } = props;
     // Memoize header rows (recursive tree traversal — avoid recomputing every render)
     const headerRows = useMemo(() => buildHeaderRows(columns, visibleColumns), [columns, visibleColumns]);
     const allowOverflowX = !suppressHorizontalScroll && containerWidth > 0 && (minTableWidth > containerWidth || desiredTableWidth > containerWidth);
@@ -44,6 +44,23 @@ function DataGridTableInner(props) {
         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,
+    });
     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
@@ -145,11 +162,20 @@ function DataGridTableInner(props) {
                                                             const leafRowSpan = headerRows.length > 1 && rowIdx < headerRows.length - 1
                                                                 ? headerRows.length - rowIdx
                                                                 : undefined;
-                                                            return (_jsxs("th", { scope: "col", "data-column-id": col.columnId, rowSpan: leafRowSpan, className: columnMeta.hdrClasses[col.columnId] || undefined, style: columnMeta.hdrStyles[col.columnId], children: [_jsx(ColumnHeaderFilter, { ...getHeaderFilterConfig(col, headerFilterInput) }), _jsx("div", { className: styles.resizeHandle, onMouseDown: (e) => handleResizeStart(e, col), "aria-label": `Resize ${col.name}` })] }, col.columnId));
-                                                        })] }, rowIdx))) }), !showEmptyInGrid && (_jsx("tbody", { children: items.map((item, rowIndex) => {
-                                                    const rowIdStr = getRowId(item);
-                                                    return (_jsx(GridRow, { item: item, rowIndex: rowIndex, rowId: rowIdStr, isSelected: selectedRowIds.has(rowIdStr), visibleCols: visibleCols, columnMeta: columnMeta, renderCellContent: renderCellContent, handleSingleRowClick: handleSingleRowClick, handleRowCheckboxChange: handleRowCheckboxChange, lastMouseShiftRef: lastMouseShiftRef, hasCheckboxCol: hasCheckboxCol, selectionRange: selectionRange, activeCell: interaction.activeCell, cutRange: cutRange, copyRange: copyRange, isDragging: isDragging, editingRowId: editingCell?.rowId ?? null }, rowIdStr));
-                                                }) }))] }), _jsx(MarchingAntsOverlay, { containerRef: tableContainerRef, selectionRange: selectionRange, copyRange: copyRange, cutRange: cutRange, colOffset: colOffset }), showEmptyInGrid && emptyState && (_jsx("div", { className: styles.emptyStateInGrid, children: _jsx("div", { children: emptyState.render ? (emptyState.render()) : (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.emptyStateInGridTitle, children: "No results found" }), _jsx("div", { className: styles.emptyStateInGridMessage, children: emptyState.message != null ? (emptyState.message) : emptyState.hasActiveFilters ? (_jsxs(_Fragment, { children: ["No items match your current filters. Try adjusting your search or", ' ', _jsx("button", { type: "button", className: styles.emptyStateInGridLink, onClick: emptyState.onClearAll, children: "clear all filters" }), ' ', "to see all items."] })) : ('There are no items available at this time.') })] })) }) }))] }) }) }), menuPosition &&
+                                                            return (_jsxs("th", { scope: "col", "data-column-id": col.columnId, rowSpan: leafRowSpan, className: columnMeta.hdrClasses[col.columnId] || undefined, style: {
+                                                                    ...columnMeta.hdrStyles[col.columnId],
+                                                                    ...(columnReorder ? { cursor: isReorderDragging ? 'grabbing' : 'grab' } : undefined),
+                                                                }, onMouseDown: columnReorder ? (e) => handleHeaderMouseDown(col.columnId, e) : undefined, children: [_jsx(ColumnHeaderFilter, { ...getHeaderFilterConfig(col, headerFilterInput) }), _jsx("div", { className: styles.resizeHandle, onMouseDown: (e) => handleResizeStart(e, col), "aria-label": `Resize ${col.name}` })] }, col.columnId));
+                                                        })] }, rowIdx))) }), !showEmptyInGrid && (_jsxs("tbody", { children: [virtualScrollEnabled && visibleRange.offsetTop > 0 && (_jsx("tr", { 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);
+                                                            return (_jsx(GridRow, { item: item, rowIndex: rowIndex, rowId: rowIdStr, isSelected: selectedRowIds.has(rowIdStr), visibleCols: visibleCols, columnMeta: columnMeta, renderCellContent: renderCellContent, handleSingleRowClick: handleSingleRowClick, handleRowCheckboxChange: handleRowCheckboxChange, lastMouseShiftRef: lastMouseShiftRef, hasCheckboxCol: hasCheckboxCol, selectionRange: selectionRange, activeCell: interaction.activeCell, cutRange: cutRange, copyRange: copyRange, isDragging: isDragging, editingRowId: editingCell?.rowId ?? null }, rowIdStr));
+                                                        })
+                                                        : items.map((item, rowIndex) => {
+                                                            const rowIdStr = getRowId(item);
+                                                            return (_jsx(GridRow, { item: item, rowIndex: rowIndex, rowId: rowIdStr, isSelected: selectedRowIds.has(rowIdStr), visibleCols: visibleCols, columnMeta: columnMeta, renderCellContent: renderCellContent, handleSingleRowClick: handleSingleRowClick, handleRowCheckboxChange: handleRowCheckboxChange, lastMouseShiftRef: lastMouseShiftRef, hasCheckboxCol: hasCheckboxCol, selectionRange: selectionRange, activeCell: interaction.activeCell, cutRange: cutRange, copyRange: copyRange, isDragging: isDragging, editingRowId: editingCell?.rowId ?? null }, rowIdStr));
+                                                        })), virtualScrollEnabled && visibleRange.offsetBottom > 0 && (_jsx("tr", { style: { height: visibleRange.offsetBottom }, "aria-hidden": true }))] }))] }), isReorderDragging && dropIndicatorX != null && (_jsx("div", { className: styles.dropIndicator, style: { left: dropIndicatorX - (wrapperRef.current?.getBoundingClientRect().left ?? 0) } })), _jsx(MarchingAntsOverlay, { containerRef: tableContainerRef, selectionRange: selectionRange, copyRange: copyRange, cutRange: cutRange, colOffset: colOffset }), showEmptyInGrid && emptyState && (_jsx("div", { className: styles.emptyStateInGrid, children: _jsx("div", { children: emptyState.render ? (emptyState.render()) : (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.emptyStateInGridTitle, children: "No results found" }), _jsx("div", { className: styles.emptyStateInGridMessage, children: emptyState.message != null ? (emptyState.message) : emptyState.hasActiveFilters ? (_jsxs(_Fragment, { children: ["No items match your current filters. Try adjusting your search or", ' ', _jsx("button", { type: "button", className: styles.emptyStateInGridLink, 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)] }), 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("div", { className: styles.loadingOverlay, "aria-live": "polite", children: _jsxs("div", { className: styles.loadingOverlayContent, children: [_jsx("div", { className: styles.spinner }), _jsx("span", { className: styles.loadingOverlayText, children: loadingMessage })] }) }))] }));
 }
 export const DataGridTable = React.memo(DataGridTableInner);

package/dist/esm/DataGridTable/DataGridTable.module.css

@@ -125,7 +125,7 @@
   right: -4px;
   bottom: 0;
   width: 4px;
-  background: linear-gradient(to right, rgba(0, 0, 0, 0.08), transparent);
+  background: linear-gradient(to right, var(--ogrid-pinned-shadow, rgba(0, 0, 0, 0.12)), transparent);
   pointer-events: none;
 }
 
@@ -147,7 +147,7 @@
   left: -4px;
   bottom: 0;
   width: 4px;
-  background: linear-gradient(to left, rgba(0, 0, 0, 0.08), transparent);
+  background: linear-gradient(to left, var(--ogrid-pinned-shadow, rgba(0, 0, 0, 0.12)), transparent);
   pointer-events: none;
 }
 
@@ -172,6 +172,18 @@
   background: var(--ogrid-header-bg, #f5f5f5);
 }
 
+/* Column reorder drop indicator */
+.dropIndicator {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--ogrid-primary, #217346);
+  pointer-events: none;
+  z-index: 100;
+  transition: left 0.05s;
+}
+
 /* Column resize handle — wide hit area with narrow visual indicator */
 .resizeHandle {
   position: absolute;
@@ -361,7 +373,7 @@
   background: var(--ogrid-bg, #fff);
   border: 1px solid var(--ogrid-border, #e0e0e0);
   border-radius: 6px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  box-shadow: var(--ogrid-shadow, 0 4px 16px rgba(0, 0, 0, 0.12));
 }
 
 .contextMenuItem {
@@ -408,7 +420,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(255, 255, 255, 0.7);
+  background: var(--ogrid-loading-bg, rgba(255, 255, 255, 0.7));
   backdrop-filter: blur(1px);
   pointer-events: all;
 }
@@ -422,7 +434,7 @@
   background: var(--ogrid-bg, #fff);
   border: 1px solid var(--ogrid-border, #c4c4c4);
   border-radius: 6px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
+  box-shadow: var(--ogrid-shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.08));
 }
 
 .loadingOverlayText {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react-radix",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "OGrid default (Radix) – Data grid with sorting, filtering, pagination, column chooser, and CSV export. Packed with Radix UI; no Fluent or Material required.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -41,7 +41,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-react": "2.0.1",
+    "@alaarab/ogrid-react": "2.0.3",
     "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-popover": "^1.1.2"
   },
@@ -51,7 +51,14 @@
   },
   "devDependencies": {
     "@storybook/react-vite": "10.2.8",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "eslint-plugin-storybook": "10.2.8",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "sass": "^1.83.4",
     "storybook": "10.2.8",
     "vite": "^7.0.0"