@alaarab/ogrid-react-material 2.1.15 → 2.2.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, 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; }
@@ -275,7 +277,7 @@ var materialRenderers = {
     }
   )
 };
-var ColumnHeaderFilter = React3.memo((props) => {
+var ColumnHeaderFilter = React4.memo((props) => {
   const {
     columnName,
     filterType,
@@ -487,8 +489,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;
@@ -738,6 +740,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 +755,10 @@ function GridRowInner(props) {
     hasCheckboxCol,
     hasRowNumbersCol,
     rowNumberOffset,
-    rowHeight
+    rowHeight,
+    leftSpacerWidth,
+    rightSpacerWidth,
+    globalColIndexMap
   } = props;
   return /* @__PURE__ */ jsxs(
     "tr",
@@ -795,22 +801,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 +930,8 @@ function DataGridTableInner(props) {
     handleHeaderMouseDown,
     virtualScrollEnabled,
     visibleRange,
+    columnRange,
+    onHorizontalScroll,
     items,
     getRowId,
     emptyState,
@@ -1004,6 +1109,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,6 +1124,7 @@ 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(
@@ -1156,66 +1263,34 @@ function DataGridTableInner(props) {
                       );
                     })
                   ] }, 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,
-                        {
-                          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 })
-                  ] })
+                  !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 +1371,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 +1512,7 @@ var ColumnChooser = (props) => {
     )
   ] });
 };
-var PaginationControls = React3.memo((props) => {
+var PaginationControls = React4.memo((props) => {
   const {
     currentPage,
     pageSize,
@@ -1593,10 +1668,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.2.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.2.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.0.0",