@alaarab/ogrid-react-material 2.2.0 → 2.4.0

package/dist/esm/index.js

@@ -1,10 +1,10 @@
 import * as React4 from 'react';
 import { useMemo, useCallback, useState, useRef, useEffect } from 'react';
-import { Box, Tooltip, Typography, IconButton, Popover, Button, Select, MenuItem, useTheme, Checkbox, Table, TableHead, TableRow, TableCell, FormControlLabel, Avatar, TextField, InputAdornment, CircularProgress, Menu, Divider } from '@mui/material';
-import { useColumnHeaderFilterState, getColumnHeaderFilterStateParams, renderFilterContent, areGridRowPropsEqual, usePaginationControls, createOGrid, DateFilterContent, CHECKBOX_COLUMN_WIDTH, STOP_PROPAGATION, ROW_NUMBER_COLUMN_WIDTH, useDataGridTableOrchestration, useColumnMeta, getCellRenderDescriptor, buildInlineEditorProps, buildPopoverEditorProps, resolveCellDisplayContent, resolveCellStyle, getCellInteractionProps, CellErrorBoundary, PREVENT_DEFAULT, getHeaderFilterConfig, MarchingAntsOverlay, NOOP, useColumnChooserState, useListVirtualizer, BaseInlineCellEditor, partitionColumnsForVirtualization, getContextMenuHandlers, GRID_CONTEXT_MENU_ITEMS, formatShortcut, getColumnHeaderMenuItems, getStatusBarParts } from '@alaarab/ogrid-react';
+import { Box, Tooltip, Typography, IconButton, Popover, useTheme, TextField, InputAdornment, Button, CircularProgress, FormControlLabel, Checkbox, Avatar, Table, TableHead, TableRow, TableCell, Select, MenuItem, Menu, Divider } from '@mui/material';
+import { createBaseFilterRenderers, useColumnHeaderFilterState, getColumnHeaderFilterStateParams, renderFilterContent, areGridRowPropsEqual, PaginationControlsBase, createOGrid, useListVirtualizer, CHECKBOX_COLUMN_WIDTH, STOP_PROPAGATION, ROW_NUMBER_COLUMN_WIDTH, useDataGridTableOrchestration, useColumnMeta, getCellRenderDescriptor, buildInlineEditorProps, buildPopoverEditorProps, resolveCellDisplayContent, resolveCellStyle, getCellInteractionProps, CellErrorBoundary, PREVENT_DEFAULT, indexToColumnLetter, getHeaderFilterConfig, MarchingAntsOverlay, FormulaRefOverlay, NOOP, getColumnHeaderMenuProps, useColumnChooserState, ColumnChooserContent, BaseInlineCellEditor, partitionColumnsForVirtualization, getContextMenuHandlers, GRID_CONTEXT_MENU_ITEMS, formatShortcut, getColumnHeaderMenuItems, getStatusBarParts } from '@alaarab/ogrid-react';
 export { BaseColumnHeaderMenu, BaseDropIndicator, BaseEmptyState, BaseInlineCellEditor, BaseLoadingOverlay, CELL_PADDING, CHECKBOX_COLUMN_WIDTH, COLUMN_HEADER_MENU_ITEMS, CURSOR_CELL_STYLE, CellErrorBoundary, DEFAULT_MIN_COLUMN_WIDTH, DateFilterContent, EmptyState, GRID_BORDER_RADIUS, GRID_CONTEXT_MENU_ITEMS, GRID_ROOT_STYLE, GridContextMenu, MAX_PAGE_BUTTONS, MarchingAntsOverlay, NOOP, OGridLayout, PAGE_SIZE_OPTIONS, POPOVER_ANCHOR_STYLE, PREVENT_DEFAULT, ROW_NUMBER_COLUMN_WIDTH, STOP_PROPAGATION, SideBar, StatusBar, UndoRedoStack, areGridRowPropsEqual, booleanParser, buildCsvHeader, buildCsvRows, buildHeaderRows, buildInlineEditorProps, buildPopoverEditorProps, clampSelectionToBounds, computeAggregations, computeAutoScrollSpeed, computeTabNavigation, createOGrid, currencyParser, dateParser, deriveFilterOptionsFromData, editorInputStyle, editorWrapperStyle, emailParser, escapeCsvValue, exportToCsv, findCtrlArrowTarget, flattenColumns, formatCellValueForTsv, formatSelectionAsTsv, formatShortcut, getCellInteractionProps, getCellRenderDescriptor, getCellValue, getColumnHeaderFilterStateParams, getColumnHeaderMenuItems, getContextMenuHandlers, getDataGridStatusBarConfig, getDateFilterContentProps, getFilterField, getHeaderFilterConfig, getMultiSelectFilterFields, getPaginationViewModel, getStatusBarParts, isInSelectionRange, isRowInRange, mergeFilter, normalizeSelectionRange, numberParser, parseTsvClipboard, parseValue, processClientSideData, rangesEqual, renderFilterContent, resolveCellDisplayContent, resolveCellStyle, richSelectDropdownStyle, richSelectNoMatchesStyle, richSelectOptionHighlightedStyle, richSelectOptionStyle, richSelectWrapperStyle, selectChevronStyle, selectDisplayStyle, selectEditorStyle, toUserLike, triggerCsvDownload, useActiveCell, useCellEditing, useCellSelection, useClipboard, useColumnChooserState, useColumnHeaderFilterState, useColumnMeta, useColumnReorder, useColumnResize, useContextMenu, useDataGridState, useDataGridTableOrchestration, useDateFilterState, useDebounce, useFillHandle, useFilterOptions, useInlineCellEditorState, useKeyboardNavigation, useLatestRef, useListVirtualizer, useMultiSelectFilterState, useOGrid, usePaginationControls, usePeopleFilterState, useRichSelectState, useRowSelection, useSelectState, useSideBarState, useTableLayout, useTextFilterState, useUndoRedo, useVirtualScroll } from '@alaarab/ogrid-react';
 import { createPortal } from 'react-dom';
-import { FilterList, FirstPage, ChevronLeft, ChevronRight, LastPage, ExpandLess, ExpandMore, ViewColumn, Clear, Search } from '@mui/icons-material';
+import { FilterList, Search, Clear, ExpandLess, ExpandMore, ViewColumn, LastPage, ChevronRight, ChevronLeft, FirstPage } from '@mui/icons-material';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 // src/OGrid/OGrid.tsx
@@ -29,6 +29,7 @@ table:not([data-virtual-scroll]) .ogrid-mat-tbody tr { content-visibility: auto;
 
 .ogrid-mat-cell--active { outline: 2px solid var(--ogrid-selection, #217346); outline-offset: -1px; z-index: var(--ogrid-z-active-cell, 2); position: relative; overflow: visible; background-color: var(--ogrid-hover-bg); }
 .ogrid-mat-cell--active:focus-visible { outline: 2px solid var(--ogrid-selection, #217346); outline-offset: -1px; }
+.ogrid-mat-cell--active-in-range { outline: none; background-color: var(--ogrid-bg, #fff); }
 .ogrid-mat-cell--range { background-color: var(--ogrid-bg-range, rgba(33,115,70,0.12)); }
 .ogrid-mat-cell--range:focus-visible { outline: none; }
 .ogrid-mat-cell--cut { background-color: var(--ogrid-hover-bg); opacity: 0.7; }
@@ -227,56 +228,9 @@ var PeopleFilterPopover = ({
   selectedUser && /* @__PURE__ */ jsx(Box, { sx: { p: 1.5, pt: 1, borderTop: 1, borderColor: "divider" }, children: /* @__PURE__ */ jsx(Button, { size: "small", fullWidth: true, onClick: onClearUser, children: "Clear Filter" }) })
 ] });
 PeopleFilterPopover.displayName = "PeopleFilterPopover";
-var materialRenderers = {
-  renderMultiSelect: (p) => /* @__PURE__ */ 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) => /* @__PURE__ */ jsx(
-    TextFilterPopover,
-    {
-      value: p.value,
-      onValueChange: p.onValueChange,
-      onApply: p.onApply,
-      onClear: p.onClear
-    }
-  ),
-  renderPeople: (p) => /* @__PURE__ */ 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) => /* @__PURE__ */ jsx(
-    DateFilterContent,
-    {
-      tempDateFrom: p.tempDateFrom,
-      setTempDateFrom: p.setTempDateFrom,
-      tempDateTo: p.tempDateTo,
-      setTempDateTo: p.setTempDateTo,
-      onApply: p.onApply,
-      onClear: p.onClear
-    }
-  )
-};
+var materialRenderers = createBaseFilterRenderers(
+  { MultiSelectFilterPopover, TextFilterPopover, PeopleFilterPopover }
+);
 var ColumnHeaderFilter = React4.memo((props) => {
   const {
     columnName,
@@ -624,6 +578,19 @@ var STICKY_HEADER_SX = {
   "& th": { bgcolor: HEADER_BG }
 };
 var HEADER_ROW_SX = { bgcolor: HEADER_BG };
+var COLUMN_LETTER_CELL_SX = {
+  textAlign: "center",
+  fontSize: "11px",
+  fontWeight: 500,
+  color: "text.secondary",
+  py: "2px",
+  px: "4px",
+  bgcolor: HEADER_BG,
+  borderBottom: 1,
+  borderColor: "divider",
+  userSelect: "none",
+  fontVariantNumeric: "tabular-nums"
+};
 var GROUP_HEADER_CELL_SX = { textAlign: "center", fontWeight: 600, borderBottom: 2, borderColor: "divider", py: 0.75 };
 function getDensityPadding(density) {
   switch (density) {
@@ -947,6 +914,7 @@ function DataGridTableInner(props) {
     headerRows,
     allowOverflowX,
     fitToContent,
+    showColumnLetters,
     editCallbacks,
     interactionHandlers,
     cellDescriptorInputRef,
@@ -1070,13 +1038,14 @@ function DataGridTableInner(props) {
         ] });
       } else {
         const content = resolveCellDisplayContent(col, item, descriptor.displayValue);
-        const cellStyle = resolveCellStyle(col, item);
+        const cellStyle = resolveCellStyle(col, item, descriptor.displayValue);
         const styledContent = cellStyle ? /* @__PURE__ */ jsx("span", { style: cellStyle, children: content }) : content;
         let cls = "ogrid-mat-cell";
         if (col.type === "numeric") cls += " ogrid-mat-cell--numeric";
         else if (col.type === "boolean") cls += " ogrid-mat-cell--boolean";
         if (descriptor.canEditAny) cls += " ogrid-mat-cell--editable";
         if (descriptor.isActive) cls += " ogrid-mat-cell--active";
+        if (descriptor.isActive && descriptor.isInRange) cls += " ogrid-mat-cell--active-in-range";
         if (descriptor.isInRange && !descriptor.isActive) cls += " ogrid-mat-cell--range";
         if (descriptor.isInCutRange) cls += " ogrid-mat-cell--cut";
         const interactionProps = getCellInteractionProps(descriptor, col.columnId, interactionHandlers);
@@ -1126,143 +1095,168 @@ function DataGridTableInner(props) {
                 sx: { minWidth: minTableWidth, borderCollapse: "separate", borderSpacing: 0 },
                 "data-virtual-scroll": virtualScrollEnabled ? "" : void 0,
                 children: [
-                  /* @__PURE__ */ jsx(TableHead, { sx: STICKY_HEADER_SX, children: headerRows.map((row, rowIdx) => /* @__PURE__ */ jsxs(TableRow, { sx: HEADER_ROW_SX, children: [
-                    rowIdx === headerRows.length - 1 && hasCheckboxCol && /* @__PURE__ */ jsx(
-                      TableCell,
-                      {
-                        ...{ padding: "checkbox", rowSpan: headerRows.length > 1 ? 1 : void 0, sx: CHECKBOX_CELL_SX },
-                        children: /* @__PURE__ */ jsx(
-                          Checkbox,
-                          {
-                            checked: allSelected,
-                            indeterminate: someSelected,
-                            onChange: (_, c) => handleSelectAll(!!c),
-                            size: "small",
-                            "aria-label": "Select all rows"
-                          }
-                        )
-                      }
-                    ),
-                    rowIdx === 0 && rowIdx < headerRows.length - 1 && hasCheckboxCol && /* @__PURE__ */ jsx(TableCell, { ...{ rowSpan: headerRows.length - 1, sx: CHECKBOX_PLACEHOLDER_SX } }),
-                    rowIdx === headerRows.length - 1 && hasRowNumbersCol && /* @__PURE__ */ jsx(
-                      TableCell,
-                      {
-                        ...{
-                          component: "th",
-                          scope: "col",
-                          rowSpan: headerRows.length > 1 ? 1 : void 0,
-                          sx: {
-                            width: ROW_NUMBER_COLUMN_WIDTH,
-                            minWidth: ROW_NUMBER_COLUMN_WIDTH,
-                            maxWidth: ROW_NUMBER_COLUMN_WIDTH,
-                            textAlign: "center",
-                            fontWeight: 600,
-                            backgroundColor: HEADER_BG,
-                            position: "sticky",
-                            left: hasCheckboxCol ? CHECKBOX_COLUMN_WIDTH : 0,
-                            zIndex: 4,
-                            ...headerCellSx
-                          }
-                        },
-                        children: "#"
-                      }
-                    ),
-                    rowIdx === 0 && rowIdx < headerRows.length - 1 && hasRowNumbersCol && /* @__PURE__ */ jsx(
-                      TableCell,
-                      {
-                        ...{
-                          rowSpan: headerRows.length - 1,
-                          sx: {
-                            width: ROW_NUMBER_COLUMN_WIDTH,
-                            minWidth: ROW_NUMBER_COLUMN_WIDTH,
-                            position: "sticky",
-                            left: hasCheckboxCol ? CHECKBOX_COLUMN_WIDTH : 0,
-                            zIndex: 4,
-                            backgroundColor: "background.paper"
-                          }
-                        }
-                      }
-                    ),
-                    row.map((cell, cellIdx) => {
-                      if (cell.isGroup) {
+                  /* @__PURE__ */ jsxs(TableHead, { sx: STICKY_HEADER_SX, children: [
+                    showColumnLetters && /* @__PURE__ */ jsxs(TableRow, { sx: HEADER_ROW_SX, children: [
+                      hasCheckboxCol && /* @__PURE__ */ jsx(TableCell, { sx: COLUMN_LETTER_CELL_SX }),
+                      hasRowNumbersCol && /* @__PURE__ */ jsx(TableCell, { sx: COLUMN_LETTER_CELL_SX }),
+                      visibleCols.map((col, colIdx) => {
+                        const hdrStyle = columnMeta.hdrStyles[col.columnId];
                         return /* @__PURE__ */ jsx(
                           TableCell,
                           {
                             ...{
-                              colSpan: cell.colSpan,
                               component: "th",
-                              scope: "colgroup",
-                              sx: GROUP_HEADER_CELL_SX
+                              sx: {
+                                ...COLUMN_LETTER_CELL_SX,
+                                minWidth: hdrStyle?.minWidth,
+                                width: hdrStyle?.width,
+                                maxWidth: hdrStyle?.maxWidth
+                              }
                             },
-                            children: cell.label
+                            children: indexToColumnLetter(colIdx)
                           },
-                          cellIdx
+                          col.columnId
                         );
-                      }
-                      if (!cell.columnDef) return null;
-                      const col = cell.columnDef;
-                      const isPinnedLeft = pinning.pinnedColumns[col.columnId] === "left";
-                      const isPinnedRight = pinning.pinnedColumns[col.columnId] === "right";
-                      const baseHeaderSx = o.stickyHeader ? isPinnedLeft ? HEADER_PINNED_LEFT_SX : isPinnedRight ? HEADER_PINNED_RIGHT_SX : HEADER_BASE_SX : isPinnedLeft ? HEADER_PINNED_LEFT_NO_STICKY_SX : isPinnedRight ? HEADER_PINNED_RIGHT_NO_STICKY_SX : HEADER_BASE_NO_STICKY_SX;
-                      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;
-                      const hdrStyle = columnMeta.hdrStyles[col.columnId];
-                      const isSorted = props.sortBy === col.columnId;
-                      const ariaSort = isSorted ? props.sortDirection === "asc" ? "ascending" : "descending" : void 0;
-                      return /* @__PURE__ */ jsxs(
+                      })
+                    ] }),
+                    headerRows.map((row, rowIdx) => /* @__PURE__ */ jsxs(TableRow, { sx: HEADER_ROW_SX, children: [
+                      rowIdx === headerRows.length - 1 && hasCheckboxCol && /* @__PURE__ */ jsx(
+                        TableCell,
+                        {
+                          ...{ padding: "checkbox", rowSpan: headerRows.length > 1 ? 1 : void 0, sx: CHECKBOX_CELL_SX },
+                          children: /* @__PURE__ */ jsx(
+                            Checkbox,
+                            {
+                              checked: allSelected,
+                              indeterminate: someSelected,
+                              onChange: (_, c) => handleSelectAll(!!c),
+                              size: "small",
+                              "aria-label": "Select all rows"
+                            }
+                          )
+                        }
+                      ),
+                      rowIdx === 0 && rowIdx < headerRows.length - 1 && hasCheckboxCol && /* @__PURE__ */ jsx(TableCell, { ...{ rowSpan: headerRows.length - 1, sx: CHECKBOX_PLACEHOLDER_SX } }),
+                      rowIdx === headerRows.length - 1 && hasRowNumbersCol && /* @__PURE__ */ jsx(
                         TableCell,
                         {
                           ...{
                             component: "th",
                             scope: "col",
-                            "data-column-id": col.columnId,
-                            rowSpan: headerRows.length > 1 ? headerRows.length - rowIdx : void 0,
-                            "aria-sort": ariaSort,
+                            rowSpan: headerRows.length > 1 ? 1 : void 0,
                             sx: {
-                              ...headerSx,
-                              ...headerCellSx,
-                              minWidth: hdrStyle?.minWidth,
-                              width: hdrStyle?.width,
-                              maxWidth: hdrStyle?.maxWidth,
-                              ...columnReorder ? { cursor: isReorderDragging ? "grabbing" : "grab" } : {},
-                              "&:focus-visible": {
-                                outline: "2px solid",
-                                outlineColor: "primary.main",
-                                outlineOffset: "-2px",
-                                zIndex: 11
-                              }
-                            },
-                            onMouseDown: columnReorder ? (e) => handleHeaderMouseDown(col.columnId, e) : void 0
+                              width: ROW_NUMBER_COLUMN_WIDTH,
+                              minWidth: ROW_NUMBER_COLUMN_WIDTH,
+                              maxWidth: ROW_NUMBER_COLUMN_WIDTH,
+                              textAlign: "center",
+                              fontWeight: 600,
+                              backgroundColor: HEADER_BG,
+                              position: "sticky",
+                              left: hasCheckboxCol ? CHECKBOX_COLUMN_WIDTH : 0,
+                              zIndex: 4,
+                              ...headerCellSx
+                            }
                           },
-                          children: [
-                            /* @__PURE__ */ jsxs(Box, { sx: HEADER_CONTENT_FLEX_SX, children: [
-                              /* @__PURE__ */ jsx(ColumnHeaderFilter, { ...getHeaderFilterConfig(col, headerFilterInput) }),
-                              /* @__PURE__ */ jsx(
-                                Box,
-                                {
-                                  component: "button",
-                                  onClick: (e) => {
-                                    e.stopPropagation();
-                                    headerMenu.open(col.columnId, e.currentTarget);
-                                  },
-                                  "aria-label": "Column options",
-                                  title: "Column options",
-                                  sx: COLUMN_OPTIONS_BUTTON_SX,
-                                  children: "\u22EE"
+                          children: "#"
+                        }
+                      ),
+                      rowIdx === 0 && rowIdx < headerRows.length - 1 && hasRowNumbersCol && /* @__PURE__ */ jsx(
+                        TableCell,
+                        {
+                          ...{
+                            rowSpan: headerRows.length - 1,
+                            sx: {
+                              width: ROW_NUMBER_COLUMN_WIDTH,
+                              minWidth: ROW_NUMBER_COLUMN_WIDTH,
+                              position: "sticky",
+                              left: hasCheckboxCol ? CHECKBOX_COLUMN_WIDTH : 0,
+                              zIndex: 4,
+                              backgroundColor: "background.paper"
+                            }
+                          }
+                        }
+                      ),
+                      row.map((cell, cellIdx) => {
+                        if (cell.isGroup) {
+                          return /* @__PURE__ */ jsx(
+                            TableCell,
+                            {
+                              ...{
+                                colSpan: cell.colSpan,
+                                component: "th",
+                                scope: "colgroup",
+                                sx: GROUP_HEADER_CELL_SX
+                              },
+                              children: cell.label
+                            },
+                            cellIdx
+                          );
+                        }
+                        if (!cell.columnDef) return null;
+                        const col = cell.columnDef;
+                        const isPinnedLeft = pinning.pinnedColumns[col.columnId] === "left";
+                        const isPinnedRight = pinning.pinnedColumns[col.columnId] === "right";
+                        const baseHeaderSx = o.stickyHeader ? isPinnedLeft ? HEADER_PINNED_LEFT_SX : isPinnedRight ? HEADER_PINNED_RIGHT_SX : HEADER_BASE_SX : isPinnedLeft ? HEADER_PINNED_LEFT_NO_STICKY_SX : isPinnedRight ? HEADER_PINNED_RIGHT_NO_STICKY_SX : HEADER_BASE_NO_STICKY_SX;
+                        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;
+                        const hdrStyle = columnMeta.hdrStyles[col.columnId];
+                        const isSorted = props.sortBy === col.columnId;
+                        const ariaSort = isSorted ? props.sortDirection === "asc" ? "ascending" : "descending" : void 0;
+                        return /* @__PURE__ */ jsxs(
+                          TableCell,
+                          {
+                            ...{
+                              component: "th",
+                              scope: "col",
+                              "data-column-id": col.columnId,
+                              rowSpan: headerRows.length > 1 ? headerRows.length - rowIdx : void 0,
+                              "aria-sort": ariaSort,
+                              sx: {
+                                ...headerSx,
+                                ...headerCellSx,
+                                minWidth: hdrStyle?.minWidth,
+                                width: hdrStyle?.width,
+                                maxWidth: hdrStyle?.maxWidth,
+                                ...columnReorder ? { cursor: isReorderDragging ? "grabbing" : "grab" } : {},
+                                "&:focus-visible": {
+                                  outline: "2px solid",
+                                  outlineColor: "primary.main",
+                                  outlineOffset: "-2px",
+                                  zIndex: 11
                                 }
-                              )
-                            ] }),
-                            /* @__PURE__ */ jsx(Box, { onMouseDown: (e) => {
-                              setActiveCell(null);
-                              interaction.setSelectionRange(null);
-                              wrapperRef.current?.focus({ preventScroll: true });
-                              handleResizeStart(e, col);
-                            }, onDoubleClick: (e) => handleResizeDoubleClick(e, col), sx: RESIZE_HANDLE_SX })
-                          ]
-                        },
-                        col.columnId
-                      );
-                    })
-                  ] }, rowIdx)) }),
+                              },
+                              onMouseDown: columnReorder ? (e) => handleHeaderMouseDown(col.columnId, e) : void 0
+                            },
+                            children: [
+                              /* @__PURE__ */ jsxs(Box, { sx: HEADER_CONTENT_FLEX_SX, children: [
+                                /* @__PURE__ */ jsx(ColumnHeaderFilter, { ...getHeaderFilterConfig(col, headerFilterInput) }),
+                                /* @__PURE__ */ jsx(
+                                  Box,
+                                  {
+                                    component: "button",
+                                    onClick: (e) => {
+                                      e.stopPropagation();
+                                      headerMenu.open(col.columnId, e.currentTarget);
+                                    },
+                                    "aria-label": "Column options",
+                                    title: "Column options",
+                                    sx: COLUMN_OPTIONS_BUTTON_SX,
+                                    children: "\u22EE"
+                                  }
+                                )
+                              ] }),
+                              /* @__PURE__ */ jsx(Box, { onMouseDown: (e) => {
+                                setActiveCell(null);
+                                interaction.setSelectionRange(null);
+                                wrapperRef.current?.focus({ preventScroll: true });
+                                handleResizeStart(e, col);
+                              }, onDoubleClick: (e) => handleResizeDoubleClick(e, col), sx: RESIZE_HANDLE_SX })
+                            ]
+                          },
+                          col.columnId
+                        );
+                      })
+                    ] }, rowIdx))
+                  ] }),
                   !showEmptyInGrid && /* @__PURE__ */ jsx(
                     MaterialTableBody,
                     {
@@ -1310,6 +1304,14 @@ function DataGridTableInner(props) {
                 isDragging
               }
             ),
+            props.formulaReferences && props.formulaReferences.length > 0 && /* @__PURE__ */ jsx(
+              FormulaRefOverlay,
+              {
+                containerRef: tableContainerRef,
+                references: props.formulaReferences,
+                colOffset
+              }
+            ),
             showEmptyInGrid && emptyState && /* @__PURE__ */ jsx(EmptyState, { emptyState })
           ] }) }) }),
           menuPosition && createPortal(
@@ -1332,28 +1334,7 @@ function DataGridTableInner(props) {
             ),
             document.body
           ),
-          /* @__PURE__ */ jsx(
-            ColumnHeaderMenu,
-            {
-              isOpen: headerMenu.isOpen,
-              anchorElement: headerMenu.anchorElement,
-              onClose: headerMenu.close,
-              onPinLeft: headerMenu.handlePinLeft,
-              onPinRight: headerMenu.handlePinRight,
-              onUnpin: headerMenu.handleUnpin,
-              onSortAsc: headerMenu.handleSortAsc,
-              onSortDesc: headerMenu.handleSortDesc,
-              onClearSort: headerMenu.handleClearSort,
-              onAutosizeThis: headerMenu.handleAutosizeThis,
-              onAutosizeAll: headerMenu.handleAutosizeAll,
-              canPinLeft: headerMenu.canPinLeft,
-              canPinRight: headerMenu.canPinRight,
-              canUnpin: headerMenu.canUnpin,
-              currentSort: headerMenu.currentSort,
-              isSortable: headerMenu.isSortable,
-              isResizable: headerMenu.isResizable
-            }
-          )
+          /* @__PURE__ */ jsx(ColumnHeaderMenu, { ...getColumnHeaderMenuProps(headerMenu) })
         ]
       }
     ),
@@ -1372,6 +1353,53 @@ function DataGridTableInner(props) {
   ] });
 }
 var DataGridTable = React4.memo(DataGridTableInner);
+var CheckboxItem = ({ columnId: _columnId, columnName, checked, disabled, onChange }) => /* @__PURE__ */ jsx(
+  FormControlLabel,
+  {
+    control: /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        size: "small",
+        checked,
+        onChange: (ev) => {
+          ev.stopPropagation();
+          onChange(ev.target.checked);
+        },
+        disabled
+      }
+    ),
+    label: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: columnName }),
+    sx: { m: 0 }
+  }
+);
+var Header = ({ visibleCount, totalCount }) => /* @__PURE__ */ jsx(Box, { sx: { px: 1.5, py: 1, borderBottom: 1, borderColor: "divider", bgcolor: "action.hover" }, children: /* @__PURE__ */ jsxs(Typography, { variant: "subtitle2", fontWeight: 600, children: [
+  "Select Columns (",
+  visibleCount,
+  " of ",
+  totalCount,
+  ")"
+] }) });
+var OptionsListContainer = ({ children }) => /* @__PURE__ */ jsx(Box, { sx: { maxHeight: 320, overflowY: "auto", py: 0.5 }, children });
+var OptionItemContainer = ({ children }) => /* @__PURE__ */ jsx(Box, { sx: { px: 1.5, minHeight: 32, display: "flex", alignItems: "center" }, children });
+var Actions = ({ onClearAll, onSelectAll }) => /* @__PURE__ */ jsxs(
+  Box,
+  {
+    sx: {
+      display: "flex",
+      justifyContent: "flex-end",
+      gap: 1,
+      px: 1.5,
+      py: 1,
+      borderTop: 1,
+      borderColor: "divider",
+      bgcolor: "action.hover"
+    },
+    children: [
+      /* @__PURE__ */ jsx(Button, { size: "small", onClick: onClearAll, sx: { textTransform: "none" }, children: "Clear All" }),
+      /* @__PURE__ */ jsx(Button, { size: "small", variant: "contained", onClick: onSelectAll, sx: { textTransform: "none" }, children: "Select All" })
+    ]
+  }
+);
 var ColumnChooser = (props) => {
   const { columns, visibleColumns, onVisibilityChange, onSetVisibleColumns, className } = props;
   const [anchorEl, setAnchorEl] = useState(null);
@@ -1399,10 +1427,7 @@ var ColumnChooser = (props) => {
     handleClose();
     setAnchorEl(null);
   };
-  const handleCheckboxChange = (columnKey) => (ev) => {
-    ev.stopPropagation();
-    setColumnVisible(columnKey)(ev.target.checked);
-  };
+  const handleCheckboxChange = (columnKey) => (checked) => setColumnVisible(columnKey)(checked);
   return /* @__PURE__ */ jsxs(Box, { className, sx: { display: "inline-flex" }, children: [
     /* @__PURE__ */ jsxs(
       Button,
@@ -1430,7 +1455,7 @@ var ColumnChooser = (props) => {
         ]
       }
     ),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       Popover,
       {
         open: isOpen,
@@ -1438,236 +1463,89 @@ var ColumnChooser = (props) => {
         onClose: handlePopoverClose,
         anchorOrigin: { vertical: "bottom", horizontal: "right" },
         transformOrigin: { vertical: "top", horizontal: "right" },
-        slotProps: {
-          paper: {
-            sx: { mt: 0.5, minWidth: 220 }
+        slotProps: { paper: { sx: { mt: 0.5, minWidth: 220 } } },
+        children: /* @__PURE__ */ jsx(
+          ColumnChooserContent,
+          {
+            columns,
+            visibleColumns,
+            visibleCount,
+            totalCount,
+            handleSelectAll,
+            handleClearAll,
+            handleCheckboxChange,
+            CheckboxItem,
+            Header,
+            OptionsListContainer,
+            OptionItemContainer,
+            Actions
           }
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            Box,
-            {
-              sx: {
-                px: 1.5,
-                py: 1,
-                borderBottom: 1,
-                borderColor: "divider",
-                bgcolor: "action.hover"
-              },
-              children: /* @__PURE__ */ jsxs(Typography, { variant: "subtitle2", fontWeight: 600, children: [
-                "Select Columns (",
-                visibleCount,
-                " of ",
-                totalCount,
-                ")"
-              ] })
-            }
-          ),
-          /* @__PURE__ */ jsx(Box, { sx: { maxHeight: 320, overflowY: "auto", py: 0.5 }, children: columns.map((column) => /* @__PURE__ */ jsx(Box, { sx: { px: 1.5, minHeight: 32, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(
-            FormControlLabel,
-            {
-              control: /* @__PURE__ */ jsx(
-                Checkbox,
-                {
-                  size: "small",
-                  checked: visibleColumns.has(column.columnId),
-                  onChange: handleCheckboxChange(column.columnId),
-                  disabled: column.required === true
-                }
-              ),
-              label: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: column.name }),
-              sx: { m: 0 }
-            }
-          ) }, column.columnId)) }),
-          /* @__PURE__ */ jsxs(
-            Box,
-            {
-              sx: {
-                display: "flex",
-                justifyContent: "flex-end",
-                gap: 1,
-                px: 1.5,
-                py: 1,
-                borderTop: 1,
-                borderColor: "divider",
-                bgcolor: "action.hover"
-              },
-              children: [
-                /* @__PURE__ */ jsx(Button, { size: "small", onClick: handleClearAll, sx: { textTransform: "none" }, children: "Clear All" }),
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    size: "small",
-                    variant: "contained",
-                    onClick: handleSelectAll,
-                    sx: { textTransform: "none" },
-                    children: "Select All"
-                  }
-                )
-              ]
-            }
-          )
-        ]
+        )
       }
     )
   ] });
 };
-var PaginationControls = React4.memo((props) => {
-  const {
-    currentPage,
-    pageSize,
-    totalCount,
-    onPageChange,
-    onPageSizeChange,
-    pageSizeOptions,
-    entityLabelPlural,
-    className
-  } = props;
-  const { labelPlural, vm, handlePageSizeChange } = usePaginationControls({
-    currentPage,
-    pageSize,
-    totalCount,
-    onPageChange,
-    onPageSizeChange,
-    pageSizeOptions,
-    entityLabelPlural
-  });
-  const handlePageSizeChangeEvent = (event) => {
-    handlePageSizeChange(Number(event.target.value));
-  };
-  if (!vm) {
-    return null;
+var MUI_NAV_ICONS = {
+  first: /* @__PURE__ */ jsx(FirstPage, { fontSize: "small" }),
+  prev: /* @__PURE__ */ jsx(ChevronLeft, { fontSize: "small" }),
+  next: /* @__PURE__ */ jsx(ChevronRight, { fontSize: "small" }),
+  last: /* @__PURE__ */ jsx(LastPage, { fontSize: "small" })
+};
+var NavButton = ({ variant, onClick, disabled, "aria-label": ariaLabel }) => /* @__PURE__ */ jsx(IconButton, { size: "small", onClick, disabled, "aria-label": ariaLabel, children: MUI_NAV_ICONS[variant] });
+var PageButton = ({ onClick, active, "aria-label": ariaLabel, "aria-current": ariaCurrent, children }) => /* @__PURE__ */ jsx(
+  Button,
+  {
+    variant: active ? "contained" : "outlined",
+    size: "small",
+    onClick,
+    "aria-label": ariaLabel,
+    "aria-current": ariaCurrent,
+    sx: { minWidth: 32, px: 0.5 },
+    children
   }
-  const { pageNumbers, showStartEllipsis, showEndEllipsis, totalPages, startItem, endItem } = vm;
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      className,
-      role: "navigation",
-      "aria-label": "Pagination",
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        flexWrap: "wrap",
-        gap: 2,
-        px: 1.5,
-        width: "100%",
-        minWidth: 0,
-        boxSizing: "border-box"
-      },
-      children: [
-        /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "text.secondary", children: [
-          "Showing ",
-          startItem,
-          " to ",
-          endItem,
-          " of ",
-          totalCount.toLocaleString(),
-          " ",
-          labelPlural
-        ] }),
-        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
-          /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              size: "small",
-              onClick: () => onPageChange(1),
-              disabled: currentPage === 1,
-              "aria-label": "First page",
-              children: /* @__PURE__ */ jsx(FirstPage, { fontSize: "small" })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              size: "small",
-              onClick: () => onPageChange(currentPage - 1),
-              disabled: currentPage === 1,
-              "aria-label": "Previous page",
-              children: /* @__PURE__ */ jsx(ChevronLeft, { fontSize: "small" })
-            }
-          ),
-          showStartEllipsis && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "outlined",
-                size: "small",
-                onClick: () => onPageChange(1),
-                "aria-label": "Page 1",
-                sx: { minWidth: 32, px: 0.5 },
-                children: "1"
-              }
-            ),
-            /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mx: 0.5 }, "aria-hidden": true, children: "\u2026" })
-          ] }),
-          pageNumbers.map((pageNum) => /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: currentPage === pageNum ? "contained" : "outlined",
-              size: "small",
-              onClick: () => onPageChange(pageNum),
-              "aria-label": `Page ${pageNum}`,
-              "aria-current": currentPage === pageNum ? "page" : void 0,
-              sx: { minWidth: 32, px: 0.5 },
-              children: pageNum
-            },
-            pageNum
-          )),
-          showEndEllipsis && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mx: 0.5 }, "aria-hidden": true, children: "\u2026" }),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "outlined",
-                size: "small",
-                onClick: () => onPageChange(totalPages),
-                "aria-label": `Page ${totalPages}`,
-                sx: { minWidth: 32, px: 0.5 },
-                children: totalPages
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              size: "small",
-              onClick: () => onPageChange(currentPage + 1),
-              disabled: currentPage >= totalPages,
-              "aria-label": "Next page",
-              children: /* @__PURE__ */ jsx(ChevronRight, { fontSize: "small" })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              size: "small",
-              onClick: () => onPageChange(totalPages),
-              disabled: currentPage >= totalPages,
-              "aria-label": "Last page",
-              children: /* @__PURE__ */ jsx(LastPage, { fontSize: "small" })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "Rows" }),
-          /* @__PURE__ */ jsx(
-            Select,
-            {
-              value: pageSize,
-              onChange: handlePageSizeChangeEvent,
-              size: "small",
-              "aria-label": "Rows per page",
-              sx: { minWidth: 70 },
-              children: vm.pageSizeOptions.map((n) => /* @__PURE__ */ jsx(MenuItem, { value: n, children: n }, n))
-            }
-          )
-        ] })
-      ]
-    }
-  );
-});
+);
+var PageSizeSelect = ({ value, options, onChange, "aria-label": ariaLabel }) => {
+  const handleChange = (event) => onChange(Number(event.target.value));
+  return /* @__PURE__ */ jsx(Select, { value, onChange: handleChange, size: "small", "aria-label": ariaLabel, sx: { minWidth: 70 }, children: options.map((n) => /* @__PURE__ */ jsx(MenuItem, { value: n, children: n }, n)) });
+};
+var OuterContainer = ({ children, className, role, "aria-label": ariaLabel }) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    className,
+    role,
+    "aria-label": ariaLabel,
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      flexWrap: "wrap",
+      gap: 2,
+      px: 1.5,
+      width: "100%",
+      minWidth: 0,
+      boxSizing: "border-box"
+    },
+    children
+  }
+);
+var InfoText = ({ children }) => /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children });
+var NavButtonsContainer = ({ children }) => /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children });
+var PageSizeContainer = ({ children }) => /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children });
+var PageSizeLabel = () => /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "Rows" });
+var Ellipsis = () => /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mx: 0.5 }, "aria-hidden": true, children: "\u2026" });
+var SLOTS = {
+  NavButton,
+  PageButton,
+  PageSizeSelect,
+  OuterContainer,
+  InfoText,
+  NavButtonsContainer,
+  PageSizeContainer,
+  PageSizeLabel,
+  Ellipsis
+};
+var PaginationControls = React4.memo((props) => /* @__PURE__ */ jsx(PaginationControlsBase, { ...props, slots: SLOTS }));
+PaginationControls.displayName = "PaginationControls";
 var MuiThemeContainer = React4.forwardRef(
   function MuiThemeContainer2(props, ref) {
     const theme = useTheme();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react-material",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "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",
@@ -39,7 +39,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-react": "2.2.0"
+    "@alaarab/ogrid-react": "2.4.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.0.0",