@alaarab/ogrid-react-material 2.1.15 → 2.3.0

package/dist/esm/index.js

@@ -1,7 +1,7 @@
-import * as React3 from 'react';
+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, getContextMenuHandlers, GRID_CONTEXT_MENU_ITEMS, formatShortcut, getColumnHeaderMenuItems, getStatusBarParts } from '@alaarab/ogrid-react';
+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';
 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';
@@ -18,8 +18,10 @@ var STYLES = `
 .ogrid-mat-td--pinned-left { position: sticky; left: 0; z-index: var(--ogrid-z-pinned, 6); background-color: var(--ogrid-paper-bg, #fff); will-change: transform; border-right: 1px solid var(--ogrid-border, rgba(224,224,224,1)); box-shadow: 2px 0 4px -1px rgba(0,0,0,0.1); }
 .ogrid-mat-td--pinned-right { position: sticky; right: 0; z-index: var(--ogrid-z-pinned, 6); background-color: var(--ogrid-paper-bg, #fff); will-change: transform; border-left: 1px solid var(--ogrid-border, rgba(224,224,224,1)); box-shadow: -2px 0 4px -1px rgba(0,0,0,0.1); }
 
-.ogrid-mat-cell { width: 100%; height: 100%; display: flex; align-items: center; min-width: 0; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: none; outline: none; }
+.ogrid-mat-cell { width: 100%; height: 100%; display: flex; align-items: center; min-width: 0; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: none; outline: none; contain: content; }
 .ogrid-mat-cell:focus-visible { outline: 2px solid var(--ogrid-primary, #1976d2); outline-offset: -2px; z-index: 3; }
+.ogrid-mat-td--pinned-left .ogrid-mat-cell, .ogrid-mat-td--pinned-right .ogrid-mat-cell { contain: none; }
+table:not([data-virtual-scroll]) .ogrid-mat-tbody tr { content-visibility: auto; }
 
 .ogrid-mat-cell--numeric { justify-content: flex-end; text-align: right; }
 .ogrid-mat-cell--boolean { justify-content: center; text-align: center; }
@@ -27,6 +29,7 @@ var STYLES = `
 
 .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; }
@@ -275,7 +278,7 @@ var materialRenderers = {
     }
   )
 };
-var ColumnHeaderFilter = React3.memo((props) => {
+var ColumnHeaderFilter = React4.memo((props) => {
   const {
     columnName,
     filterType,
@@ -487,8 +490,8 @@ function StatusBar(props) {
 }
 function GridContextMenu(props) {
   const { x, y, hasSelection, canUndo, canRedo, onClose } = props;
-  const handlers = React3.useMemo(() => getContextMenuHandlers(props), [props]);
-  const isDisabled = React3.useCallback(
+  const handlers = React4.useMemo(() => getContextMenuHandlers(props), [props]);
+  const isDisabled = React4.useCallback(
     (item) => {
       if (item.disabledWhenNoSelection && !hasSelection) return true;
       if (item.id === "undo" && !canUndo) return true;
@@ -622,6 +625,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) {
@@ -738,6 +754,7 @@ var COLUMN_OPTIONS_BUTTON_SX = {
 };
 var TABLE_WRAPPER_SX = { position: "relative", opacity: 1 };
 var TABLE_WRAPPER_LOADING_SX = { position: "relative", opacity: 0.6 };
+var SPACER_TD_STYLE = { padding: 0, border: "none" };
 function GridRowInner(props) {
   const {
     item,
@@ -752,7 +769,10 @@ function GridRowInner(props) {
     hasCheckboxCol,
     hasRowNumbersCol,
     rowNumberOffset,
-    rowHeight
+    rowHeight,
+    leftSpacerWidth,
+    rightSpacerWidth,
+    globalColIndexMap
   } = props;
   return /* @__PURE__ */ jsxs(
     "tr",
@@ -795,22 +815,119 @@ function GridRowInner(props) {
             children: rowNumberOffset + rowIndex + 1
           }
         ),
-        columnLayouts.map((cl, colIdx) => /* @__PURE__ */ jsx(
-          "td",
-          {
-            "data-column-id": cl.col.columnId,
-            className: cl.tdClassName,
-            style: { ...cl.tdStyle, minWidth: cl.minWidth, width: cl.width, maxWidth: cl.maxWidth },
-            children: renderCellContent(item, cl.col, rowIndex, colIdx)
-          },
-          cl.col.columnId
-        ))
+        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;
+          return /* @__PURE__ */ jsx(
+            "td",
+            {
+              "data-column-id": cl.col.columnId,
+              className: cl.tdClassName,
+              style: { ...cl.tdStyle, minWidth: cl.minWidth, width: cl.width, maxWidth: cl.maxWidth },
+              children: renderCellContent(item, cl.col, rowIndex, globalIdx)
+            },
+            cl.col.columnId
+          );
+        }),
+        rightSpacerWidth != null && rightSpacerWidth > 0 && /* @__PURE__ */ jsx("td", { style: { ...SPACER_TD_STYLE, width: rightSpacerWidth, minWidth: rightSpacerWidth }, "aria-hidden": true })
       ]
     }
   );
 }
-var GridRow = React3.memo(GridRowInner, areGridRowPropsEqual);
+var GridRow = React4.memo(GridRowInner, areGridRowPropsEqual);
 injectDataGridStyles();
+function MaterialTableBody(props) {
+  const {
+    virtualScrollEnabled,
+    visibleRange,
+    columnRange,
+    items,
+    getRowId,
+    selectedRowIds,
+    visibleCols,
+    columnLayouts,
+    renderCellContent,
+    handleSingleRowClick,
+    handleRowCheckboxChange,
+    lastMouseShiftRef,
+    hasCheckboxCol,
+    hasRowNumbersCol,
+    rowNumberOffset,
+    rowHeight,
+    selectionRange,
+    activeCell,
+    cutRange,
+    copyRange,
+    isDragging,
+    editingCell,
+    pinnedColumns
+  } = props;
+  const { rowLayouts, globalColIndexMap, leftSpacerWidth, rightSpacerWidth } = React4.useMemo(() => {
+    if (!columnRange) {
+      return { rowLayouts: columnLayouts, globalColIndexMap: void 0, leftSpacerWidth: void 0, rightSpacerWidth: void 0 };
+    }
+    const partition = partitionColumnsForVirtualization(
+      visibleCols,
+      columnRange,
+      pinnedColumns
+    );
+    const combined = [...partition.pinnedLeft, ...partition.virtualizedUnpinned, ...partition.pinnedRight];
+    const layoutMap = new Map(columnLayouts.map((cl) => [cl.col.columnId, cl]));
+    const partitionedLayouts = [];
+    const idxMap = [];
+    for (const col of combined) {
+      const layout = layoutMap.get(col.columnId);
+      if (layout) {
+        partitionedLayouts.push(layout);
+        idxMap.push(visibleCols.indexOf(col));
+      }
+    }
+    return {
+      rowLayouts: partitionedLayouts,
+      globalColIndexMap: idxMap,
+      leftSpacerWidth: partition.leftSpacerWidth,
+      rightSpacerWidth: partition.rightSpacerWidth
+    };
+  }, [columnRange, visibleCols, columnLayouts, pinnedColumns]);
+  const renderRow = (item, rowIndex) => {
+    const rowIdStr = getRowId(item);
+    return /* @__PURE__ */ jsx(
+      GridRow,
+      {
+        item,
+        rowIndex,
+        rowId: rowIdStr,
+        isSelected: selectedRowIds.has(rowIdStr),
+        columnLayouts: rowLayouts,
+        renderCellContent,
+        handleSingleRowClick,
+        handleRowCheckboxChange,
+        lastMouseShiftRef,
+        hasCheckboxCol,
+        hasRowNumbersCol,
+        rowNumberOffset,
+        selectionRange,
+        activeCell,
+        cutRange,
+        copyRange,
+        isDragging,
+        rowHeight,
+        editingRowId: editingCell?.rowId ?? null,
+        leftSpacerWidth,
+        rightSpacerWidth,
+        globalColIndexMap
+      },
+      rowIdStr
+    );
+  };
+  return /* @__PURE__ */ jsxs("tbody", { className: "ogrid-mat-tbody", children: [
+    virtualScrollEnabled && visibleRange.offsetTop > 0 && /* @__PURE__ */ jsx("tr", { style: { height: visibleRange.offsetTop }, "aria-hidden": true }),
+    virtualScrollEnabled ? items.slice(visibleRange.startIndex, visibleRange.endIndex + 1).map(
+      (item, i) => renderRow(item, visibleRange.startIndex + i)
+    ) : items.map((item, rowIndex) => renderRow(item, rowIndex)),
+    virtualScrollEnabled && visibleRange.offsetBottom > 0 && /* @__PURE__ */ jsx("tr", { style: { height: visibleRange.offsetBottom }, "aria-hidden": true })
+  ] });
+}
 function DataGridTableInner(props) {
   const o = useDataGridTableOrchestration({ props });
   const {
@@ -827,6 +944,8 @@ function DataGridTableInner(props) {
     handleHeaderMouseDown,
     virtualScrollEnabled,
     visibleRange,
+    columnRange,
+    onHorizontalScroll,
     items,
     getRowId,
     emptyState,
@@ -842,6 +961,7 @@ function DataGridTableInner(props) {
     headerRows,
     allowOverflowX,
     fitToContent,
+    showColumnLetters,
     editCallbacks,
     interactionHandlers,
     cellDescriptorInputRef,
@@ -965,13 +1085,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);
@@ -1004,6 +1125,7 @@ function DataGridTableInner(props) {
         onMouseDown: (e) => {
           lastMouseShiftRef.current = e.shiftKey;
         },
+        onScroll: onHorizontalScroll ? (e) => onHorizontalScroll(e.target.scrollLeft) : void 0,
         onKeyDown: handleGridKeyDown,
         onContextMenu: PREVENT_DEFAULT,
         "data-density": density,
@@ -1018,204 +1140,198 @@ function DataGridTableInner(props) {
                 size: "small",
                 role: "grid",
                 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"
-                                }
-                              )
-                            ] }),
-                            /* @__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__ */ jsxs("tbody", { className: "ogrid-mat-tbody", children: [
-                    virtualScrollEnabled && visibleRange.offsetTop > 0 && /* @__PURE__ */ 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 /* @__PURE__ */ jsx(
-                        GridRow,
-                        {
-                          item,
-                          rowIndex,
-                          rowId: rowIdStr,
-                          isSelected: selectedRowIds.has(rowIdStr),
-                          columnLayouts,
-                          renderCellContent,
-                          handleSingleRowClick,
-                          handleRowCheckboxChange,
-                          lastMouseShiftRef,
-                          hasCheckboxCol,
-                          hasRowNumbersCol,
-                          rowNumberOffset,
-                          selectionRange,
-                          activeCell: interaction.activeCell,
-                          cutRange,
-                          copyRange,
-                          isDragging,
-                          rowHeight,
-                          editingRowId: editingCell?.rowId ?? null
-                        },
-                        rowIdStr
-                      );
-                    }) : items.map((item, rowIndex) => {
-                      const rowIdStr = getRowId(item);
-                      return /* @__PURE__ */ jsx(
-                        GridRow,
+                          children: "#"
+                        }
+                      ),
+                      rowIdx === 0 && rowIdx < headerRows.length - 1 && hasRowNumbersCol && /* @__PURE__ */ jsx(
+                        TableCell,
                         {
-                          item,
-                          rowIndex,
-                          rowId: rowIdStr,
-                          isSelected: selectedRowIds.has(rowIdStr),
-                          columnLayouts,
-                          renderCellContent,
-                          handleSingleRowClick,
-                          handleRowCheckboxChange,
-                          lastMouseShiftRef,
-                          hasCheckboxCol,
-                          hasRowNumbersCol,
-                          rowNumberOffset,
-                          selectionRange,
-                          activeCell: interaction.activeCell,
-                          cutRange,
-                          copyRange,
-                          isDragging,
-                          rowHeight,
-                          editingRowId: editingCell?.rowId ?? null
-                        },
-                        rowIdStr
-                      );
-                    }),
-                    virtualScrollEnabled && visibleRange.offsetBottom > 0 && /* @__PURE__ */ jsx("tr", { style: { height: visibleRange.offsetBottom }, "aria-hidden": true })
-                  ] })
+                          ...{
+                            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
+                                }
+                              },
+                              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,
+                    {
+                      virtualScrollEnabled,
+                      visibleRange,
+                      columnRange,
+                      items,
+                      getRowId,
+                      selectedRowIds,
+                      visibleCols,
+                      columnLayouts,
+                      renderCellContent,
+                      handleSingleRowClick,
+                      handleRowCheckboxChange,
+                      lastMouseShiftRef,
+                      hasCheckboxCol,
+                      hasRowNumbersCol,
+                      rowNumberOffset,
+                      rowHeight,
+                      selectionRange,
+                      activeCell: interaction.activeCell,
+                      cutRange,
+                      copyRange,
+                      isDragging,
+                      editingCell,
+                      pinnedColumns: pinning.pinnedColumns
+                    }
+                  )
                 ]
               }
             ),
@@ -1296,7 +1412,7 @@ function DataGridTableInner(props) {
     isLoading && /* @__PURE__ */ jsx(LoadingOverlay, { message: loadingMessage })
   ] });
 }
-var DataGridTable = React3.memo(DataGridTableInner);
+var DataGridTable = React4.memo(DataGridTableInner);
 var ColumnChooser = (props) => {
   const { columns, visibleColumns, onVisibilityChange, onSetVisibleColumns, className } = props;
   const [anchorEl, setAnchorEl] = useState(null);
@@ -1437,7 +1553,7 @@ var ColumnChooser = (props) => {
     )
   ] });
 };
-var PaginationControls = React3.memo((props) => {
+var PaginationControls = React4.memo((props) => {
   const {
     currentPage,
     pageSize,
@@ -1593,10 +1709,10 @@ var PaginationControls = React3.memo((props) => {
     }
   );
 });
-var MuiThemeContainer = React3.forwardRef(
+var MuiThemeContainer = React4.forwardRef(
   function MuiThemeContainer2(props, ref) {
     const theme = useTheme();
-    const sx = React3.useMemo(() => ({
+    const sx = React4.useMemo(() => ({
       display: "flex",
       flexDirection: "column",
       gap: 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react-material",
-  "version": "2.1.15",
+  "version": "2.3.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.1.15"
+    "@alaarab/ogrid-react": "2.3.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.0.0",