@alaarab/ogrid-vue 2.1.15 → 2.2.0

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import { injectGlobalStyles, Z_INDEX, getStatusBarParts, measureRange, flattenColumns, getMultiSelectFilterFields, deriveFilterOptionsFromData, processClientSideData, validateColumns, validateRowIds, computeRowSelectionState, buildCellIndex, UndoRedoStack, CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, computeAggregations, getDataGridStatusBarConfig, validateVirtualScrollConfig, computeVisibleRange, computeTotalHeight, buildHeaderRows, ROW_NUMBER_COLUMN_WIDTH, getHeaderFilterConfig, getCellRenderDescriptor, buildInlineEditorProps, buildPopoverEditorProps, resolveCellDisplayContent, resolveCellStyle, rangesEqual, normalizeSelectionRange, formatSelectionAsTsv, parseTsvClipboard, applyPastedValues, applyCutClear, measureColumnContentWidth, getPinStateForColumn, parseValue, applyFillValues, applyCellDeletion, computeTabNavigation, computeArrowNavigation, computeNextSortState, mergeFilter, applyRangeRowSelection, getScrollTopForRow, getCellValue, calculateDropTarget, reorderColumnArray, computeAutoScrollSpeed } from '@alaarab/ogrid-core';
+import { injectGlobalStyles, Z_INDEX, getStatusBarParts, measureRange, flattenColumns, getMultiSelectFilterFields, deriveFilterOptionsFromData, processClientSideData, processClientSideDataAsync, validateColumns, validateRowIds, computeRowSelectionState, buildCellIndex, UndoRedoStack, CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, computeAggregations, getDataGridStatusBarConfig, validateVirtualScrollConfig, computeVisibleRange, computeTotalHeight, computeVisibleColumnRange, partitionColumnsForVirtualization, buildHeaderRows, ROW_NUMBER_COLUMN_WIDTH, getHeaderFilterConfig, getCellRenderDescriptor, buildInlineEditorProps, buildPopoverEditorProps, resolveCellDisplayContent, resolveCellStyle, rangesEqual, normalizeSelectionRange, formatSelectionAsTsv, parseTsvClipboard, applyPastedValues, applyCutClear, measureColumnContentWidth, getPinStateForColumn, parseValue, applyFillValues, applyCellDeletion, computeTabNavigation, computeArrowNavigation, computeNextSortState, mergeFilter, applyRangeRowSelection, getScrollTopForRow, getCellValue, calculateDropTarget, reorderColumnArray, computeAutoScrollSpeed } from '@alaarab/ogrid-core';
 export * from '@alaarab/ogrid-core';
 export { buildInlineEditorProps, buildPopoverEditorProps, getCellRenderDescriptor, getHeaderFilterConfig, isInSelectionRange, normalizeSelectionRange, resolveCellDisplayContent, resolveCellStyle, toUserLike } from '@alaarab/ogrid-core';
 import { defineComponent, ref, computed, onMounted, watch, toValue, onUnmounted, h, shallowRef, triggerRef, nextTick, Teleport, isRef, isReadonly, unref, customRef } from 'vue';
@@ -331,7 +331,11 @@ function useOGrid(props) {
     return new Set(visible.length > 0 ? visible : columns.value.map((c) => c.columnId));
   })());
   const columnWidthOverrides = ref({});
-  const pinnedOverrides = ref({});
+  const initialPinned = {};
+  for (const col of flattenColumns(props.value.columns)) {
+    if (col.pinned) initialPinned[col.columnId] = col.pinned;
+  }
+  const pinnedOverrides = ref(initialPinned);
   const page = computed(() => controlledState.value.page ?? internalPage.value);
   const pageSize = computed(() => controlledState.value.pageSize ?? internalPageSize.value);
   const sort = computed(() => controlledState.value.sort ?? internalSort.value);
@@ -389,8 +393,9 @@ function useOGrid(props) {
     if (hasServerFilterOptions.value) return serverFilterOptions.value;
     return deriveFilterOptionsFromData(displayData.value, columns.value);
   });
+  const workerSortEnabled = computed(() => !!props.value.workerSort);
   const clientItemsAndTotal = computed(() => {
-    if (!isClientSide.value) return null;
+    if (!isClientSide.value || workerSortEnabled.value) return null;
     const rows = processClientSideData(
       displayData.value,
       columns.value,
@@ -403,6 +408,42 @@ function useOGrid(props) {
     const paged = rows.slice(start, start + pageSize.value);
     return { items: paged, totalCount: total };
   });
+  const asyncClientItems = ref(null);
+  let workerSortAbortId = 0;
+  watch(
+    [isClientSide, workerSortEnabled, displayData, columns, filters, () => sort.value.field, () => sort.value.direction, page, pageSize],
+    () => {
+      if (!isClientSide.value || !workerSortEnabled.value) return;
+      const data = displayData.value;
+      const cols = columns.value;
+      const f = filters.value;
+      const sf = sort.value.field;
+      const sd = sort.value.direction;
+      const p = page.value;
+      const ps = pageSize.value;
+      const abortId = ++workerSortAbortId;
+      processClientSideDataAsync(data, cols, f, sf, sd).then((rows) => {
+        if (abortId !== workerSortAbortId || isDestroyed) return;
+        const total = rows.length;
+        const start = (p - 1) * ps;
+        const paged = rows.slice(start, start + ps);
+        asyncClientItems.value = { items: paged, totalCount: total };
+      }).catch(() => {
+        if (abortId !== workerSortAbortId || isDestroyed) return;
+        const rows = processClientSideData(data, cols, f, sf, sd);
+        const total = rows.length;
+        const start = (p - 1) * ps;
+        const paged = rows.slice(start, start + ps);
+        asyncClientItems.value = { items: paged, totalCount: total };
+      });
+    },
+    { immediate: true }
+  );
+  const resolvedClientItems = computed(() => {
+    const syncResult = clientItemsAndTotal.value;
+    if (syncResult) return syncResult;
+    return asyncClientItems.value;
+  });
   const serverItems = ref([]);
   const serverTotalCount = ref(0);
   const loading = ref(false);
@@ -448,10 +489,10 @@ function useOGrid(props) {
     isDestroyed = true;
   });
   const displayItems = computed(
-    () => isClientSide.value && clientItemsAndTotal.value ? clientItemsAndTotal.value.items : serverItems.value
+    () => isClientSide.value && resolvedClientItems.value ? resolvedClientItems.value.items : serverItems.value
   );
   const displayTotalCount = computed(
-    () => isClientSide.value && clientItemsAndTotal.value ? clientItemsAndTotal.value.totalCount : serverTotalCount.value
+    () => isClientSide.value && resolvedClientItems.value ? resolvedClientItems.value.totalCount : serverTotalCount.value
   );
   let firstDataRendered = false;
   let rowIdsValidated = false;
@@ -3104,13 +3145,24 @@ function useColumnReorder(params) {
 }
 var DEFAULT_PASSTHROUGH_THRESHOLD = 100;
 function useVirtualScroll(params) {
-  const { totalRows, rowHeight, enabled, overscan = 5, threshold = DEFAULT_PASSTHROUGH_THRESHOLD } = params;
+  const {
+    totalRows,
+    rowHeight,
+    enabled,
+    overscan = 5,
+    threshold = DEFAULT_PASSTHROUGH_THRESHOLD,
+    columnsEnabled,
+    columnWidths,
+    columnOverscan = 2
+  } = params;
   onMounted(() => {
     validateVirtualScrollConfig({ enabled: enabled.value, rowHeight });
   });
   const containerRef = ref(null);
   const scrollTop = ref(0);
+  const scrollLeft = ref(0);
   const containerHeight = ref(0);
+  const containerWidth = ref(0);
   let rafId = 0;
   let resizeObserver;
   let prevObservedEl = null;
@@ -3131,6 +3183,17 @@ function useVirtualScroll(params) {
     if (!enabled.value) return 0;
     return computeTotalHeight(totalRows.value, rowHeight);
   });
+  const columnRange = computed(() => {
+    if (!columnsEnabled?.value) return null;
+    const widths = columnWidths?.value;
+    if (!widths || widths.length === 0) return null;
+    return computeVisibleColumnRange(
+      scrollLeft.value,
+      widths,
+      containerWidth.value,
+      columnOverscan
+    );
+  });
   const onScroll = () => {
     if (!rafId) {
       rafId = requestAnimationFrame(() => {
@@ -3138,6 +3201,7 @@ function useVirtualScroll(params) {
         const el = containerRef.value;
         if (el) {
           scrollTop.value = el.scrollTop;
+          scrollLeft.value = el.scrollLeft;
         }
       });
     }
@@ -3146,6 +3210,7 @@ function useVirtualScroll(params) {
     const el = containerRef.value;
     if (!el) return;
     containerHeight.value = el.clientHeight;
+    containerWidth.value = el.clientWidth;
   };
   watch(containerRef, (el) => {
     if (el === prevObservedEl) return;
@@ -3165,6 +3230,7 @@ function useVirtualScroll(params) {
       }
       measure();
       scrollTop.value = el.scrollTop;
+      scrollLeft.value = el.scrollLeft;
     }
   });
   onUnmounted(() => {
@@ -3183,7 +3249,7 @@ function useVirtualScroll(params) {
     if (!el) return;
     el.scrollTop = getScrollTopForRow(index, rowHeight, containerHeight.value, align);
   };
-  return { containerRef, visibleRange, totalHeight, scrollToRow };
+  return { containerRef, visibleRange, totalHeight, scrollToRow, columnRange, scrollLeft };
 }
 function useDataGridTableSetup(params) {
   const { props: propsRef } = params;
@@ -3207,11 +3273,45 @@ function useDataGridTableSetup(params) {
   const totalRowsRef = computed(() => propsRef.value.items.length);
   const rowHeight = propsRef.value.virtualScroll?.rowHeight ?? 36;
   const overscan = propsRef.value.virtualScroll?.overscan ?? 5;
+  const columnsVirtEnabled = computed(() => propsRef.value.virtualScroll?.columns === true);
+  const columnOverscan = propsRef.value.virtualScroll?.columnOverscan ?? 2;
+  const unpinnedColumnWidths = computed(() => {
+    const layout = state.layout.value;
+    const { visibleCols, columnSizingOverrides } = layout;
+    const pinnedCols = propsRef.value.pinnedColumns ?? {};
+    const widths = [];
+    for (const col of visibleCols) {
+      if (pinnedCols[col.columnId] || col.pinned) continue;
+      const override = columnSizingOverrides[col.columnId];
+      widths.push(override ? override.widthPx : col.defaultWidth ?? col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH);
+    }
+    return widths;
+  });
   const virtualScroll = useVirtualScroll({
     totalRows: totalRowsRef,
     rowHeight,
     enabled: virtualScrollEnabled,
-    overscan
+    overscan,
+    columnsEnabled: columnsVirtEnabled,
+    columnWidths: unpinnedColumnWidths,
+    columnOverscan
+  });
+  const columnPartition = computed(() => {
+    if (!columnsVirtEnabled.value) return null;
+    const layout = state.layout.value;
+    const cols = layout.visibleCols;
+    const range = virtualScroll.columnRange.value;
+    const pinnedCols = propsRef.value.pinnedColumns;
+    return partitionColumnsForVirtualization(cols, range, pinnedCols);
+  });
+  const globalColIndexMap = computed(() => {
+    const layout = state.layout.value;
+    const cols = layout.visibleCols;
+    const map = /* @__PURE__ */ new Map();
+    for (let i = 0; i < cols.length; i++) {
+      map.set(cols[i].columnId, i);
+    }
+    return map;
   });
   const columnSizingOverridesRef = computed(() => state.layout.value.columnSizingOverrides);
   const columnResize = useColumnResize({
@@ -3227,7 +3327,9 @@ function useDataGridTableSetup(params) {
     columnReorder,
     virtualScroll,
     virtualScrollEnabled,
-    columnResize
+    columnResize,
+    columnPartition,
+    globalColIndexMap
   };
 }
 function getCellInteractionProps(descriptor, columnId, handlers) {
@@ -3265,7 +3367,9 @@ function createDataGridTable(ui) {
         columnReorder: { isDragging: isReorderDragging, dropIndicatorX, handleHeaderMouseDown: handleReorderMouseDown },
         virtualScroll: { containerRef: vsContainerRef, visibleRange, totalHeight: _totalHeight, scrollToRow: _scrollToRow },
         virtualScrollEnabled,
-        columnResize: { handleResizeStart, handleResizeDoubleClick, getColumnWidth }
+        columnResize: { handleResizeStart, handleResizeDoubleClick, getColumnWidth },
+        columnPartition,
+        globalColIndexMap
       } = useDataGridTableSetup({ props: propsRef });
       const onWrapperMousedown = (e) => {
         lastMouseShift.value = e.shiftKey;
@@ -3457,11 +3561,25 @@ function createDataGridTable(ui) {
           ]);
         };
         const { cellStyles: colCellStyles, cellClasses: colCellClasses, hdrStyles: colHdrStyles, hdrClasses: colHdrClasses } = columnMetaCache.value;
-        const columnLayouts = visibleCols.map((col) => ({
+        const allColumnLayouts = visibleCols.map((col) => ({
           col,
           tdClasses: colCellClasses[col.columnId] || "ogrid-data-cell",
           tdDynamicStyle: colCellStyles[col.columnId] || {}
         }));
+        const partition = columnPartition.value;
+        let columnLayouts = allColumnLayouts;
+        let leftSpacerWidth = 0;
+        let rightSpacerWidth = 0;
+        if (partition) {
+          const visibleIds = /* @__PURE__ */ new Set();
+          for (const col of partition.pinnedLeft) visibleIds.add(col.columnId);
+          for (const col of partition.virtualizedUnpinned) visibleIds.add(col.columnId);
+          for (const col of partition.pinnedRight) visibleIds.add(col.columnId);
+          columnLayouts = allColumnLayouts.filter((cl) => visibleIds.has(cl.col.columnId));
+          leftSpacerWidth = partition.leftSpacerWidth;
+          rightSpacerWidth = partition.rightSpacerWidth;
+        }
+        const colIndexMap = globalColIndexMap.value;
         const getHeaderClassAndStyle = (col) => {
           const base = colHdrStyles[col.columnId] || {};
           return {
@@ -3522,7 +3640,8 @@ function createDataGridTable(ui) {
                     },
                     class: "ogrid-table",
                     role: "grid",
-                    style: { minWidth: `${minTableWidth}px` }
+                    style: { minWidth: `${minTableWidth}px` },
+                    ...virtualScrollEnabled.value ? { "data-virtual-scroll": "" } : {}
                   }, [
                     // Header
                     h(
@@ -3705,15 +3824,23 @@ function createDataGridTable(ui) {
                                 }
                               }, String(rowNumberOffset + rowIndex + 1))
                             ] : [],
+                            // Left spacer for column virtualization
+                            ...leftSpacerWidth > 0 ? [
+                              h("td", { key: "__col-spacer-left", style: { width: `${leftSpacerWidth}px`, minWidth: `${leftSpacerWidth}px`, maxWidth: `${leftSpacerWidth}px`, padding: "0" } })
+                            ] : [],
                             // Data cells
                             ...columnLayouts.map(
-                              (cl, colIdx) => h("td", {
+                              (cl) => h("td", {
                                 key: cl.col.columnId,
                                 "data-column-id": cl.col.columnId,
                                 class: cl.tdClasses,
                                 style: cl.tdDynamicStyle
-                              }, [renderCellContent(item, cl.col, rowIndex, colIdx)])
-                            )
+                              }, [renderCellContent(item, cl.col, rowIndex, colIndexMap.get(cl.col.columnId) ?? 0)])
+                            ),
+                            // Right spacer for column virtualization
+                            ...rightSpacerWidth > 0 ? [
+                              h("td", { key: "__col-spacer-right", style: { width: `${rightSpacerWidth}px`, minWidth: `${rightSpacerWidth}px`, maxWidth: `${rightSpacerWidth}px`, padding: "0" } })
+                            ] : []
                           ]));
                         }
                         if (vsEnabled && vr.offsetBottom > 0) {

package/dist/esm/styles/ogrid-layout.css

@@ -189,8 +189,16 @@
   position: relative;
   padding: 0;
   height: 1px;
+  contain: content;
 }
 
+/* Pinned columns need contain: none because contain breaks position: sticky */
+.ogrid-data-cell--pinned-left,
+.ogrid-data-cell--pinned-right { contain: none; }
+
+/* content-visibility: auto on rows for non-virtualized grids */
+.ogrid-table:not([data-virtual-scroll]) tbody tr { content-visibility: auto; }
+
 .ogrid-data-cell--pinned-left {
   position: sticky;
   z-index: var(--ogrid-z-pinned, 6);

package/dist/types/composables/useDataGridTableSetup.d.ts

@@ -1,5 +1,5 @@
 import { type Ref } from 'vue';
-import type { IOGridDataGridProps } from '../types';
+import type { IOGridDataGridProps, IColumnDef } from '../types';
 import { type UseDataGridStateResult } from './useDataGridState';
 import { type UseColumnResizeResult } from './useColumnResize';
 import { type UseColumnReorderResult } from './useColumnReorder';
@@ -27,6 +27,16 @@ export interface UseDataGridTableSetupResult<T> {
     virtualScrollEnabled: Ref<boolean>;
     /** Column resize handlers (handleResizeStart, getColumnWidth). */
     columnResize: UseColumnResizeResult<T>;
+    /** Column virtualization partition (or null when column virtualization is off). */
+    columnPartition: Ref<{
+        pinnedLeft: IColumnDef<T>[];
+        virtualizedUnpinned: IColumnDef<T>[];
+        pinnedRight: IColumnDef<T>[];
+        leftSpacerWidth: number;
+        rightSpacerWidth: number;
+    } | null>;
+    /** Map from columnId to its global index in visibleCols. */
+    globalColIndexMap: Ref<Map<string, number>>;
 }
 /**
  * Shared setup composable for Vue DataGridTable components.

package/dist/types/composables/useVirtualScroll.d.ts

@@ -1,5 +1,5 @@
 import { type Ref } from 'vue';
-import type { IVisibleRange } from '@alaarab/ogrid-core';
+import type { IVisibleRange, IVisibleColumnRange } from '@alaarab/ogrid-core';
 export interface UseVirtualScrollParams {
     totalRows: Ref<number>;
     rowHeight: number;
@@ -10,12 +10,22 @@ export interface UseVirtualScrollParams {
      * When totalRows < threshold, all rows render without virtualization.
      */
     threshold?: number;
+    /** Enable column virtualization. */
+    columnsEnabled?: Ref<boolean>;
+    /** Column widths array for unpinned columns. */
+    columnWidths?: Ref<number[]>;
+    /** Number of extra columns to render outside the visible area. Default: 2. */
+    columnOverscan?: number;
 }
 export interface UseVirtualScrollResult {
     containerRef: Ref<HTMLElement | null>;
     visibleRange: Ref<IVisibleRange>;
     totalHeight: Ref<number>;
     scrollToRow: (index: number, align?: 'start' | 'center' | 'end') => void;
+    /** Visible column range for horizontal virtualization, or null when column virtualization is off. */
+    columnRange: Ref<IVisibleColumnRange | null>;
+    /** Reactive scrollLeft value. */
+    scrollLeft: Ref<number>;
 }
 /**
  * Manages virtual scrolling with RAF-throttled scroll handling and ResizeObserver

package/dist/types/types/dataGridTypes.d.ts

@@ -81,6 +81,8 @@ interface IOGridBaseProps<T> {
     columnReorder?: boolean;
     /** Virtual scrolling configuration. Set `enabled: true` with a fixed `rowHeight` to virtualize large datasets. */
     virtualScroll?: IVirtualScrollConfig;
+    /** Offload sort/filter to a Web Worker for large datasets. Falls back to sync when sort column has a custom compare. */
+    workerSort?: boolean;
     /** Fixed row height in pixels. Overrides default row height (36px). */
     rowHeight?: number;
     /** Cell spacing/density preset. Controls cell padding throughout the grid. Default: 'normal'. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-vue",
-  "version": "2.1.15",
+  "version": "2.2.0",
   "description": "OGrid Vue – Vue 3 composables, headless components, and utilities for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -36,7 +36,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.1.15"
+    "@alaarab/ogrid-core": "2.2.0"
   },
   "peerDependencies": {
     "vue": "^3.3.0"