@alaarab/ogrid-react-radix 2.0.3 → 2.0.4

package/dist/esm/ColumnHeaderMenu/ColumnHeaderMenu.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { COLUMN_HEADER_MENU_ITEMS } from '@alaarab/ogrid-core';
+import styles from './ColumnHeaderMenu.module.css';
+/**
+ * Column header dropdown menu for pin/unpin actions.
+ * Uses Radix UI DropdownMenu primitives.
+ */
+export function ColumnHeaderMenu(props) {
+    const { isOpen, onClose, onPinLeft, onPinRight, onUnpin, canPinLeft, canPinRight, canUnpin } = props;
+    const handleOpenChange = (open) => {
+        if (!open) {
+            onClose();
+        }
+    };
+    return (_jsx(DropdownMenu.Root, { open: isOpen, onOpenChange: handleOpenChange, children: _jsx(DropdownMenu.Portal, { children: _jsxs(DropdownMenu.Content, { className: styles.content, sideOffset: 4, align: "start", children: [_jsx(DropdownMenu.Item, { className: styles.item, disabled: !canPinLeft, onSelect: onPinLeft, children: COLUMN_HEADER_MENU_ITEMS[0].label }), _jsx(DropdownMenu.Item, { className: styles.item, disabled: !canPinRight, onSelect: onPinRight, children: COLUMN_HEADER_MENU_ITEMS[1].label }), _jsx(DropdownMenu.Item, { className: styles.item, disabled: !canUnpin, onSelect: onUnpin, children: COLUMN_HEADER_MENU_ITEMS[2].label })] }) }) }));
+}

package/dist/esm/ColumnHeaderMenu/ColumnHeaderMenu.module.css

@@ -0,0 +1,53 @@
+.content {
+  min-width: 140px;
+  background: white;
+  border-radius: 6px;
+  padding: 4px;
+  box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
+  z-index: 100;
+  animation-duration: 400ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+}
+@media (prefers-color-scheme: dark) {
+  .content {
+    background: #1a1a1a;
+    box-shadow: 0px 10px 38px -10px rgba(0, 0, 0, 0.5), 0px 10px 20px -15px rgba(0, 0, 0, 0.4);
+  }
+}
+
+.item {
+  font-size: 13px;
+  line-height: 1;
+  color: #111;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  height: 28px;
+  padding: 0 8px;
+  position: relative;
+  user-select: none;
+  outline: none;
+  cursor: pointer;
+}
+.item[data-disabled] {
+  color: #999;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+.item[data-highlighted]:not([data-disabled]) {
+  background-color: #f5f5f5;
+  color: #111;
+}
+@media (prefers-color-scheme: dark) {
+  .item {
+    color: #e0e0e0;
+  }
+  .item[data-disabled] {
+    color: #555;
+  }
+  .item[data-highlighted]:not([data-disabled]) {
+    background-color: #2a2a2a;
+    color: #fff;
+  }
+}

package/dist/esm/ColumnHeaderMenu/index.js

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

package/dist/esm/DataGridTable/DataGridTable.js

@@ -5,6 +5,7 @@ import { createPortal } from 'react-dom';
 import * as Popover from '@radix-ui/react-popover';
 import * as Checkbox from '@radix-ui/react-checkbox';
 import { ColumnHeaderFilter } from '../ColumnHeaderFilter';
+import { ColumnHeaderMenu } from '../ColumnHeaderMenu';
 import { InlineCellEditor } from './InlineCellEditor';
 import { StatusBar } from './StatusBar';
 import { GridContextMenu } from './GridContextMenu';
@@ -18,8 +19,8 @@ const STOP_PROPAGATION = (e) => e.stopPropagation();
 const PREVENT_DEFAULT = (e) => { e.preventDefault(); };
 const NOOP = () => { };
 function GridRowInner(props) {
-    const { item, rowIndex, rowId, isSelected, visibleCols, columnMeta, renderCellContent, handleSingleRowClick, handleRowCheckboxChange, lastMouseShiftRef, hasCheckboxCol, } = props;
-    return (_jsxs("tr", { className: isSelected ? styles.selectedRow : '', "data-row-id": rowId, onClick: handleSingleRowClick, children: [hasCheckboxCol && (_jsx("td", { className: styles.selectionCell, children: _jsx("div", { className: styles.selectionCellInner, "data-row-index": rowIndex, "data-col-index": 0, onClick: STOP_PROPAGATION, children: _jsx(Checkbox.Root, { className: styles.rowCheckbox, checked: isSelected, onCheckedChange: (c) => handleRowCheckboxChange(rowId, !!c, rowIndex, lastMouseShiftRef.current), "aria-label": `Select row ${rowIndex + 1}`, children: _jsx(Checkbox.Indicator, { className: styles.rowCheckboxIndicator, children: "\u2713" }) }) }) })), visibleCols.map((col, colIdx) => (_jsx("td", { className: columnMeta.cellClasses[col.columnId] || undefined, style: columnMeta.cellStyles[col.columnId], children: renderCellContent(item, col, rowIndex, colIdx) }, col.columnId)))] }));
+    const { item, rowIndex, rowId, isSelected, visibleCols, columnMeta, renderCellContent, handleSingleRowClick, handleRowCheckboxChange, lastMouseShiftRef, hasCheckboxCol, hasRowNumbersCol, rowNumberOffset, } = props;
+    return (_jsxs("tr", { className: isSelected ? styles.selectedRow : '', "data-row-id": rowId, onClick: handleSingleRowClick, children: [hasCheckboxCol && (_jsx("td", { className: styles.selectionCell, children: _jsx("div", { className: styles.selectionCellInner, "data-row-index": rowIndex, "data-col-index": 0, onClick: STOP_PROPAGATION, children: _jsx(Checkbox.Root, { className: styles.rowCheckbox, checked: isSelected, onCheckedChange: (c) => handleRowCheckboxChange(rowId, !!c, rowIndex, lastMouseShiftRef.current), "aria-label": `Select row ${rowIndex + 1}`, children: _jsx(Checkbox.Indicator, { className: styles.rowCheckboxIndicator, children: "\u2713" }) }) }) })), hasRowNumbersCol && (_jsx("td", { className: styles.rowNumberCell, children: _jsx("div", { className: styles.rowNumberCellInner, children: rowNumberOffset + rowIndex + 1 }) })), visibleCols.map((col, colIdx) => (_jsx("td", { className: columnMeta.cellClasses[col.columnId] || undefined, style: columnMeta.cellStyles[col.columnId], children: renderCellContent(item, col, rowIndex, colIdx) }, col.columnId)))] }));
 }
 const GridRow = React.memo(GridRowInner, areGridRowPropsEqual);
 function DataGridTableInner(props) {
@@ -27,15 +28,18 @@ function DataGridTableInner(props) {
     const tableContainerRef = useRef(null);
     const state = useDataGridState({ props, wrapperRef });
     const lastMouseShiftRef = useRef(false);
-    const { layout, rowSelection: rowSel, editing, interaction, contextMenu: ctxMenu, viewModels } = state;
-    const { visibleCols, totalColCount, hasCheckboxCol, colOffset, containerWidth, minTableWidth, desiredTableWidth, columnSizingOverrides, setColumnSizingOverrides } = layout;
+    const { layout, rowSelection: rowSel, editing, interaction, contextMenu: ctxMenu, viewModels, pinning } = state;
+    const { visibleCols, totalColCount, 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, 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;
+    const { headerMenu } = pinning;
+    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, density = 'normal', pinnedColumns, currentPage = 1, pageSize: propPageSize = 25, } = props;
+    // Calculate row number offset for pagination
+    const rowNumberOffset = hasRowNumbersCol ? (currentPage - 1) * propPageSize : 0;
     // 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);
@@ -148,12 +152,12 @@ 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("div", { style: GRID_ROOT_STYLE, children: [_jsxs("div", { ref: wrapperRef, tabIndex: 0, onMouseDown: (e) => { lastMouseShiftRef.current = e.shiftKey; }, className: `${styles.tableWrapper} ${rowSelection !== 'none' ? styles.selectableGrid : ''}`, role: "region", "aria-label": ariaLabel ?? (ariaLabelledBy ? undefined : 'Data grid'), "aria-labelledby": ariaLabelledBy, "data-empty": showEmptyInGrid ? 'true' : undefined, "data-column-count": totalColCount, "data-freeze-rows": freezeRows != null && freezeRows >= 1 ? freezeRows : undefined, "data-freeze-cols": freezeCols != null && freezeCols >= 1 ? freezeCols : undefined, "data-overflow-x": allowOverflowX ? 'true' : 'false', "data-container-width": containerWidth, "data-min-table-width": Math.round(minTableWidth), "data-has-selection": rowSelection !== 'none' ? 'true' : undefined, onContextMenu: PREVENT_DEFAULT, onKeyDown: handleGridKeyDown, style: {
+    return (_jsxs("div", { style: GRID_ROOT_STYLE, children: [_jsxs("div", { ref: wrapperRef, tabIndex: 0, onMouseDown: (e) => { lastMouseShiftRef.current = e.shiftKey; }, className: `${styles.tableWrapper} ${rowSelection !== 'none' ? styles.selectableGrid : ''} ${styles[`density-${density}`] || ''}`, role: "region", "aria-label": ariaLabel ?? (ariaLabelledBy ? undefined : 'Data grid'), "aria-labelledby": ariaLabelledBy, "data-empty": showEmptyInGrid ? 'true' : undefined, "data-column-count": totalColCount, "data-freeze-rows": freezeRows != null && freezeRows >= 1 ? freezeRows : undefined, "data-freeze-cols": freezeCols != null && freezeCols >= 1 ? freezeCols : undefined, "data-overflow-x": allowOverflowX ? 'true' : 'false', "data-container-width": containerWidth, "data-min-table-width": Math.round(minTableWidth), "data-has-selection": rowSelection !== 'none' ? 'true' : undefined, onContextMenu: PREVENT_DEFAULT, onKeyDown: handleGridKeyDown, style: {
                     ['--data-table-column-count']: totalColCount,
                     ['--data-table-width']: showEmptyInGrid ? '100%' : allowOverflowX ? 'fit-content' : fitToContent ? 'fit-content' : '100%',
                     ['--data-table-min-width']: showEmptyInGrid ? '100%' : allowOverflowX ? 'max-content' : fitToContent ? 'max-content' : '100%',
                     ['--data-table-total-min-width']: `${minTableWidth}px`,
-                }, children: [_jsx("div", { className: styles.tableScrollContent, children: _jsx("div", { className: isLoading && items.length > 0 ? styles.loadingDimmed : undefined, children: _jsxs("div", { className: styles.tableWidthAnchor, ref: tableContainerRef, children: [_jsxs("table", { className: styles.dataTable, children: [_jsx("thead", { className: styles.stickyHeader, children: headerRows.map((row, rowIdx) => (_jsxs("tr", { children: [rowIdx === headerRows.length - 1 && hasCheckboxCol && (_jsx("th", { className: styles.selectionHeaderCell, scope: "col", rowSpan: 1, children: _jsx("div", { className: styles.selectionHeaderCellInner, children: _jsx(Checkbox.Root, { className: styles.rowCheckbox, checked: allSelected ? true : someSelected ? 'indeterminate' : false, onCheckedChange: handleSelectAllChecked, "aria-label": "Select all rows", children: _jsx(Checkbox.Indicator, { className: styles.rowCheckboxIndicator, children: someSelected && !allSelected ? '–' : '✓' }) }) }) })), rowIdx === 0 && rowIdx < headerRows.length - 1 && hasCheckboxCol && (_jsx("th", { rowSpan: headerRows.length - 1 })), row.map((cell, cellIdx) => {
+                }, children: [_jsx("div", { className: styles.tableScrollContent, children: _jsx("div", { className: isLoading && items.length > 0 ? styles.loadingDimmed : undefined, children: _jsxs("div", { className: styles.tableWidthAnchor, ref: tableContainerRef, children: [_jsxs("table", { className: styles.dataTable, children: [_jsx("thead", { className: styles.stickyHeader, children: headerRows.map((row, rowIdx) => (_jsxs("tr", { children: [rowIdx === headerRows.length - 1 && hasCheckboxCol && (_jsx("th", { className: styles.selectionHeaderCell, scope: "col", rowSpan: 1, children: _jsx("div", { className: styles.selectionHeaderCellInner, children: _jsx(Checkbox.Root, { className: styles.rowCheckbox, checked: allSelected ? true : someSelected ? 'indeterminate' : false, onCheckedChange: handleSelectAllChecked, "aria-label": "Select all rows", children: _jsx(Checkbox.Indicator, { className: styles.rowCheckboxIndicator, children: someSelected && !allSelected ? '–' : '✓' }) }) }) })), rowIdx === 0 && rowIdx < headerRows.length - 1 && hasCheckboxCol && (_jsx("th", { rowSpan: headerRows.length - 1 })), rowIdx === headerRows.length - 1 && hasRowNumbersCol && (_jsx("th", { className: styles.rowNumberHeaderCell, scope: "col", rowSpan: 1, children: _jsx("div", { className: styles.rowNumberHeaderCellInner, children: "#" }) })), rowIdx === 0 && rowIdx < headerRows.length - 1 && hasRowNumbersCol && (_jsx("th", { rowSpan: headerRows.length - 1 })), row.map((cell, cellIdx) => {
                                                             if (cell.isGroup) {
                                                                 return (_jsx("th", { colSpan: cell.colSpan, className: styles.groupHeaderCell, scope: "colgroup", children: cell.label }, cellIdx));
                                                             }
@@ -165,17 +169,20 @@ function DataGridTableInner(props) {
                                                             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));
+                                                                }, onMouseDown: columnReorder ? (e) => handleHeaderMouseDown(col.columnId, e) : undefined, children: [_jsxs("div", { className: styles.headerCellContent, children: [_jsx(ColumnHeaderFilter, { ...getHeaderFilterConfig(col, headerFilterInput) }), _jsx("button", { className: styles.headerMenuTrigger, onClick: (e) => {
+                                                                                    e.stopPropagation();
+                                                                                    headerMenu.open(col.columnId, e.currentTarget);
+                                                                                }, "aria-label": "Column options", title: "Column options", children: "\u22EE" })] }), _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));
+                                                            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, hasRowNumbersCol: hasRowNumbersCol, rowNumberOffset: rowNumberOffset, 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));
+                                                            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, 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("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 })] }) }))] }));
+                        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, { isOpen: headerMenu.isOpen, anchorElement: headerMenu.anchorElement, onClose: headerMenu.close, onPinLeft: headerMenu.handlePinLeft, onPinRight: headerMenu.handlePinRight, onUnpin: headerMenu.handleUnpin, canPinLeft: headerMenu.canPinLeft, canPinRight: headerMenu.canPinRight, canUnpin: 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("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

@@ -4,7 +4,6 @@
   flex-direction: column;
   width: 100%;
   min-width: 0;
-  min-height: 100%;
   background: var(--ogrid-bg, #fff);
 }
 
@@ -117,6 +116,7 @@
   z-index: 6;
   background: var(--ogrid-bg, #ffffff);
   will-change: transform;
+  border-left: 2px solid var(--ogrid-accent, #0078d4);
 }
 .dataTable .pinnedColLeft::after {
   content: "";
@@ -139,6 +139,7 @@
   z-index: 6;
   background: var(--ogrid-bg, #ffffff);
   will-change: transform;
+  border-right: 2px solid var(--ogrid-accent, #0078d4);
 }
 .dataTable .pinnedColRight::before {
   content: "";
@@ -164,6 +165,52 @@
   border-bottom: 1px solid var(--ogrid-border, #e0e0e0);
 }
 
+.headerCellContent {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.headerMenuTrigger {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 2px 4px;
+  font-size: 16px;
+  line-height: 1;
+  color: var(--ogrid-fg-secondary, #666);
+  opacity: 0;
+  transition: opacity 0.15s, background-color 0.15s;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+}
+.headerMenuTrigger:hover {
+  background: var(--ogrid-hover-bg, #f3f2f1);
+  opacity: 1;
+}
+.headerMenuTrigger:active {
+  background: var(--ogrid-active-bg, #e1dfdd);
+}
+@media (prefers-color-scheme: dark) {
+  .headerMenuTrigger {
+    color: var(--ogrid-fg-secondary, #aaa);
+  }
+  .headerMenuTrigger:hover {
+    background: var(--ogrid-hover-bg, #2a2a2a);
+  }
+  .headerMenuTrigger:active {
+    background: var(--ogrid-active-bg, #3a3a3a);
+  }
+}
+
+.dataTable thead th:hover .headerMenuTrigger {
+  opacity: 1;
+}
+
 .groupHeaderCell {
   text-align: center;
   font-weight: 600;
@@ -266,6 +313,10 @@
   background: var(--ogrid-bg-range, rgba(33, 115, 70, 0.12)) !important;
 }
 
+:global([data-drag-anchor]) {
+  background: var(--ogrid-bg, #fff) !important;
+}
+
 .cellCut {
   background: var(--ogrid-bg-hover, rgba(0, 0, 0, 0.04)) !important;
   opacity: 0.7;
@@ -302,6 +353,36 @@
   width: 100%;
 }
 
+.dataTable th.rowNumberHeaderCell,
+.dataTable td.rowNumberCell {
+  width: 50px;
+  min-width: 50px;
+  max-width: 50px;
+  padding: 4px 8px !important;
+  text-align: center;
+  background: var(--ogrid-bg-subtle, #f9f9f9);
+  font-weight: 600;
+  color: var(--ogrid-text-secondary, #666);
+  border-right: 1px solid var(--ogrid-border, #e0e0e0);
+  position: sticky;
+  left: var(--row-number-sticky-left, 0px);
+  z-index: 5;
+}
+
+.dataTable th.rowNumberHeaderCell {
+  background: var(--ogrid-bg-subtle, #f3f2f1);
+  z-index: 9;
+}
+
+.rowNumberHeaderCellInner,
+.rowNumberCellInner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  font-variant-numeric: tabular-nums;
+}
+
 .rowCheckbox {
   width: 18px;
   height: 18px;
@@ -502,4 +583,18 @@
   to {
     transform: rotate(360deg);
   }
+}
+/* ─── Cell Density ───────────────────────────────────────────── */
+.density-compact .dataTable th {
+  padding: 4px 8px;
+}
+.density-compact .cellContent {
+  padding: 4px 8px;
+}
+
+.density-comfortable .dataTable th {
+  padding: 12px 16px;
+}
+.density-comfortable .cellContent {
+  padding: 12px 16px;
 }

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

@@ -0,0 +1,16 @@
+export interface ColumnHeaderMenuProps {
+    isOpen: boolean;
+    anchorElement: HTMLElement | null;
+    onClose: () => void;
+    onPinLeft: () => void;
+    onPinRight: () => void;
+    onUnpin: () => void;
+    canPinLeft: boolean;
+    canPinRight: boolean;
+    canUnpin: boolean;
+}
+/**
+ * Column header dropdown menu for pin/unpin actions.
+ * Uses Radix UI DropdownMenu primitives.
+ */
+export declare function ColumnHeaderMenu(props: ColumnHeaderMenuProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { ColumnHeaderMenu } from './ColumnHeaderMenu';
+export type { ColumnHeaderMenuProps } from './ColumnHeaderMenu';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react-radix",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "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,8 +41,9 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-react": "2.0.3",
+    "@alaarab/ogrid-react": "2.0.4",
     "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
     "@radix-ui/react-popover": "^1.1.2"
   },
   "peerDependencies": {