@alaarab/ogrid-react-material 2.3.0 → 2.4.1

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, indexToColumnLetter, 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, ROW_NUMBER_COLUMN_ID, 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
@@ -228,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,
@@ -772,7 +725,8 @@ function GridRowInner(props) {
     rowHeight,
     leftSpacerWidth,
     rightSpacerWidth,
-    globalColIndexMap
+    globalColIndexMap,
+    rowNumWidth
   } = props;
   return /* @__PURE__ */ jsxs(
     "tr",
@@ -801,20 +755,23 @@ function GridRowInner(props) {
             )
           }
         ) }),
-        hasRowNumbersCol && /* @__PURE__ */ jsx(
-          "td",
-          {
-            className: "ogrid-mat-td ogrid-mat-row-number",
-            style: {
-              width: ROW_NUMBER_COLUMN_WIDTH,
-              minWidth: ROW_NUMBER_COLUMN_WIDTH,
-              maxWidth: ROW_NUMBER_COLUMN_WIDTH,
-              left: hasCheckboxCol ? CHECKBOX_COLUMN_WIDTH : 0,
-              borderBottom: "1px solid var(--ogrid-border, rgba(224,224,224,1))"
-            },
-            children: rowNumberOffset + rowIndex + 1
-          }
-        ),
+        hasRowNumbersCol && (() => {
+          const rnw = rowNumWidth ?? ROW_NUMBER_COLUMN_WIDTH;
+          return /* @__PURE__ */ jsx(
+            "td",
+            {
+              className: "ogrid-mat-td ogrid-mat-row-number",
+              style: {
+                width: rnw,
+                minWidth: rnw,
+                maxWidth: rnw,
+                left: hasCheckboxCol ? CHECKBOX_COLUMN_WIDTH : 0,
+                borderBottom: "1px solid var(--ogrid-border, rgba(224,224,224,1))"
+              },
+              children: rowNumberOffset + rowIndex + 1
+            }
+          );
+        })(),
         leftSpacerWidth != null && leftSpacerWidth > 0 && /* @__PURE__ */ jsx("td", { style: { ...SPACER_TD_STYLE, width: leftSpacerWidth, minWidth: leftSpacerWidth }, "aria-hidden": true }),
         columnLayouts.map((cl, colIdx) => {
           const globalIdx = globalColIndexMap ? globalColIndexMap[colIdx] : colIdx;
@@ -860,7 +817,8 @@ function MaterialTableBody(props) {
     copyRange,
     isDragging,
     editingCell,
-    pinnedColumns
+    pinnedColumns,
+    rowNumWidth
   } = props;
   const { rowLayouts, globalColIndexMap, leftSpacerWidth, rightSpacerWidth } = React4.useMemo(() => {
     if (!columnRange) {
@@ -915,7 +873,8 @@ function MaterialTableBody(props) {
         editingRowId: editingCell?.rowId ?? null,
         leftSpacerWidth,
         rightSpacerWidth,
-        globalColIndexMap
+        globalColIndexMap,
+        rowNumWidth
       },
       rowIdStr
     );
@@ -1084,9 +1043,14 @@ function DataGridTableInner(props) {
           )
         ] });
       } else {
-        const content = resolveCellDisplayContent(col, item, descriptor.displayValue);
-        const cellStyle = resolveCellStyle(col, item, descriptor.displayValue);
-        const styledContent = cellStyle ? /* @__PURE__ */ jsx("span", { style: cellStyle, children: content }) : content;
+        let displayNode;
+        if (descriptor.columnType === "boolean") {
+          displayNode = /* @__PURE__ */ jsx("input", { type: "checkbox", checked: !!descriptor.displayValue, disabled: true, style: { margin: 0, pointerEvents: "none" }, "aria-label": descriptor.displayValue ? "True" : "False" });
+        } else {
+          const content = resolveCellDisplayContent(col, item, descriptor.displayValue);
+          const cellStyle = resolveCellStyle(col, item, descriptor.displayValue);
+          displayNode = 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";
@@ -1103,7 +1067,7 @@ function DataGridTableInner(props) {
             ...interactionProps,
             style: cellDensityStyle,
             children: [
-              styledContent,
+              displayNode,
               descriptor.canEditAny && descriptor.isSelectionEndCell && /* @__PURE__ */ jsx("div", { className: "ogrid-mat-fill-handle", onMouseDown: handleFillHandleMouseDown, "aria-label": "Fill handle" })
             ]
           }
@@ -1184,45 +1148,59 @@ function DataGridTableInner(props) {
                         }
                       ),
                       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"
+                      rowIdx === headerRows.length - 1 && hasRowNumbersCol && (() => {
+                        const rnw = columnSizingOverrides?.[ROW_NUMBER_COLUMN_ID]?.widthPx ?? ROW_NUMBER_COLUMN_WIDTH;
+                        return /* @__PURE__ */ jsxs(
+                          TableCell,
+                          {
+                            ...{
+                              component: "th",
+                              scope: "col",
+                              rowSpan: headerRows.length > 1 ? 1 : void 0,
+                              sx: {
+                                width: rnw,
+                                minWidth: rnw,
+                                maxWidth: rnw,
+                                textAlign: "center",
+                                fontWeight: 600,
+                                backgroundColor: HEADER_BG,
+                                position: "sticky",
+                                left: hasCheckboxCol ? CHECKBOX_COLUMN_WIDTH : 0,
+                                zIndex: 4,
+                                ...headerCellSx
+                              }
+                            },
+                            children: [
+                              "#",
+                              /* @__PURE__ */ jsx(Box, { onMouseDown: (e) => {
+                                setActiveCell(null);
+                                interaction.setSelectionRange(null);
+                                wrapperRef.current?.focus({ preventScroll: true });
+                                handleResizeStart(e, { columnId: ROW_NUMBER_COLUMN_ID, name: "#" });
+                              }, sx: RESIZE_HANDLE_SX })
+                            ]
+                          }
+                        );
+                      })(),
+                      rowIdx === 0 && rowIdx < headerRows.length - 1 && hasRowNumbersCol && (() => {
+                        const spacerRnw = columnSizingOverrides?.[ROW_NUMBER_COLUMN_ID]?.widthPx ?? ROW_NUMBER_COLUMN_WIDTH;
+                        return /* @__PURE__ */ jsx(
+                          TableCell,
+                          {
+                            ...{
+                              rowSpan: headerRows.length - 1,
+                              sx: {
+                                width: spacerRnw,
+                                minWidth: spacerRnw,
+                                position: "sticky",
+                                left: hasCheckboxCol ? CHECKBOX_COLUMN_WIDTH : 0,
+                                zIndex: 4,
+                                backgroundColor: "background.paper"
+                              }
                             }
                           }
-                        }
-                      ),
+                        );
+                      })(),
                       row.map((cell, cellIdx) => {
                         if (cell.isGroup) {
                           return /* @__PURE__ */ jsx(
@@ -1282,7 +1260,11 @@ function DataGridTableInner(props) {
                                     component: "button",
                                     onClick: (e) => {
                                       e.stopPropagation();
-                                      headerMenu.open(col.columnId, e.currentTarget);
+                                      if (headerMenu.isOpen && headerMenu.openForColumn === col.columnId) {
+                                        headerMenu.close();
+                                      } else {
+                                        headerMenu.open(col.columnId, e.currentTarget);
+                                      }
                                     },
                                     "aria-label": "Column options",
                                     title: "Column options",
@@ -1329,7 +1311,8 @@ function DataGridTableInner(props) {
                       copyRange,
                       isDragging,
                       editingCell,
-                      pinnedColumns: pinning.pinnedColumns
+                      pinnedColumns: pinning.pinnedColumns,
+                      rowNumWidth: hasRowNumbersCol ? columnSizingOverrides?.[ROW_NUMBER_COLUMN_ID]?.widthPx ?? ROW_NUMBER_COLUMN_WIDTH : void 0
                     }
                   )
                 ]
@@ -1351,6 +1334,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(
@@ -1373,28 +1364,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) })
         ]
       }
     ),
@@ -1413,6 +1383,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);
@@ -1440,10 +1457,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,
@@ -1471,7 +1485,7 @@ var ColumnChooser = (props) => {
         ]
       }
     ),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       Popover,
       {
         open: isOpen,
@@ -1479,236 +1493,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.3.0",
+  "version": "2.4.1",
   "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.3.0"
+    "@alaarab/ogrid-react": "2.4.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.0.0",