@alaarab/ogrid-react-fluent 2.1.15 → 2.2.0

package/dist/esm/index.css

@@ -589,10 +589,18 @@
   white-space: nowrap;
   user-select: none;
   outline: none;
+  contain: content;
 }
 .ogrid-fluent__DataGridTable-module__cellContent:focus-visible {
   outline: none;
 }
+.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__activeCellContent {
   outline: 2px solid var(--ogrid-selection-color, #217346);
   outline-offset: -1px;

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, 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,
       {
@@ -536,6 +536,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 +551,10 @@ function GridRowInner(props) {
     lastMouseShiftRef,
     hasCheckboxCol,
     hasRowNumbersCol,
-    rowNumberOffset
+    rowNumberOffset,
+    leftSpacerWidth,
+    rightSpacerWidth,
+    globalColIndexMap
   } = props;
   return /* @__PURE__ */ jsxs(
     TableRow,
@@ -580,21 +584,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 +706,8 @@ function DataGridTableInner(props) {
     handleHeaderMouseDown,
     virtualScrollEnabled,
     visibleRange,
+    columnRange,
+    onHorizontalScroll,
     items,
     getRowId,
     emptyState,
@@ -759,6 +856,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,7 +879,7 @@ 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__ */ jsxs(Table, { role: "grid", className: DataGridTable_module_default.dataTable, "data-virtual-scroll": virtualScrollEnabled ? "" : void 0, children: [
               /* @__PURE__ */ jsx(
                 TableHeader,
                 {
@@ -859,66 +957,33 @@ function DataGridTableInner(props) {
                   ] }, 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 +1062,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 +1164,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.2.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.2.0"
   },
   "peerDependencies": {
     "@fluentui/react-components": "^9.0.0",