@alaarab/ogrid-react-fluent 2.1.15 → 2.3.0

package/dist/esm/index.css

@@ -589,11 +589,19 @@
   white-space: nowrap;
   user-select: none;
   outline: none;
+  contain: content;
 }
 .ogrid-fluent__DataGridTable-module__cellContent:focus-visible {
   outline: none;
 }
-.ogrid-fluent__DataGridTable-module__activeCellContent {
+.ogrid-fluent__DataGridTable-module__pinnedColLeft .ogrid-fluent__DataGridTable-module__cellContent,
+.ogrid-fluent__DataGridTable-module__pinnedColRight .ogrid-fluent__DataGridTable-module__cellContent {
+  contain: none;
+}
+.ogrid-fluent__DataGridTable-module__dataTable:not([data-virtual-scroll]) tbody tr {
+  content-visibility: auto;
+}
+.ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__activeCellContent.ogrid-fluent__DataGridTable-module__activeCellContent {
   outline: 2px solid var(--ogrid-selection-color, #217346);
   outline-offset: -1px;
   z-index: var(--ogrid-z-active-cell, 2);
@@ -601,7 +609,7 @@
   overflow: visible;
   background: var(--ogrid-active-cell-bg, rgba(0, 0, 0, 0.02));
 }
-.ogrid-fluent__DataGridTable-module__editingCellContent {
+.ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__editingCellContent.ogrid-fluent__DataGridTable-module__editingCellContent {
   width: 100%;
   height: 100%;
   display: flex;
@@ -624,9 +632,13 @@
 .ogrid-fluent__DataGridTable-module__tableWrapper [data-drag-anchor] {
   background: var(--ogrid-bg, #fff);
 }
-.ogrid-fluent__DataGridTable-module__activeCellContent[data-drag-anchor],
-.ogrid-fluent__DataGridTable-module__activeCellContent[data-drag-range] {
+.ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__activeCellContent.ogrid-fluent__DataGridTable-module__activeCellContent[data-drag-anchor],
+.ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__activeCellContent.ogrid-fluent__DataGridTable-module__activeCellContent[data-drag-range] {
+  outline: none;
+}
+.ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__activeCellContent.ogrid-fluent__DataGridTable-module__activeCellContent.ogrid-fluent__DataGridTable-module__inRange {
   outline: none;
+  background: var(--ogrid-bg, #fff);
 }
 .ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__cellCut {
   background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
@@ -660,6 +672,20 @@
   width: 100%;
   font-variant-numeric: tabular-nums;
 }
+.ogrid-fluent__DataGridTable-module__columnLetterRow {
+  background: var(--ogrid-column-letter-bg, var(--ogrid-header-bg));
+}
+.ogrid-fluent__DataGridTable-module__columnLetterCell {
+  text-align: center;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
+  padding: 2px 4px;
+  background: var(--ogrid-column-letter-bg, var(--ogrid-header-bg));
+  border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+  user-select: none;
+  font-variant-numeric: tabular-nums;
+}
 .ogrid-fluent__DataGridTable-module__statusBar {
   display: flex;
   align-items: center;
@@ -865,6 +891,7 @@
   --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
   --ogrid-pinned-shadow: rgba(0, 0, 0, 0.1);
   --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);
+  --ogrid-formula-error-color: #d32f2f;
   --ogrid-selection: #217346;
   --ogrid-bg-range: rgba(33, 115, 70, 0.12);
   --ogrid-bg-selected: #e6f0fb;
@@ -899,6 +926,7 @@
     --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
     --ogrid-pinned-shadow: rgba(0, 0, 0, 0.3);
     --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
+    --ogrid-formula-error-color: #ef5350;
     --ogrid-selection: #2ea043;
     --ogrid-bg-range: rgba(46, 160, 67, 0.15);
     --ogrid-bg-selected: #1a3a5c;
@@ -933,6 +961,7 @@
   --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
   --ogrid-pinned-shadow: rgba(0, 0, 0, 0.3);
   --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
+  --ogrid-formula-error-color: #ef5350;
   --ogrid-selection: #2ea043;
   --ogrid-bg-range: rgba(46, 160, 67, 0.15);
   --ogrid-bg-selected: #1a3a5c;

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 import './index.css';
-import { useColumnHeaderFilterState, getColumnHeaderFilterStateParams, DateFilterContent, renderFilterContent, areGridRowPropsEqual, usePaginationControls, createOGrid, useListVirtualizer, STOP_PROPAGATION, useDataGridTableOrchestration, useColumnMeta, getCellRenderDescriptor, buildInlineEditorProps, buildPopoverEditorProps, POPOVER_ANCHOR_STYLE, resolveCellDisplayContent, resolveCellStyle, getCellInteractionProps, CURSOR_CELL_STYLE, CellErrorBoundary, GRID_ROOT_STYLE, PREVENT_DEFAULT, getHeaderFilterConfig, MarchingAntsOverlay, NOOP, useColumnChooserState, BaseInlineCellEditor, BaseDropIndicator, BaseEmptyState, GridContextMenu as GridContextMenu$1, BaseColumnHeaderMenu, StatusBar as StatusBar$1, BaseLoadingOverlay } from '@alaarab/ogrid-react';
+import { useColumnHeaderFilterState, getColumnHeaderFilterStateParams, DateFilterContent, renderFilterContent, areGridRowPropsEqual, usePaginationControls, createOGrid, useListVirtualizer, STOP_PROPAGATION, useDataGridTableOrchestration, useColumnMeta, getCellRenderDescriptor, buildInlineEditorProps, buildPopoverEditorProps, POPOVER_ANCHOR_STYLE, resolveCellDisplayContent, resolveCellStyle, getCellInteractionProps, CURSOR_CELL_STYLE, CellErrorBoundary, GRID_ROOT_STYLE, PREVENT_DEFAULT, indexToColumnLetter, getHeaderFilterConfig, MarchingAntsOverlay, NOOP, useColumnChooserState, BaseInlineCellEditor, partitionColumnsForVirtualization, BaseDropIndicator, BaseEmptyState, GridContextMenu as GridContextMenu$1, BaseColumnHeaderMenu, StatusBar as StatusBar$1, BaseLoadingOverlay } 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 * as React from 'react';
+import * as React2 from 'react';
 import { useCallback, useRef, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { Popover, PopoverSurface, Button, Select, TableRow, TableCell, Checkbox, Table, TableHeader, TableHeaderCell, TableBody } from '@fluentui/react-components';
@@ -262,7 +262,7 @@ var PeopleFilterPopover = ({
   selectedUser && /* @__PURE__ */ jsx("div", { className: ColumnHeaderFilter_module_default.popoverActions, onClick: onPopoverClick, children: /* @__PURE__ */ jsx("button", { type: "button", className: ColumnHeaderFilter_module_default.clearButton, onClick: onClearUser, children: "Clear Filter" }) })
 ] });
 PeopleFilterPopover.displayName = "PeopleFilterPopover";
-var ColumnHeaderFilter = React.memo((props) => {
+var ColumnHeaderFilter = React2.memo((props) => {
   const {
     columnName,
     filterType,
@@ -286,8 +286,8 @@ var ColumnHeaderFilter = React.memo((props) => {
     handleInputClick,
     handleInputKeyDown
   } = handlers;
-  const filterBtnRef = React.useRef(null);
-  const fluentRenderers = React.useMemo(() => ({
+  const filterBtnRef = React2.useRef(null);
+  const fluentRenderers = React2.useMemo(() => ({
     renderMultiSelect: (p) => /* @__PURE__ */ jsx(
       MultiSelectFilterPopover,
       {
@@ -456,12 +456,15 @@ var DataGridTable_module_default = {
   "activeCellContent": "ogrid-fluent__DataGridTable-module__activeCellContent",
   "editingCellContent": "ogrid-fluent__DataGridTable-module__editingCellContent",
   "cellInRange": "ogrid-fluent__DataGridTable-module__cellInRange",
+  "inRange": "ogrid-fluent__DataGridTable-module__inRange",
   "cellCut": "ogrid-fluent__DataGridTable-module__cellCut",
   "fillHandle": "ogrid-fluent__DataGridTable-module__fillHandle",
   "selectionHeaderCellInner": "ogrid-fluent__DataGridTable-module__selectionHeaderCellInner",
   "selectionCellInner": "ogrid-fluent__DataGridTable-module__selectionCellInner",
   "rowNumberHeaderCellInner": "ogrid-fluent__DataGridTable-module__rowNumberHeaderCellInner",
   "rowNumberCellInner": "ogrid-fluent__DataGridTable-module__rowNumberCellInner",
+  "columnLetterRow": "ogrid-fluent__DataGridTable-module__columnLetterRow",
+  "columnLetterCell": "ogrid-fluent__DataGridTable-module__columnLetterCell",
   "statusBar": "ogrid-fluent__DataGridTable-module__statusBar",
   "statusBarItem": "ogrid-fluent__DataGridTable-module__statusBarItem",
   "statusBarLabel": "ogrid-fluent__DataGridTable-module__statusBarLabel",
@@ -536,6 +539,7 @@ function LoadingOverlay({ message }) {
 function DropIndicator({ dropIndicatorX, wrapperLeft }) {
   return /* @__PURE__ */ jsx(BaseDropIndicator, { dropIndicatorX, wrapperLeft, className: DataGridTable_module_default.dropIndicator });
 }
+var SPACER_TD_STYLE = { padding: 0, border: "none" };
 function GridRowInner(props) {
   const {
     item,
@@ -550,7 +554,10 @@ function GridRowInner(props) {
     lastMouseShiftRef,
     hasCheckboxCol,
     hasRowNumbersCol,
-    rowNumberOffset
+    rowNumberOffset,
+    leftSpacerWidth,
+    rightSpacerWidth,
+    globalColIndexMap
   } = props;
   return /* @__PURE__ */ jsxs(
     TableRow,
@@ -580,21 +587,112 @@ function GridRowInner(props) {
           }
         ) }),
         hasRowNumbersCol && /* @__PURE__ */ jsx(TableCell, { className: DataGridTable_module_default.rowNumberCellWrapper, children: /* @__PURE__ */ jsx("div", { className: DataGridTable_module_default.rowNumberCellInner, children: rowNumberOffset + rowIndex + 1 }) }),
-        visibleCols.map((col, colIdx) => /* @__PURE__ */ jsx(
-          TableCell,
-          {
-            "data-column-id": col.columnId,
-            className: columnMeta.cellClasses[col.columnId] || void 0,
-            style: columnMeta.cellStyles[col.columnId],
-            children: renderCellContent(item, col, rowIndex, colIdx)
-          },
-          col.columnId
-        ))
+        leftSpacerWidth != null && leftSpacerWidth > 0 && /* @__PURE__ */ jsx("td", { style: { ...SPACER_TD_STYLE, width: leftSpacerWidth, minWidth: leftSpacerWidth }, "aria-hidden": true }),
+        visibleCols.map((col, colIdx) => {
+          const globalIdx = globalColIndexMap ? globalColIndexMap[colIdx] : colIdx;
+          return /* @__PURE__ */ jsx(
+            TableCell,
+            {
+              "data-column-id": col.columnId,
+              className: columnMeta.cellClasses[col.columnId] || void 0,
+              style: columnMeta.cellStyles[col.columnId],
+              children: renderCellContent(item, col, rowIndex, globalIdx)
+            },
+            col.columnId
+          );
+        }),
+        rightSpacerWidth != null && rightSpacerWidth > 0 && /* @__PURE__ */ jsx("td", { style: { ...SPACER_TD_STYLE, width: rightSpacerWidth, minWidth: rightSpacerWidth }, "aria-hidden": true })
       ]
     }
   );
 }
-var GridRow = React.memo(GridRowInner, areGridRowPropsEqual);
+var GridRow = React2.memo(GridRowInner, areGridRowPropsEqual);
+function FluentTableBody(props) {
+  const {
+    virtualScrollEnabled,
+    visibleRange,
+    columnRange,
+    items,
+    getRowId,
+    selectedRowIds,
+    visibleCols,
+    columnMeta,
+    renderCellContent,
+    handleSingleRowClick,
+    handleRowCheckboxChange,
+    lastMouseShiftRef,
+    hasCheckboxCol,
+    hasRowNumbersCol,
+    rowNumberOffset,
+    selectionRange,
+    activeCell,
+    cutRange,
+    copyRange,
+    isDragging,
+    editingCell,
+    pinnedColumns
+  } = props;
+  const partition = React2.useMemo(() => {
+    if (!columnRange) return null;
+    const p = partitionColumnsForVirtualization(
+      visibleCols,
+      columnRange,
+      pinnedColumns
+    );
+    return p;
+  }, [visibleCols, columnRange, pinnedColumns]);
+  const { rowCols, globalColIndexMap, leftSpacerWidth, rightSpacerWidth } = React2.useMemo(() => {
+    if (!partition) {
+      return { rowCols: visibleCols, globalColIndexMap: void 0, leftSpacerWidth: void 0, rightSpacerWidth: void 0 };
+    }
+    const combined = [...partition.pinnedLeft, ...partition.virtualizedUnpinned, ...partition.pinnedRight];
+    const idxMap = combined.map((col) => visibleCols.indexOf(col));
+    return {
+      rowCols: combined,
+      globalColIndexMap: idxMap,
+      leftSpacerWidth: partition.leftSpacerWidth,
+      rightSpacerWidth: partition.rightSpacerWidth
+    };
+  }, [partition, visibleCols]);
+  const renderRow = (item, rowIndex) => {
+    const rowIdStr = getRowId(item);
+    return /* @__PURE__ */ jsx(
+      GridRow,
+      {
+        item,
+        rowIndex,
+        rowId: rowIdStr,
+        isSelected: selectedRowIds.has(rowIdStr),
+        visibleCols: rowCols,
+        columnMeta,
+        renderCellContent,
+        handleSingleRowClick,
+        handleRowCheckboxChange,
+        lastMouseShiftRef,
+        hasCheckboxCol,
+        hasRowNumbersCol,
+        rowNumberOffset,
+        selectionRange,
+        activeCell,
+        cutRange,
+        copyRange,
+        isDragging,
+        editingRowId: editingCell?.rowId ?? null,
+        leftSpacerWidth,
+        rightSpacerWidth,
+        globalColIndexMap
+      },
+      rowIdStr
+    );
+  };
+  return /* @__PURE__ */ jsxs(TableBody, { 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 {
@@ -611,6 +709,8 @@ function DataGridTableInner(props) {
     handleHeaderMouseDown,
     virtualScrollEnabled,
     visibleRange,
+    columnRange,
+    onHorizontalScroll,
     items,
     getRowId,
     emptyState,
@@ -628,6 +728,7 @@ function DataGridTableInner(props) {
     headerRows,
     allowOverflowX,
     fitToContent,
+    showColumnLetters,
     editCallbacks,
     interactionHandlers,
     cellDescriptorInputRef,
@@ -722,9 +823,9 @@ function DataGridTableInner(props) {
         ] });
       } else {
         const displayContent = 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: displayContent }) : displayContent;
-        const cellClassNames = `${DataGridTable_module_default.cellContent}${descriptor.isActive ? ` ${DataGridTable_module_default.activeCellContent}` : ""}${descriptor.isInRange && !descriptor.isActive ? ` ${DataGridTable_module_default.cellInRange}` : ""}${descriptor.isInCutRange ? ` ${DataGridTable_module_default.cellCut}` : ""}${descriptor.isInCopyRange ? ` ${DataGridTable_module_default.cellCopied}` : ""}`;
+        const cellClassNames = `${DataGridTable_module_default.cellContent}${descriptor.isActive ? ` ${DataGridTable_module_default.activeCellContent}` : ""}${descriptor.isActive && descriptor.isInRange ? ` ${DataGridTable_module_default.inRange}` : ""}${descriptor.isInRange && !descriptor.isActive ? ` ${DataGridTable_module_default.cellInRange}` : ""}${descriptor.isInCutRange ? ` ${DataGridTable_module_default.cellCut}` : ""}${descriptor.isInCopyRange ? ` ${DataGridTable_module_default.cellCopied}` : ""}`;
         const interactionProps = getCellInteractionProps(descriptor, col.columnId, interactionHandlers);
         content = /* @__PURE__ */ jsxs(
           "div",
@@ -759,6 +860,7 @@ function DataGridTableInner(props) {
         onMouseDown: (e) => {
           lastMouseShiftRef.current = e.shiftKey;
         },
+        onScroll: onHorizontalScroll ? (e) => onHorizontalScroll(e.target.scrollLeft) : void 0,
         className: `${DataGridTable_module_default.tableWrapper} ${rowSelection !== "none" ? DataGridTable_module_default.selectableGrid : ""} ${DataGridTable_module_default[`density-${density}`] || ""}`,
         role: "region",
         "aria-label": ariaLabel ?? (ariaLabelledBy ? void 0 : "Data grid"),
@@ -781,144 +883,126 @@ function DataGridTableInner(props) {
         },
         children: [
           /* @__PURE__ */ jsx("div", { className: DataGridTable_module_default.tableScrollContent, children: /* @__PURE__ */ jsx("div", { className: isLoading && items.length > 0 ? DataGridTable_module_default.loadingDimmed : void 0, children: /* @__PURE__ */ jsxs("div", { className: DataGridTable_module_default.tableWidthAnchor, ref: tableContainerRef, children: [
-            /* @__PURE__ */ jsxs(Table, { role: "grid", className: DataGridTable_module_default.dataTable, children: [
-              /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsxs(Table, { role: "grid", className: DataGridTable_module_default.dataTable, "data-virtual-scroll": virtualScrollEnabled ? "" : void 0, children: [
+              /* @__PURE__ */ jsxs(
                 TableHeader,
                 {
                   className: o.stickyHeader ? DataGridTable_module_default.stickyHeader : void 0,
-                  children: headerRows.map((row, rowIdx) => /* @__PURE__ */ jsxs(TableRow, { children: [
-                    rowIdx === headerRows.length - 1 && hasCheckboxCol && /* @__PURE__ */ jsx(TableHeaderCell, { className: DataGridTable_module_default.selectionHeaderCellWrapper, children: /* @__PURE__ */ jsx("div", { className: DataGridTable_module_default.selectionHeaderCellInner, children: /* @__PURE__ */ jsx(
-                      Checkbox,
-                      {
-                        checked: allSelected ? true : someSelected ? "mixed" : false,
-                        onChange: (_, data) => handleSelectAll(!!data.checked),
-                        "aria-label": "Select all rows"
-                      }
-                    ) }) }, "__selection__"),
-                    rowIdx === 0 && rowIdx < headerRows.length - 1 && hasCheckboxCol && /* @__PURE__ */ jsx("th", { rowSpan: headerRows.length - 1 }, "__selection_placeholder__"),
-                    rowIdx === headerRows.length - 1 && hasRowNumbersCol && /* @__PURE__ */ jsx(TableHeaderCell, { className: DataGridTable_module_default.rowNumberHeaderCellWrapper, children: /* @__PURE__ */ jsx("div", { className: DataGridTable_module_default.rowNumberHeaderCellInner, children: "#" }) }, "__row_number__"),
-                    rowIdx === 0 && rowIdx < headerRows.length - 1 && hasRowNumbersCol && /* @__PURE__ */ jsx("th", { rowSpan: headerRows.length - 1 }, "__row_number_placeholder__"),
-                    row.map((cell, cellIdx) => {
-                      if (cell.isGroup) {
-                        return /* @__PURE__ */ jsx("th", { colSpan: cell.colSpan, className: DataGridTable_module_default.groupHeaderCell, scope: "colgroup", children: cell.label }, cellIdx);
-                      }
-                      if (!cell.columnDef) return null;
-                      const col = cell.columnDef;
-                      const isSorted = props.sortBy === col.columnId;
-                      const ariaSort = isSorted ? props.sortDirection === "asc" ? "ascending" : "descending" : void 0;
-                      return /* @__PURE__ */ jsxs(
-                        TableHeaderCell,
+                  children: [
+                    showColumnLetters && /* @__PURE__ */ jsxs(TableRow, { children: [
+                      hasCheckboxCol && /* @__PURE__ */ jsx("th", { className: DataGridTable_module_default.columnLetterCell }),
+                      hasRowNumbersCol && /* @__PURE__ */ jsx("th", { className: DataGridTable_module_default.columnLetterCell }),
+                      visibleCols.map((col, colIdx) => /* @__PURE__ */ jsx(
+                        "th",
                         {
-                          scope: "col",
-                          "data-column-id": col.columnId,
-                          className: columnMeta.hdrClasses[col.columnId] || void 0,
-                          style: {
-                            ...columnMeta.hdrStyles[col.columnId],
-                            ...columnReorder ? { cursor: isReorderDragging ? "grabbing" : "grab" } : void 0
-                          },
-                          "aria-sort": ariaSort,
-                          onMouseDown: columnReorder ? (e) => handleHeaderMouseDown(col.columnId, e) : void 0,
-                          children: [
-                            /* @__PURE__ */ jsxs("div", { className: DataGridTable_module_default.headerCellContent, children: [
-                              /* @__PURE__ */ jsx(ColumnHeaderFilter, { ...getHeaderFilterConfig(col, headerFilterInput) }),
+                          className: `${DataGridTable_module_default.columnLetterCell}${columnMeta.hdrClasses[col.columnId] ? ` ${columnMeta.hdrClasses[col.columnId]}` : ""}`,
+                          style: columnMeta.hdrStyles[col.columnId],
+                          children: indexToColumnLetter(colIdx)
+                        },
+                        col.columnId
+                      ))
+                    ] }),
+                    headerRows.map((row, rowIdx) => /* @__PURE__ */ jsxs(TableRow, { children: [
+                      rowIdx === headerRows.length - 1 && hasCheckboxCol && /* @__PURE__ */ jsx(TableHeaderCell, { className: DataGridTable_module_default.selectionHeaderCellWrapper, children: /* @__PURE__ */ jsx("div", { className: DataGridTable_module_default.selectionHeaderCellInner, children: /* @__PURE__ */ jsx(
+                        Checkbox,
+                        {
+                          checked: allSelected ? true : someSelected ? "mixed" : false,
+                          onChange: (_, data) => handleSelectAll(!!data.checked),
+                          "aria-label": "Select all rows"
+                        }
+                      ) }) }, "__selection__"),
+                      rowIdx === 0 && rowIdx < headerRows.length - 1 && hasCheckboxCol && /* @__PURE__ */ jsx("th", { rowSpan: headerRows.length - 1 }, "__selection_placeholder__"),
+                      rowIdx === headerRows.length - 1 && hasRowNumbersCol && /* @__PURE__ */ jsx(TableHeaderCell, { className: DataGridTable_module_default.rowNumberHeaderCellWrapper, children: /* @__PURE__ */ jsx("div", { className: DataGridTable_module_default.rowNumberHeaderCellInner, children: "#" }) }, "__row_number__"),
+                      rowIdx === 0 && rowIdx < headerRows.length - 1 && hasRowNumbersCol && /* @__PURE__ */ jsx("th", { rowSpan: headerRows.length - 1 }, "__row_number_placeholder__"),
+                      row.map((cell, cellIdx) => {
+                        if (cell.isGroup) {
+                          return /* @__PURE__ */ jsx("th", { colSpan: cell.colSpan, className: DataGridTable_module_default.groupHeaderCell, scope: "colgroup", children: cell.label }, cellIdx);
+                        }
+                        if (!cell.columnDef) return null;
+                        const col = cell.columnDef;
+                        const isSorted = props.sortBy === col.columnId;
+                        const ariaSort = isSorted ? props.sortDirection === "asc" ? "ascending" : "descending" : void 0;
+                        return /* @__PURE__ */ jsxs(
+                          TableHeaderCell,
+                          {
+                            scope: "col",
+                            "data-column-id": col.columnId,
+                            className: columnMeta.hdrClasses[col.columnId] || void 0,
+                            style: {
+                              ...columnMeta.hdrStyles[col.columnId],
+                              ...columnReorder ? { cursor: isReorderDragging ? "grabbing" : "grab" } : void 0
+                            },
+                            "aria-sort": ariaSort,
+                            onMouseDown: columnReorder ? (e) => handleHeaderMouseDown(col.columnId, e) : void 0,
+                            children: [
+                              /* @__PURE__ */ jsxs("div", { className: DataGridTable_module_default.headerCellContent, children: [
+                                /* @__PURE__ */ jsx(ColumnHeaderFilter, { ...getHeaderFilterConfig(col, headerFilterInput) }),
+                                /* @__PURE__ */ jsx(
+                                  "button",
+                                  {
+                                    className: DataGridTable_module_default.headerMenuTrigger,
+                                    onClick: (e) => {
+                                      e.stopPropagation();
+                                      headerMenu.open(col.columnId, e.currentTarget);
+                                    },
+                                    "aria-label": "Column options",
+                                    title: "Column options",
+                                    children: "\u22EE"
+                                  }
+                                )
+                              ] }),
                               /* @__PURE__ */ jsx(
-                                "button",
+                                "div",
                                 {
-                                  className: DataGridTable_module_default.headerMenuTrigger,
-                                  onClick: (e) => {
-                                    e.stopPropagation();
-                                    headerMenu.open(col.columnId, e.currentTarget);
+                                  className: DataGridTable_module_default.resizeHandle,
+                                  role: "separator",
+                                  "aria-orientation": "vertical",
+                                  onMouseDown: (e) => {
+                                    setActiveCell(null);
+                                    interaction.setSelectionRange(null);
+                                    wrapperRef.current?.focus({ preventScroll: true });
+                                    handleResizeStart(e, col);
                                   },
-                                  "aria-label": "Column options",
-                                  title: "Column options",
-                                  children: "\u22EE"
+                                  onDoubleClick: (e) => handleResizeDoubleClick(e, col),
+                                  "aria-label": `Resize ${col.name}`
                                 }
                               )
-                            ] }),
-                            /* @__PURE__ */ jsx(
-                              "div",
-                              {
-                                className: DataGridTable_module_default.resizeHandle,
-                                role: "separator",
-                                "aria-orientation": "vertical",
-                                onMouseDown: (e) => {
-                                  setActiveCell(null);
-                                  interaction.setSelectionRange(null);
-                                  wrapperRef.current?.focus({ preventScroll: true });
-                                  handleResizeStart(e, col);
-                                },
-                                onDoubleClick: (e) => handleResizeDoubleClick(e, col),
-                                "aria-label": `Resize ${col.name}`
-                              }
-                            )
-                          ]
-                        },
-                        col.columnId
-                      );
-                    })
-                  ] }, rowIdx))
+                            ]
+                          },
+                          col.columnId
+                        );
+                      })
+                    ] }, rowIdx))
+                  ]
                 }
               ),
-              !showEmptyInGrid && /* @__PURE__ */ jsxs(TableBody, { 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),
-                      visibleCols,
-                      columnMeta,
-                      renderCellContent,
-                      handleSingleRowClick,
-                      handleRowCheckboxChange,
-                      lastMouseShiftRef,
-                      hasCheckboxCol,
-                      hasRowNumbersCol,
-                      rowNumberOffset,
-                      selectionRange,
-                      activeCell: interaction.activeCell,
-                      cutRange,
-                      copyRange,
-                      isDragging,
-                      editingRowId: editingCell?.rowId ?? null
-                    },
-                    rowIdStr
-                  );
-                }) : items.map((item, rowIndex) => {
-                  const rowIdStr = getRowId(item);
-                  return /* @__PURE__ */ jsx(
-                    GridRow,
-                    {
-                      item,
-                      rowIndex,
-                      rowId: rowIdStr,
-                      isSelected: selectedRowIds.has(rowIdStr),
-                      visibleCols,
-                      columnMeta,
-                      renderCellContent,
-                      handleSingleRowClick,
-                      handleRowCheckboxChange,
-                      lastMouseShiftRef,
-                      hasCheckboxCol,
-                      hasRowNumbersCol,
-                      rowNumberOffset,
-                      selectionRange,
-                      activeCell: interaction.activeCell,
-                      cutRange,
-                      copyRange,
-                      isDragging,
-                      editingRowId: editingCell?.rowId ?? null
-                    },
-                    rowIdStr
-                  );
-                }),
-                virtualScrollEnabled && visibleRange.offsetBottom > 0 && /* @__PURE__ */ jsx("tr", { style: { height: visibleRange.offsetBottom }, "aria-hidden": true })
-              ] })
+              !showEmptyInGrid && /* @__PURE__ */ jsx(
+                FluentTableBody,
+                {
+                  virtualScrollEnabled,
+                  visibleRange,
+                  columnRange,
+                  items,
+                  getRowId,
+                  selectedRowIds,
+                  visibleCols,
+                  columnMeta,
+                  renderCellContent,
+                  handleSingleRowClick,
+                  handleRowCheckboxChange,
+                  lastMouseShiftRef,
+                  hasCheckboxCol,
+                  hasRowNumbersCol,
+                  rowNumberOffset,
+                  selectionRange,
+                  activeCell: interaction.activeCell,
+                  cutRange,
+                  copyRange,
+                  isDragging,
+                  editingCell,
+                  pinnedColumns: pinning.pinnedColumns
+                }
+              )
             ] }),
             isReorderDragging && dropIndicatorX != null && /* @__PURE__ */ jsx(DropIndicator, { dropIndicatorX, wrapperLeft: wrapperRef.current?.getBoundingClientRect().left ?? 0 }),
             /* @__PURE__ */ jsx(
@@ -997,7 +1081,7 @@ function DataGridTableInner(props) {
     isLoading && /* @__PURE__ */ jsx(LoadingOverlay, { message: loadingMessage })
   ] });
 }
-var DataGridTable = React.memo(DataGridTableInner);
+var DataGridTable = React2.memo(DataGridTableInner);
 
 // src/ColumnChooser/ColumnChooser.module.scss
 var ColumnChooser_module_default = {
@@ -1099,7 +1183,7 @@ var PaginationControls_module_default = {
   "pageSizeLabel": "ogrid-fluent__PaginationControls-module__pageSizeLabel",
   "pageSizeSelect": "ogrid-fluent__PaginationControls-module__pageSizeSelect"
 };
-var PaginationControls = React.memo((props) => {
+var PaginationControls = React2.memo((props) => {
   const { currentPage, pageSize, totalCount, onPageChange, onPageSizeChange, pageSizeOptions, entityLabelPlural, className } = props;
   const { labelPlural, vm, handlePageSizeChange } = usePaginationControls({
     currentPage,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react-fluent",
-  "version": "2.1.15",
+  "version": "2.3.0",
   "description": "OGrid React Fluent implementation – DataGrid-powered data table with sorting, filtering, pagination, column chooser, and CSV export.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -41,7 +41,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-react": "2.1.15"
+    "@alaarab/ogrid-react": "2.3.0"
   },
   "peerDependencies": {
     "@fluentui/react-components": "^9.0.0",