@ornery/ui-grid-react 0.1.4 → 0.1.5

package/dist/index.js

@@ -20,8 +20,16 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  DEFAULT_GRID_LABELS: () => import_ui_grid7.DEFAULT_GRID_LABELS,
+  DEFAULT_GRID_LABELS: () => import_ui_grid9.DEFAULT_GRID_LABELS,
   UiGrid: () => UiGrid,
+  buildGridTemplateColumns: () => buildGridTemplateColumns,
+  computeViewportHeightPx: () => computeViewportHeightPx,
+  computeViewportRows: () => computeViewportRows,
+  enableReactUiGridWasmEngine: () => enableReactUiGridWasmEngine,
+  formatPaginationSummary: () => formatPaginationSummary,
+  orderVisibleColumns: () => orderVisibleColumns,
+  registerReactUiGridWasmEngineFromModule: () => registerReactUiGridWasmEngineFromModule,
+  resolveBenchmarkIterations: () => resolveBenchmarkIterations,
   useGridState: () => useGridState,
   useVirtualScroll: () => useVirtualScroll
 });
@@ -29,7 +37,33 @@ module.exports = __toCommonJS(index_exports);
 
 // src/useGridState.ts
 var import_react = require("react");
-var import_ui_grid3 = require("@ornery/ui-grid");
+
+// src/gridStateMath.ts
+var import_ui_grid = require("@ornery/ui-grid");
+function orderVisibleColumns(columns, order) {
+  return [...columns].filter((column) => column.visible !== false).sort((left, right) => order.indexOf(left.name) - order.indexOf(right.name));
+}
+function buildGridTemplateColumns(columns) {
+  return columns.map((column) => (0, import_ui_grid.gridColumnWidth)(column)).join(" ");
+}
+function resolveBenchmarkIterations(iterations, configuredIterations) {
+  return Math.max(1, iterations ?? configuredIterations ?? 25);
+}
+function formatPaginationSummary(totalItems, firstRowIndex, lastRowIndex) {
+  if (totalItems === 0) {
+    return "0-0 of 0";
+  }
+  return `${firstRowIndex + 1}-${lastRowIndex + 1} of ${totalItems}`;
+}
+function computeViewportHeightPx(viewportHeight, autoViewportHeight) {
+  return `${viewportHeight ?? autoViewportHeight ?? 560}px`;
+}
+function computeViewportRows(viewportHeight, rowHeight) {
+  return Math.max(1, Math.ceil((viewportHeight ?? 560) / (rowHeight ?? 44)));
+}
+
+// src/useGridState.ts
+var import_ui_grid4 = require("@ornery/ui-grid");
 
 // ../ui-grid/src/lib/grid/grid.core.pagination.ts
 function seekGridPage(page, totalPages) {
@@ -209,12 +243,15 @@ function normalizeGridSavedState(state) {
     );
   }
   if (state.filters && typeof state.filters === "object") {
-    normalized.filters = Object.entries(state.filters).reduce((accumulator, [key, value]) => {
-      if (typeof key === "string" && isSafeStateKey(key) && typeof value === "string") {
-        accumulator[key] = value;
-      }
-      return accumulator;
-    }, {});
+    normalized.filters = Object.entries(state.filters).reduce(
+      (accumulator, [key, value]) => {
+        if (typeof key === "string" && isSafeStateKey(key) && typeof value === "string") {
+          accumulator[key] = value;
+        }
+        return accumulator;
+      },
+      {}
+    );
   }
   if (state.sort && typeof state.sort === "object") {
     normalized.sort = {
@@ -241,6 +278,17 @@ function normalizeGridSavedState(state) {
   if (state.treeView && typeof state.treeView === "object") {
     normalized.treeView = normalizeBooleanMap(state.treeView);
   }
+  if (state.pinning && typeof state.pinning === "object") {
+    normalized.pinning = Object.entries(state.pinning).reduce(
+      (acc, [key, value]) => {
+        if (typeof key === "string" && isSafeStateKey(key) && (value === "left" || value === "right")) {
+          acc[key] = value;
+        }
+        return acc;
+      },
+      {}
+    );
+  }
   return normalized;
 }
 function normalizeBooleanMap(value) {
@@ -255,6 +303,69 @@ function isSafeStateKey(value) {
   return value !== "__proto__" && value !== "constructor" && value !== "prototype";
 }
 
+// ../ui-grid/src/lib/grid/grid.core.pinning.ts
+function isPinningEnabled(options) {
+  return options.enablePinning === true;
+}
+function isColumnPinnable(options, column) {
+  return isPinningEnabled(options) && column.enablePinning !== false;
+}
+function pinColumnState(current, columnName, direction) {
+  const next = { ...current };
+  if (direction === "none") {
+    delete next[columnName];
+  } else {
+    next[columnName] = direction;
+  }
+  return next;
+}
+function buildInitialPinnedState(columns) {
+  const state = {};
+  for (const col of columns) {
+    if (col.pinnedLeft) state[col.name] = "left";
+    else if (col.pinnedRight) state[col.name] = "right";
+  }
+  return state;
+}
+function computePinnedOffset(visibleColumns, pinnedColumns, column) {
+  const direction = pinnedColumns[column.name];
+  if (!direction) return null;
+  function resolveColumnWidthForOffset(column2) {
+    const w = column2.width;
+    if (!w) return "11rem";
+    if (w.includes("fr") || w.includes("minmax")) return "11rem";
+    return w;
+  }
+  if (direction === "left") {
+    const offsetParts = [];
+    for (const col of visibleColumns) {
+      if (col.name === column.name) break;
+      if (pinnedColumns[col.name] === "left") {
+        offsetParts.push(resolveColumnWidthForOffset(col));
+      }
+    }
+    return {
+      side: "left",
+      offset: offsetParts.length > 0 ? `calc(${offsetParts.join(" + ")})` : "0px"
+    };
+  }
+  if (direction === "right") {
+    const offsetParts = [];
+    const reversed = [...visibleColumns].reverse();
+    for (const col of reversed) {
+      if (col.name === column.name) break;
+      if (pinnedColumns[col.name] === "right") {
+        offsetParts.push(resolveColumnWidthForOffset(col));
+      }
+    }
+    return {
+      side: "right",
+      offset: offsetParts.length > 0 ? `calc(${offsetParts.join(" + ")})` : "0px"
+    };
+  }
+  return null;
+}
+
 // ../ui-grid/src/lib/grid/ui-grid.events.ts
 function raiseGridRenderingComplete(gridApi) {
   gridApi.core.raise.renderingComplete(gridApi);
@@ -321,6 +432,9 @@ function raiseGridAfterCellEdit(gridApi, rowEntity, column, newValue, oldValue)
 function raiseGridCancelCellEdit(gridApi, rowEntity, column) {
   gridApi.edit.raise.cancelCellEdit(rowEntity, column);
 }
+function raiseGridColumnPinned(gridApi, columnName, direction) {
+  gridApi.pinning.raise.columnPinned(columnName, direction);
+}
 
 // ../ui-grid/src/lib/grid/ui-grid.state.ts
 function moveArrayItem(items, fromIndex, toIndex) {
@@ -362,6 +476,9 @@ function createGridRestoreMutationPlan(state) {
   if (normalizedState.treeView) {
     plan.treeView = normalizedState.treeView;
   }
+  if (normalizedState.pinning) {
+    plan.pinning = normalizedState.pinning;
+  }
   return plan;
 }
 
@@ -402,6 +519,12 @@ function moveGridColumnCommand(gridApi, canMoveColumns, updateColumnOrder, fromI
     return next;
   });
 }
+function pinGridColumnCommand(gridApi, isPinningEnabled2, setPinnedColumns, getCurrentPinnedColumns, columnName, direction) {
+  if (!isPinningEnabled2) return;
+  const next = pinColumnState(getCurrentPinnedColumns(), columnName, direction);
+  setPinnedColumns(next);
+  raiseGridColumnPinned(gridApi, columnName, direction);
+}
 function seekGridPaginationCommand(gridApi, setCurrentPage, getTotalPages, getEffectivePageSize, page) {
   const nextPage = seekGridPage(page, getTotalPages());
   setCurrentPage(nextPage);
@@ -435,7 +558,11 @@ function restoreGridStateCommand(gridApi, state, access) {
   if (restorePlan.pagination) {
     access.setCurrentPage(restorePlan.pagination.currentPage);
     access.setPageSize(restorePlan.pagination.pageSize);
-    raiseGridPaginationChanged(gridApi, restorePlan.pagination.currentPage, access.getEffectivePageSize());
+    raiseGridPaginationChanged(
+      gridApi,
+      restorePlan.pagination.currentPage,
+      access.getEffectivePageSize()
+    );
   }
   if (restorePlan.expandable) {
     access.setExpandedRows(restorePlan.expandable);
@@ -443,6 +570,12 @@ function restoreGridStateCommand(gridApi, state, access) {
   if (restorePlan.treeView) {
     access.setExpandedTreeRows(restorePlan.treeView);
   }
+  if (restorePlan.pinning && typeof access.setPinnedColumns === "function") {
+    access.setPinnedColumns(restorePlan.pinning);
+    for (const [col, dir] of Object.entries(restorePlan.pinning)) {
+      raiseGridColumnPinned(gridApi, col, dir);
+    }
+  }
 }
 function toggleGridRowExpansionCommand(gridApi, canExpandRows, currentExpandedRows, rowId, setExpandedRows, findRowById) {
   if (!canExpandRows) {
@@ -464,7 +597,10 @@ function collapseAllGridRowsCommand(setExpandedRows) {
   setExpandedRows({});
 }
 function toggleGridTreeRowCommand(gridApi, currentExpandedTreeRows, rowId, setExpandedTreeRows, findRowById) {
-  const { expanded, nextExpandedTreeRows } = toggleGridTreeRowExpanded(currentExpandedTreeRows, rowId);
+  const { expanded, nextExpandedTreeRows } = toggleGridTreeRowExpanded(
+    currentExpandedTreeRows,
+    rowId
+  );
   setExpandedTreeRows(nextExpandedTreeRows);
   const gridRow = findRowById(rowId);
   if (gridRow) {
@@ -599,13 +735,45 @@ function downloadGridCsvFile(csv, filename) {
 }
 
 // src/useGridState.ts
+function escapeCssSelectorValue(value) {
+  const nativeEscape = globalThis.CSS?.escape;
+  if (typeof nativeEscape === "function") {
+    return nativeEscape(value);
+  }
+  let output = "";
+  for (let index = 0; index < value.length; index += 1) {
+    const codePoint = value.charCodeAt(index);
+    const character = value.charAt(index);
+    if (codePoint === 0) {
+      output += "\uFFFD";
+      continue;
+    }
+    const isControlCharacter = codePoint >= 1 && codePoint <= 31 || codePoint === 127;
+    const startsWithDigit = index === 0 && codePoint >= 48 && codePoint <= 57;
+    const secondCharDigitAfterHyphen = index === 1 && codePoint >= 48 && codePoint <= 57 && value.charCodeAt(0) === 45;
+    if (isControlCharacter || startsWithDigit || secondCharDigitAfterHyphen) {
+      output += `\\${codePoint.toString(16)} `;
+      continue;
+    }
+    if (index === 0 && value.length === 1 && codePoint === 45) {
+      output += `\\${character}`;
+      continue;
+    }
+    const isSafeCharacter = codePoint >= 128 || codePoint === 45 || codePoint === 95 || codePoint >= 48 && codePoint <= 57 || codePoint >= 65 && codePoint <= 90 || codePoint >= 97 && codePoint <= 122;
+    output += isSafeCharacter ? character : `\\${character}`;
+  }
+  return output;
+}
 function useGridState(options, onRegisterApi) {
   const [activeFilters, setActiveFilters] = (0, import_react.useState)({});
   const [groupByColumns, setGroupByColumns] = (0, import_react.useState)([]);
   const [collapsedGroups, setCollapsedGroups] = (0, import_react.useState)({});
   const [columnOrder, setColumnOrder] = (0, import_react.useState)([]);
   const [hiddenRowReasons, setHiddenRowReasons] = (0, import_react.useState)({});
-  const [sortState, setSortState] = (0, import_react.useState)({ columnName: null, direction: import_ui_grid3.SORT_DIRECTIONS.none });
+  const [sortState, setSortState] = (0, import_react.useState)({
+    columnName: null,
+    direction: import_ui_grid4.SORT_DIRECTIONS.none
+  });
   const [focusedCell, setFocusedCell] = (0, import_react.useState)(null);
   const [editingCell, setEditingCell] = (0, import_react.useState)(null);
   const [editingValue, setEditingValue] = (0, import_react.useState)("");
@@ -621,6 +789,7 @@ function useGridState(options, onRegisterApi) {
     previousVisibleRows: 0
   });
   const [autoViewportHeight, setAutoViewportHeight] = (0, import_react.useState)(null);
+  const [pinnedColumns, setPinnedColumns] = (0, import_react.useState)({});
   const gridContainerRef = (0, import_react.useRef)(null);
   const initializedGridIdRef = (0, import_react.useRef)(null);
   const lastCanvasHeightRef = (0, import_react.useRef)(0);
@@ -652,6 +821,8 @@ function useGridState(options, onRegisterApi) {
   expandedRowsRef.current = expandedRows;
   const expandedTreeRowsRef = (0, import_react.useRef)(expandedTreeRows);
   expandedTreeRowsRef.current = expandedTreeRows;
+  const pinnedColumnsRef = (0, import_react.useRef)(pinnedColumns);
+  pinnedColumnsRef.current = pinnedColumns;
   const currentPageRef = (0, import_react.useRef)(currentPage);
   currentPageRef.current = currentPage;
   const pageSizeRef = (0, import_react.useRef)(pageSize);
@@ -662,13 +833,12 @@ function useGridState(options, onRegisterApi) {
   optionsRef.current = options;
   const rowSize = options.rowHeight ?? 44;
   const visibleColumns = (0, import_react.useMemo)(() => {
-    const order = columnOrder;
-    return [...options.columnDefs].filter((column) => column.visible !== false).sort((left, right) => order.indexOf(left.name) - order.indexOf(right.name));
+    return orderVisibleColumns(options.columnDefs, columnOrder);
   }, [options.columnDefs, columnOrder]);
   const visibleColumnsRef = (0, import_react.useRef)(visibleColumns);
   visibleColumnsRef.current = visibleColumns;
   const pipeline = (0, import_react.useMemo)(() => {
-    return (0, import_ui_grid3.buildGridPipeline)({
+    return import_ui_grid4.defaultGridEngine.buildPipeline({
       options,
       columns: visibleColumns,
       activeFilters,
@@ -682,70 +852,116 @@ function useGridState(options, onRegisterApi) {
       pageSize,
       rowSize
     });
-  }, [options, visibleColumns, activeFilters, sortState, groupByColumns, collapsedGroups, hiddenRowReasons, expandedRows, expandedTreeRows, currentPage, pageSize, rowSize]);
+  }, [
+    options,
+    visibleColumns,
+    activeFilters,
+    sortState,
+    groupByColumns,
+    collapsedGroups,
+    hiddenRowReasons,
+    expandedRows,
+    expandedTreeRows,
+    currentPage,
+    pageSize,
+    rowSize
+  ]);
   const pipelineRef = (0, import_react.useRef)(pipeline);
   pipelineRef.current = pipeline;
-  const labels = (0, import_react.useMemo)(() => (0, import_ui_grid3.resolveGridLabels)(options.labels), [options.labels]);
+  const labels = (0, import_react.useMemo)(() => (0, import_ui_grid4.resolveGridLabels)(options.labels), [options.labels]);
   const gridTemplateColumns = (0, import_react.useMemo)(
-    () => visibleColumns.map((column) => (0, import_ui_grid3.gridColumnWidth)(column)).join(" "),
+    () => buildGridTemplateColumns(visibleColumns),
     [visibleColumns]
   );
+  const isPinningEnabledFn = (0, import_react.useCallback)(() => {
+    return isPinningEnabled(optionsRef.current);
+  }, []);
+  const isColumnPinnableFn = (0, import_react.useCallback)((column) => {
+    return isColumnPinnable(optionsRef.current, column);
+  }, []);
+  const isPinnedFn = (0, import_react.useCallback)((column) => {
+    return pinnedColumnsRef.current[column.name] !== void 0;
+  }, []);
+  const pinnedOffsetFn = (0, import_react.useCallback)((column) => {
+    return computePinnedOffset(visibleColumnsRef.current, pinnedColumnsRef.current, column);
+  }, []);
   const resolveRowId = (0, import_react.useCallback)((row) => {
-    return (0, import_ui_grid3.resolveGridRowId)(optionsRef.current, row);
+    return (0, import_ui_grid4.resolveGridRowId)(optionsRef.current, row);
   }, []);
   const buildRowsFromData = (0, import_react.useCallback)((data) => {
-    return (0, import_ui_grid3.buildGridRows)(
+    return (0, import_ui_grid4.buildGridRows)(
       { ...optionsRef.current, data },
       optionsRef.current.rowHeight ?? 44,
       hiddenRowReasonsRef.current,
       expandedRowsRef.current
     );
   }, []);
-  const findRowById = (0, import_react.useCallback)((rowId) => {
-    return (0, import_ui_grid3.findGridRowById)(buildRowsFromData(optionsRef.current.data), rowId);
-  }, [buildRowsFromData]);
+  const findRowById = (0, import_react.useCallback)(
+    (rowId) => {
+      return (0, import_ui_grid4.findGridRowById)(buildRowsFromData(optionsRef.current.data), rowId);
+    },
+    [buildRowsFromData]
+  );
   const canExpandRowsFn = (0, import_react.useCallback)(() => {
-    return import_ui_grid3.FEATURE_EXPANDABLE && (0, import_ui_grid3.canGridExpandRows)(optionsRef.current);
+    return import_ui_grid4.FEATURE_EXPANDABLE && (0, import_ui_grid4.canGridExpandRows)(optionsRef.current);
   }, []);
   const effectivePageSizeFn = (0, import_react.useCallback)((totalItems) => {
-    return (0, import_ui_grid3.getEffectivePageSize)(optionsRef.current, pageSizeRef.current, totalItems);
+    return (0, import_ui_grid4.getEffectivePageSize)(optionsRef.current, pageSizeRef.current, totalItems);
   }, []);
   const getCurrentPageValueFn = (0, import_react.useCallback)((totalItems) => {
     const ti = totalItems ?? pipelineRef.current.totalItems;
-    return (0, import_ui_grid3.getCurrentPageValue)(optionsRef.current, currentPageRef.current, ti, pageSizeRef.current);
+    return (0, import_ui_grid4.getCurrentPageValue)(
+      optionsRef.current,
+      currentPageRef.current,
+      ti,
+      pageSizeRef.current
+    );
   }, []);
   const getTotalPagesValueFn = (0, import_react.useCallback)((totalItems) => {
     const ti = totalItems ?? pipelineRef.current.totalItems;
-    return (0, import_ui_grid3.getTotalPagesValue)(optionsRef.current, ti, pageSizeRef.current);
+    return (0, import_ui_grid4.getTotalPagesValue)(optionsRef.current, ti, pageSizeRef.current);
   }, []);
   const getFirstRowIndexValueFn = (0, import_react.useCallback)((totalItems) => {
     const ti = totalItems ?? pipelineRef.current.totalItems;
-    return (0, import_ui_grid3.getFirstRowIndexValue)(optionsRef.current, currentPageRef.current, ti, pageSizeRef.current);
+    return (0, import_ui_grid4.getFirstRowIndexValue)(
+      optionsRef.current,
+      currentPageRef.current,
+      ti,
+      pageSizeRef.current
+    );
   }, []);
   const getLastRowIndexValueFn = (0, import_react.useCallback)((totalItems) => {
     const ti = totalItems ?? pipelineRef.current.totalItems;
-    return (0, import_ui_grid3.getLastRowIndexValue)(optionsRef.current, currentPageRef.current, ti, pageSizeRef.current);
-  }, []);
-  const isCellEditable = (0, import_react.useCallback)((row, column, triggerEvent) => {
-    if (!import_ui_grid3.FEATURE_CELL_EDIT) return false;
-    const editable = column.enableCellEdit ?? optionsRef.current.enableCellEdit ?? false;
-    if (!editable) return false;
-    const condition = column.cellEditableCondition ?? optionsRef.current.cellEditableCondition ?? true;
-    if (typeof condition === "boolean") return condition;
-    const context = {
-      row: row.entity,
-      column,
-      rowIndex: row.index,
-      triggerEvent
-    };
-    return condition(context);
+    return (0, import_ui_grid4.getLastRowIndexValue)(
+      optionsRef.current,
+      currentPageRef.current,
+      ti,
+      pageSizeRef.current
+    );
   }, []);
+  const isCellEditable = (0, import_react.useCallback)(
+    (row, column, triggerEvent) => {
+      if (!import_ui_grid4.FEATURE_CELL_EDIT) return false;
+      const editable = column.enableCellEdit ?? optionsRef.current.enableCellEdit ?? false;
+      if (!editable) return false;
+      const condition = column.cellEditableCondition ?? optionsRef.current.cellEditableCondition ?? true;
+      if (typeof condition === "boolean") return condition;
+      const context = {
+        row: row.entity,
+        column,
+        rowIndex: row.index,
+        triggerEvent
+      };
+      return condition(context);
+    },
+    []
+  );
   const shouldEditOnFocusFn = (0, import_react.useCallback)((column) => {
     return column.enableCellEditOnFocus ?? optionsRef.current.enableCellEditOnFocus ?? false;
   }, []);
   const focusRenderedCell = (0, import_react.useCallback)((position) => {
     const focusToken = ++renderedCellFocusTokenRef.current;
-    const selector = `.body-cell[data-row-id="${position.rowId}"][data-col-name="${position.columnName}"]`;
+    const selector = `.body-cell[data-row-id="${escapeCssSelectorValue(position.rowId)}"][data-col-name="${escapeCssSelectorValue(position.columnName)}"]`;
     const doFocus = (retry = true) => {
       if (focusToken !== renderedCellFocusTokenRef.current) return;
       const container = gridContainerRef.current;
@@ -766,11 +982,12 @@ function useGridState(options, onRegisterApi) {
     if (focusToken !== editorFocusTokenRef.current) return;
     const ec = editingCellRef.current;
     if (!ec) return;
-    const selector = `.cell-editor[data-row-id="${ec.rowId}"][data-col-name="${ec.columnName}"]`;
+    const selector = `.cell-editor[data-row-id="${escapeCssSelectorValue(ec.rowId)}"][data-col-name="${escapeCssSelectorValue(ec.columnName)}"]`;
     const doFocus = (retry = true) => {
       if (focusToken !== editorFocusTokenRef.current) return;
       const currentEc = editingCellRef.current;
-      if (!currentEc || currentEc.rowId !== ec.rowId || currentEc.columnName !== ec.columnName) return;
+      if (!currentEc || currentEc.rowId !== ec.rowId || currentEc.columnName !== ec.columnName)
+        return;
       const container = gridContainerRef.current;
       if (!container) return;
       const input = container.querySelector(selector);
@@ -789,12 +1006,12 @@ function useGridState(options, onRegisterApi) {
       refresh: () => setActiveFilters((current) => ({ ...current })),
       getVisibleRows: () => pipelineRef.current.visibleRows,
       setRowInvisible: (row, reason = "user") => {
-        const rowId = (0, import_ui_grid3.resolveGridRowId)(optionsRef.current, row);
-        setHiddenRowReasons((current) => (0, import_ui_grid3.addGridRowInvisibleReason)(current, rowId, reason));
+        const rowId = (0, import_ui_grid4.resolveGridRowId)(optionsRef.current, row);
+        setHiddenRowReasons((current) => (0, import_ui_grid4.addGridRowInvisibleReason)(current, rowId, reason));
       },
       clearRowInvisible: (row, reason = "user") => {
-        const rowId = (0, import_ui_grid3.resolveGridRowId)(optionsRef.current, row);
-        setHiddenRowReasons((current) => (0, import_ui_grid3.clearGridRowInvisibleReason)(current, rowId, reason));
+        const rowId = (0, import_ui_grid4.resolveGridRowId)(optionsRef.current, row);
+        setHiddenRowReasons((current) => (0, import_ui_grid4.clearGridRowInvisibleReason)(current, rowId, reason));
       },
       setFilter: (columnName, value) => {
         setActiveFilters((current) => {
@@ -816,14 +1033,14 @@ function useGridState(options, onRegisterApi) {
       moveColumn: (fromIndex, toIndex) => {
         moveGridColumnCommand(
           gridApiRef.current,
-          import_ui_grid3.FEATURE_COLUMN_MOVING && optionsRef.current.enableColumnMoving === true,
+          import_ui_grid4.FEATURE_COLUMN_MOVING && optionsRef.current.enableColumnMoving === true,
           (updater) => setColumnOrder((current) => updater(current)),
           fromIndex,
           toIndex
         );
       },
       toggleGrouping: (columnName) => {
-        if (!(import_ui_grid3.FEATURE_GROUPING && (0, import_ui_grid3.isGridGroupingEnabled)(optionsRef.current))) return;
+        if (!(import_ui_grid4.FEATURE_GROUPING && (0, import_ui_grid4.isGridGroupingEnabled)(optionsRef.current))) return;
         const current = groupByColumnsRef.current;
         const next = current.includes(columnName) ? current.filter((n) => n !== columnName) : [...current, columnName];
         groupByColumnsRef.current = next;
@@ -831,7 +1048,11 @@ function useGridState(options, onRegisterApi) {
         gridApiRef.current.core.raise.groupingChanged(next);
       },
       clearGrouping: () => {
-        clearGridGroupingCommand(gridApiRef.current, (grouping) => setGroupByColumns(grouping), false);
+        clearGridGroupingCommand(
+          gridApiRef.current,
+          (grouping) => setGroupByColumns(grouping),
+          false
+        );
       },
       benchmark: (iterations) => {
         return runBenchmarkFn(iterations);
@@ -867,7 +1088,7 @@ function useGridState(options, onRegisterApi) {
       treeExpandRow: (row) => expandTreeRowByRefFn(row),
       treeCollapseRow: (row) => collapseTreeRowByRefFn(row),
       treeGetRowChildren: (row) => {
-        const rowId = (0, import_ui_grid3.resolveGridRowId)(optionsRef.current, row);
+        const rowId = (0, import_ui_grid4.resolveGridRowId)(optionsRef.current, row);
         return buildRowsFromData(optionsRef.current.data).filter((r) => r.parentId === rowId);
       },
       treeGetState: () => expandedTreeRowsRef.current,
@@ -917,7 +1138,7 @@ function useGridState(options, onRegisterApi) {
         );
       },
       saveState: () => {
-        return (0, import_ui_grid3.buildGridSavedState)({
+        return (0, import_ui_grid4.buildGridSavedState)({
           columnOrder: columnOrderRef.current,
           activeFilters: activeFiltersRef.current,
           sortState: sortStateRef.current,
@@ -926,7 +1147,8 @@ function useGridState(options, onRegisterApi) {
           pageSize: pageSizeRef.current,
           totalItems: pipelineRef.current.totalItems,
           expandedRows: expandedRowsRef.current,
-          expandedTreeRows: expandedTreeRowsRef.current
+          expandedTreeRows: expandedTreeRowsRef.current,
+          pinnedColumns: pinnedColumnsRef.current
         });
       },
       restoreState: (state) => {
@@ -939,32 +1161,58 @@ function useGridState(options, onRegisterApi) {
           setPageSize: (ps) => setPageSize(ps),
           setExpandedRows: (e) => setExpandedRows(e),
           setExpandedTreeRows: (e) => setExpandedTreeRows(e),
+          setPinnedColumns: (p) => setPinnedColumns(p),
           getEffectivePageSize: () => effectivePageSizeFn(pipelineRef.current.totalItems)
         });
       },
       beginCellEdit: (row, columnName, triggerEvent) => {
-        const rowId = (0, import_ui_grid3.resolveGridRowId)(optionsRef.current, row);
-        const gridRow = (0, import_ui_grid3.findGridRowById)(buildRowsFromData(optionsRef.current.data), rowId);
+        const rowId = (0, import_ui_grid4.resolveGridRowId)(optionsRef.current, row);
+        const gridRow = (0, import_ui_grid4.findGridRowById)(buildRowsFromData(optionsRef.current.data), rowId);
         const column = visibleColumnsRef.current.find((c) => c.name === columnName);
         if (!gridRow || !column || !isCellEditable(gridRow, column, triggerEvent)) return;
         startCellEditFn(gridRow, column, triggerEvent);
       },
       endCellEdit: () => commitCellEditFn(),
       cancelCellEdit: () => cancelCellEditFn(),
-      getEditingCell: () => editingCellRef.current
+      getEditingCell: () => editingCellRef.current,
+      pinColumn: (columnName, direction) => {
+        pinGridColumnCommand(
+          gridApiRef.current,
+          isPinningEnabledFn(),
+          (v) => setPinnedColumns(v),
+          () => pinnedColumnsRef.current,
+          columnName,
+          direction
+        );
+      }
     };
-    gridApiRef.current = (0, import_ui_grid3.createGridApi)(bindings);
+    gridApiRef.current = (0, import_ui_grid4.createGridApi)(bindings);
   }
   const gridApi = gridApiRef.current;
-  const seekPageFn = (0, import_react.useCallback)((page) => {
-    seekGridPaginationCommand(
+  const seekPageFn = (0, import_react.useCallback)(
+    (page) => {
+      seekGridPaginationCommand(
+        gridApiRef.current,
+        (nextPage) => setCurrentPage(nextPage),
+        () => getTotalPagesValueFn(),
+        () => effectivePageSizeFn(pipelineRef.current.totalItems),
+        page
+      );
+    },
+    [getTotalPagesValueFn, effectivePageSizeFn]
+  );
+  const togglePinFn = (0, import_react.useCallback)((column) => {
+    const current = pinnedColumnsRef.current[column.name];
+    const next = current === "left" ? "right" : current === "right" ? "none" : "left";
+    pinGridColumnCommand(
       gridApiRef.current,
-      (nextPage) => setCurrentPage(nextPage),
-      () => getTotalPagesValueFn(),
-      () => effectivePageSizeFn(pipelineRef.current.totalItems),
-      page
+      isPinningEnabledFn(),
+      (v) => setPinnedColumns(v),
+      () => pinnedColumnsRef.current,
+      column.name,
+      next
     );
-  }, [getTotalPagesValueFn, effectivePageSizeFn]);
+  }, []);
   const setPaginationPageSizeFn = (0, import_react.useCallback)((ps) => {
     setGridPaginationPageSizeCommand(
       gridApiRef.current,
@@ -973,19 +1221,22 @@ function useGridState(options, onRegisterApi) {
       ps
     );
   }, []);
-  const toggleRowExpansionByRefFn = (0, import_react.useCallback)((row) => {
-    const rowId = (0, import_ui_grid3.resolveGridRowId)(optionsRef.current, row);
-    toggleGridRowExpansionCommand(
-      gridApiRef.current,
-      import_ui_grid3.FEATURE_EXPANDABLE && (0, import_ui_grid3.canGridExpandRows)(optionsRef.current),
-      expandedRowsRef.current,
-      rowId,
-      (e) => setExpandedRows(e),
-      (resolvedRowId) => (0, import_ui_grid3.findGridRowById)(buildRowsFromData(optionsRef.current.data), resolvedRowId)
-    );
-  }, [buildRowsFromData]);
+  const toggleRowExpansionByRefFn = (0, import_react.useCallback)(
+    (row) => {
+      const rowId = (0, import_ui_grid4.resolveGridRowId)(optionsRef.current, row);
+      toggleGridRowExpansionCommand(
+        gridApiRef.current,
+        import_ui_grid4.FEATURE_EXPANDABLE && (0, import_ui_grid4.canGridExpandRows)(optionsRef.current),
+        expandedRowsRef.current,
+        rowId,
+        (e) => setExpandedRows(e),
+        (resolvedRowId) => (0, import_ui_grid4.findGridRowById)(buildRowsFromData(optionsRef.current.data), resolvedRowId)
+      );
+    },
+    [buildRowsFromData]
+  );
   const expandAllRowsFn = (0, import_react.useCallback)(() => {
-    if (!(0, import_ui_grid3.canGridExpandRows)(optionsRef.current)) return;
+    if (!(0, import_ui_grid4.canGridExpandRows)(optionsRef.current)) return;
     expandAllGridRowsCommand(
       (data) => buildRowsFromData(data),
       optionsRef.current.data,
@@ -993,121 +1244,145 @@ function useGridState(options, onRegisterApi) {
     );
   }, [buildRowsFromData]);
   const toggleAllRowsFn = (0, import_react.useCallback)(() => {
-    const allExpanded = (0, import_ui_grid3.areAllGridRowsExpanded)(buildRowsFromData(optionsRef.current.data), expandedRowsRef.current);
+    const allExpanded = (0, import_ui_grid4.areAllGridRowsExpanded)(
+      buildRowsFromData(optionsRef.current.data),
+      expandedRowsRef.current
+    );
     if (allExpanded) {
       collapseAllGridRowsCommand((e) => setExpandedRows(e));
     } else {
       expandAllRowsFn();
     }
   }, [buildRowsFromData, expandAllRowsFn]);
-  const toggleTreeRowByRefFn = (0, import_react.useCallback)((row) => {
-    const rowId = (0, import_ui_grid3.resolveGridRowId)(optionsRef.current, row);
-    toggleGridTreeRowCommand(
-      gridApiRef.current,
-      expandedTreeRowsRef.current,
-      rowId,
-      (e) => setExpandedTreeRows(e),
-      (resolvedRowId) => (0, import_ui_grid3.findGridRowById)(buildRowsFromData(optionsRef.current.data), resolvedRowId)
-    );
-  }, [buildRowsFromData]);
-  const expandTreeRowByRefFn = (0, import_react.useCallback)((row) => {
-    const rowId = (0, import_ui_grid3.resolveGridRowId)(optionsRef.current, row);
-    setGridTreeRowExpandedCommand(
-      gridApiRef.current,
-      expandedTreeRowsRef.current,
-      rowId,
-      true,
-      (e) => setExpandedTreeRows(e),
-      (resolvedRowId) => (0, import_ui_grid3.findGridRowById)(buildRowsFromData(optionsRef.current.data), resolvedRowId)
-    );
-  }, [buildRowsFromData]);
-  const collapseTreeRowByRefFn = (0, import_react.useCallback)((row) => {
-    const rowId = (0, import_ui_grid3.resolveGridRowId)(optionsRef.current, row);
-    setGridTreeRowExpandedCommand(
-      gridApiRef.current,
-      expandedTreeRowsRef.current,
-      rowId,
-      false,
-      (e) => setExpandedTreeRows(e),
-      (resolvedRowId) => (0, import_ui_grid3.findGridRowById)(buildRowsFromData(optionsRef.current.data), resolvedRowId)
-    );
-  }, [buildRowsFromData]);
-  const startCellEditFn = (0, import_react.useCallback)((row, column, triggerEvent, initialValue) => {
-    const currentValue = (0, import_ui_grid3.getCellValue)(row.entity, column);
-    const focusToken = ++editorFocusTokenRef.current;
-    const ec = beginGridCellEditCommand(
-      gridApiRef.current,
-      {
-        setFocusedCell: (fc) => setFocusedCell(fc),
-        setEditingCell: (ec2) => setEditingCell(ec2),
-        setEditingValue: (ev) => setEditingValue(ev)
-      },
-      row,
-      column,
-      currentValue,
-      triggerEvent,
-      initialValue
-    );
-    if (ec) {
-      queueMicrotask(() => focusEditorInput(focusToken));
-    }
-  }, [focusEditorInput]);
-  const commitCellEditFn = (0, import_react.useCallback)((direction, restoreFocus = true) => {
-    const result = commitGridCellEditCommand(gridApiRef.current, {
-      getEditingCell: () => editingCellRef.current,
-      getEditingValue: () => editingValueRef.current,
-      setEditingCell: (ec) => setEditingCell(ec),
-      setEditingValue: (ev) => setEditingValue(ev),
-      findRowById: (rowId) => (0, import_ui_grid3.findGridRowById)(buildRowsFromData(optionsRef.current.data), rowId),
-      findColumnByName: (columnName) => visibleColumnsRef.current.find((c) => c.name === columnName),
-      parseEditedValue: (column, value, oldValue) => (0, import_ui_grid3.parseGridEditedValue)(column, value, oldValue),
-      setCellValue: (rowEntity, column, value) => {
-        const fieldPath = column.editModelField ?? column.field ?? column.name;
-        (0, import_ui_grid3.setPathValue)(rowEntity, fieldPath, value);
+  const toggleTreeRowByRefFn = (0, import_react.useCallback)(
+    (row) => {
+      const rowId = (0, import_ui_grid4.resolveGridRowId)(optionsRef.current, row);
+      toggleGridTreeRowCommand(
+        gridApiRef.current,
+        expandedTreeRowsRef.current,
+        rowId,
+        (e) => setExpandedTreeRows(e),
+        (resolvedRowId) => (0, import_ui_grid4.findGridRowById)(buildRowsFromData(optionsRef.current.data), resolvedRowId)
+      );
+    },
+    [buildRowsFromData]
+  );
+  const expandTreeRowByRefFn = (0, import_react.useCallback)(
+    (row) => {
+      const rowId = (0, import_ui_grid4.resolveGridRowId)(optionsRef.current, row);
+      setGridTreeRowExpandedCommand(
+        gridApiRef.current,
+        expandedTreeRowsRef.current,
+        rowId,
+        true,
+        (e) => setExpandedTreeRows(e),
+        (resolvedRowId) => (0, import_ui_grid4.findGridRowById)(buildRowsFromData(optionsRef.current.data), resolvedRowId)
+      );
+    },
+    [buildRowsFromData]
+  );
+  const collapseTreeRowByRefFn = (0, import_react.useCallback)(
+    (row) => {
+      const rowId = (0, import_ui_grid4.resolveGridRowId)(optionsRef.current, row);
+      setGridTreeRowExpandedCommand(
+        gridApiRef.current,
+        expandedTreeRowsRef.current,
+        rowId,
+        false,
+        (e) => setExpandedTreeRows(e),
+        (resolvedRowId) => (0, import_ui_grid4.findGridRowById)(buildRowsFromData(optionsRef.current.data), resolvedRowId)
+      );
+    },
+    [buildRowsFromData]
+  );
+  const startCellEditFn = (0, import_react.useCallback)(
+    (row, column, triggerEvent, initialValue) => {
+      const currentValue = (0, import_ui_grid4.getCellValue)(row.entity, column);
+      const focusToken = ++editorFocusTokenRef.current;
+      const ec = beginGridCellEditCommand(
+        gridApiRef.current,
+        {
+          setFocusedCell: (fc) => setFocusedCell(fc),
+          setEditingCell: (ec2) => setEditingCell(ec2),
+          setEditingValue: (ev) => setEditingValue(ev)
+        },
+        row,
+        column,
+        currentValue,
+        triggerEvent,
+        initialValue
+      );
+      if (ec) {
+        queueMicrotask(() => focusEditorInput(focusToken));
       }
-    });
-    if (!result.committed || !result.row || !result.column || !result.focusTarget) return;
-    editorFocusTokenRef.current += 1;
-    if (direction) {
-      const moved = moveFocusFn(result.row, result.column, direction);
-      if (!moved) focusRenderedCell(result.focusTarget);
-    } else if (restoreFocus) {
-      focusRenderedCell(result.focusTarget);
-    }
-  }, [buildRowsFromData, focusRenderedCell]);
+    },
+    [focusEditorInput]
+  );
+  const commitCellEditFn = (0, import_react.useCallback)(
+    (direction, restoreFocus = true) => {
+      const result = commitGridCellEditCommand(gridApiRef.current, {
+        getEditingCell: () => editingCellRef.current,
+        getEditingValue: () => editingValueRef.current,
+        setEditingCell: (ec) => setEditingCell(ec),
+        setEditingValue: (ev) => setEditingValue(ev),
+        findRowById: (rowId) => (0, import_ui_grid4.findGridRowById)(buildRowsFromData(optionsRef.current.data), rowId),
+        findColumnByName: (columnName) => visibleColumnsRef.current.find((c) => c.name === columnName),
+        parseEditedValue: (column, value, oldValue) => (0, import_ui_grid4.parseGridEditedValue)(column, value, oldValue),
+        setCellValue: (rowEntity, column, value) => {
+          const fieldPath = column.editModelField ?? column.field ?? column.name;
+          (0, import_ui_grid4.setPathValue)(rowEntity, fieldPath, value);
+        }
+      });
+      if (!result.committed || !result.row || !result.column || !result.focusTarget) return;
+      editorFocusTokenRef.current += 1;
+      if (direction) {
+        const moved = moveFocusFn(result.row, result.column, direction);
+        if (!moved) focusRenderedCell(result.focusTarget);
+      } else if (restoreFocus) {
+        focusRenderedCell(result.focusTarget);
+      }
+    },
+    [buildRowsFromData, focusRenderedCell]
+  );
   const cancelCellEditFn = (0, import_react.useCallback)(() => {
     const hadEditingCell = editingCellRef.current !== null;
     const result = cancelGridCellEditCommand(gridApiRef.current, {
       getEditingCell: () => editingCellRef.current,
       setEditingCell: (ec) => setEditingCell(ec),
       setEditingValue: (ev) => setEditingValue(ev),
-      findRowById: (rowId) => (0, import_ui_grid3.findGridRowById)(buildRowsFromData(optionsRef.current.data), rowId),
+      findRowById: (rowId) => (0, import_ui_grid4.findGridRowById)(buildRowsFromData(optionsRef.current.data), rowId),
       findColumnByName: (columnName) => visibleColumnsRef.current.find((c) => c.name === columnName)
     });
     if (!hadEditingCell) return;
     editorFocusTokenRef.current += 1;
     if (result.focusTarget) focusRenderedCell(result.focusTarget);
   }, [buildRowsFromData, focusRenderedCell]);
-  const moveFocusFn = (0, import_react.useCallback)((row, column, direction, triggerEvent) => {
-    const nextCell = (0, import_ui_grid3.findNextGridCell)({
-      rows: pipelineRef.current.visibleRows,
-      columns: visibleColumnsRef.current,
-      rowId: row.id,
-      columnName: column.name,
-      direction
-    });
-    if (!nextCell) return false;
-    setFocusedCell({ rowId: nextCell.row.id, columnName: nextCell.column.name });
-    focusRenderedCell({ rowId: nextCell.row.id, columnName: nextCell.column.name });
-    if (shouldEditOnFocusFn(nextCell.column) && isCellEditable(nextCell.row, nextCell.column, triggerEvent)) {
-      startCellEditFn(nextCell.row, nextCell.column, triggerEvent);
-    }
-    return true;
-  }, [focusRenderedCell, isCellEditable, shouldEditOnFocusFn, startCellEditFn]);
+  const moveFocusFn = (0, import_react.useCallback)(
+    (row, column, direction, triggerEvent) => {
+      const nextCell = (0, import_ui_grid4.findNextGridCell)({
+        rows: pipelineRef.current.visibleRows,
+        columns: visibleColumnsRef.current,
+        rowId: row.id,
+        columnName: column.name,
+        direction
+      });
+      if (!nextCell) return false;
+      setFocusedCell({ rowId: nextCell.row.id, columnName: nextCell.column.name });
+      focusRenderedCell({ rowId: nextCell.row.id, columnName: nextCell.column.name });
+      if (shouldEditOnFocusFn(nextCell.column) && isCellEditable(nextCell.row, nextCell.column, triggerEvent)) {
+        startCellEditFn(nextCell.row, nextCell.column, triggerEvent);
+      }
+      return true;
+    },
+    [focusRenderedCell, isCellEditable, shouldEditOnFocusFn, startCellEditFn]
+  );
   const runBenchmarkFn = (0, import_react.useCallback)((iterations) => {
-    const safeIterations = Math.max(1, iterations ?? optionsRef.current.benchmark?.iterations ?? 25);
+    const safeIterations = resolveBenchmarkIterations(
+      iterations,
+      optionsRef.current.benchmark?.iterations
+    );
     const startedAt = performance.now();
-    let lastResult = (0, import_ui_grid3.buildGridPipeline)({
+    let lastResult = import_ui_grid4.defaultGridEngine.buildPipeline({
       options: optionsRef.current,
       columns: visibleColumnsRef.current,
       activeFilters: activeFiltersRef.current,
@@ -1122,7 +1397,7 @@ function useGridState(options, onRegisterApi) {
       rowSize: optionsRef.current.rowHeight ?? 44
     });
     for (let i = 1; i < safeIterations; i++) {
-      lastResult = (0, import_ui_grid3.buildGridPipeline)({
+      lastResult = import_ui_grid4.defaultGridEngine.buildPipeline({
         options: optionsRef.current,
         columns: visibleColumnsRef.current,
         activeFilters: activeFiltersRef.current,
@@ -1150,10 +1425,10 @@ function useGridState(options, onRegisterApi) {
     return result;
   }, []);
   const exportCsvFn = (0, import_react.useCallback)(() => {
-    if (!import_ui_grid3.FEATURE_CSV_EXPORT) return;
+    if (!import_ui_grid4.FEATURE_CSV_EXPORT) return;
     const columns = visibleColumnsRef.current;
-    const csv = (0, import_ui_grid3.exportCsvRows)(columns, pipelineRef.current.visibleRows);
-    downloadGridCsvFile(csv, `${(0, import_ui_grid3.sanitizeDownloadFilename)(optionsRef.current.id)}.csv`);
+    const csv = (0, import_ui_grid4.exportCsvRows)(columns, pipelineRef.current.visibleRows);
+    downloadGridCsvFile(csv, `${(0, import_ui_grid4.sanitizeDownloadFilename)(optionsRef.current.id)}.csv`);
   }, []);
   (0, import_react.useEffect)(() => {
     if (initializedGridIdRef.current === options.id) return;
@@ -1168,8 +1443,9 @@ function useGridState(options, onRegisterApi) {
     setExpandedTreeRows({});
     setColumnOrder(options.columnDefs.map((column) => column.name));
     setGroupByColumns(options.grouping?.groupBy ?? []);
+    setPinnedColumns(buildInitialPinnedState(options.columnDefs));
     setCurrentPage(options.paginationCurrentPage ?? 1);
-    setPageSize((0, import_ui_grid3.getEffectivePageSize)(options, 0, options.data.length));
+    setPageSize((0, import_ui_grid4.getEffectivePageSize)(options, 0, options.data.length));
     setInfiniteScrollState({
       scrollUp: options.infiniteScrollUp === true,
       scrollDown: options.infiniteScrollDown !== false,
@@ -1181,7 +1457,7 @@ function useGridState(options, onRegisterApi) {
     );
     setSortState({
       columnName: initialSort?.name ?? null,
-      direction: initialSort?.sort?.direction ?? import_ui_grid3.SORT_DIRECTIONS.none
+      direction: initialSort?.sort?.direction ?? import_ui_grid4.SORT_DIRECTIONS.none
     });
     onRegisterApi?.(gridApi);
     raiseGridRenderingComplete(gridApi);
@@ -1196,12 +1472,19 @@ function useGridState(options, onRegisterApi) {
     }
   }, [pipeline, gridApi, rowSize]);
   (0, import_react.useEffect)(() => {
-    if (!import_ui_grid3.FEATURE_AUTO_RESIZE || !options.enableAutoResize) return;
+    if (!import_ui_grid4.FEATURE_AUTO_RESIZE || !options.enableAutoResize) return;
     const container = gridContainerRef.current;
     if (!container) return;
     const observer = observeGridHostSize(container, ({ height: nextHeight, width: nextWidth }) => {
-      if (nextHeight === lastGridHeightRef.current && nextWidth === lastGridWidthRef.current) return;
-      raiseGridDimensionChanged(gridApi, lastGridHeightRef.current, lastGridWidthRef.current, nextHeight, nextWidth);
+      if (nextHeight === lastGridHeightRef.current && nextWidth === lastGridWidthRef.current)
+        return;
+      raiseGridDimensionChanged(
+        gridApi,
+        lastGridHeightRef.current,
+        lastGridWidthRef.current,
+        nextHeight,
+        nextWidth
+      );
       lastGridHeightRef.current = nextHeight;
       lastGridWidthRef.current = nextWidth;
       if (!options.viewportHeight && nextHeight > 0) {
@@ -1219,111 +1502,152 @@ function useGridState(options, onRegisterApi) {
   const paginationCurrentPage = getCurrentPageValueFn();
   const paginationTotalPages = getTotalPagesValueFn();
   const paginationSelectedPageSize = effectivePageSizeFn(pipeline.totalItems);
-  const viewportHeightPx = `${options.viewportHeight ?? autoViewportHeight ?? 560}px`;
-  const headerLabelFn = (0, import_react.useCallback)((column) => (0, import_ui_grid3.headerLabel)(column), []);
-  const isGroupItemFn = (0, import_react.useCallback)((item) => item.kind === "group", []);
-  const isExpandableItemFn = (0, import_react.useCallback)((item) => item.kind === "expandable", []);
+  const viewportHeightPx = computeViewportHeightPx(options.viewportHeight, autoViewportHeight);
+  const headerLabelFn = (0, import_react.useCallback)((column) => (0, import_ui_grid4.headerLabel)(column), []);
+  const isGroupItemFn = (0, import_react.useCallback)(
+    (item) => item.kind === "group",
+    []
+  );
+  const isExpandableItemFn = (0, import_react.useCallback)(
+    (item) => item.kind === "expandable",
+    []
+  );
   const isRowItemFn = (0, import_react.useCallback)((item) => item.kind === "row", []);
-  const isOddStripedRowFn = (0, import_react.useCallback)((item) => item.kind === "row" && item.visibleIndex % 2 === 0, []);
+  const isOddStripedRowFn = (0, import_react.useCallback)(
+    (item) => item.kind === "row" && item.visibleIndex % 2 === 0,
+    []
+  );
   const sortDirectionFn = (0, import_react.useCallback)((column) => {
-    return sortStateRef.current.columnName === column.name ? sortStateRef.current.direction : import_ui_grid3.SORT_DIRECTIONS.none;
+    return sortStateRef.current.columnName === column.name ? sortStateRef.current.direction : import_ui_grid4.SORT_DIRECTIONS.none;
   }, []);
-  const sortButtonLabelFn = (0, import_react.useCallback)((column) => {
-    return (0, import_ui_grid3.gridSortButtonLabel)(sortDirectionFn(column), labels);
-  }, [labels, sortDirectionFn]);
-  const sortAriaSortFn = (0, import_react.useCallback)((column) => {
-    return (0, import_ui_grid3.gridSortAriaSort)(sortDirectionFn(column));
-  }, [sortDirectionFn]);
-  const groupingButtonLabelFn = (0, import_react.useCallback)((column) => {
-    return (0, import_ui_grid3.gridGroupingButtonLabel)((0, import_ui_grid3.isGridColumnGrouped)(groupByColumnsRef.current, column), labels);
-  }, [labels]);
+  const sortButtonLabelFn = (0, import_react.useCallback)(
+    (column) => {
+      return (0, import_ui_grid4.gridSortButtonLabel)(sortDirectionFn(column), labels);
+    },
+    [labels, sortDirectionFn]
+  );
+  const sortAriaSortFn = (0, import_react.useCallback)(
+    (column) => {
+      return (0, import_ui_grid4.gridSortAriaSort)(sortDirectionFn(column));
+    },
+    [sortDirectionFn]
+  );
+  const groupingButtonLabelFn = (0, import_react.useCallback)(
+    (column) => {
+      return (0, import_ui_grid4.gridGroupingButtonLabel)(
+        (0, import_ui_grid4.isGridColumnGrouped)(groupByColumnsRef.current, column),
+        labels
+      );
+    },
+    [labels]
+  );
   const filterValueFn = (0, import_react.useCallback)((columnName) => {
     return activeFiltersRef.current[columnName] ?? "";
   }, []);
-  const filterPlaceholderFn = (0, import_react.useCallback)((column) => {
-    return (0, import_ui_grid3.gridFilterPlaceholder)((0, import_ui_grid3.isGridColumnFilterable)(optionsRef.current, column), labels);
-  }, [labels]);
+  const filterPlaceholderFn = (0, import_react.useCallback)(
+    (column) => {
+      return (0, import_ui_grid4.gridFilterPlaceholder)((0, import_ui_grid4.isGridColumnFilterable)(optionsRef.current, column), labels);
+    },
+    [labels]
+  );
   const isFilterInputDisabledFn = (0, import_react.useCallback)((column) => {
-    return !(0, import_ui_grid3.isGridColumnFilterable)(optionsRef.current, column);
-  }, []);
-  const groupDisclosureLabelFn = (0, import_react.useCallback)((item) => {
-    return (0, import_ui_grid3.gridGroupDisclosureLabel)(item.collapsed, labels);
-  }, [labels]);
-  const cellContextFn = (0, import_react.useCallback)((row, column) => {
-    return (0, import_ui_grid3.buildGridCellContext)(row, column);
+    return !(0, import_ui_grid4.isGridColumnFilterable)(optionsRef.current, column);
   }, []);
-  const displayValueFn = (0, import_react.useCallback)((row, column) => {
-    return (0, import_ui_grid3.formatGridCellDisplayValue)(cellContextFn(row, column));
-  }, [cellContextFn]);
+  const groupDisclosureLabelFn = (0, import_react.useCallback)(
+    (item) => {
+      return (0, import_ui_grid4.gridGroupDisclosureLabel)(item.collapsed, labels);
+    },
+    [labels]
+  );
+  const cellContextFn = (0, import_react.useCallback)(
+    (row, column) => {
+      return (0, import_ui_grid4.buildGridCellContext)(row, column);
+    },
+    []
+  );
+  const displayValueFn = (0, import_react.useCallback)(
+    (row, column) => {
+      return (0, import_ui_grid4.formatGridCellDisplayValue)(cellContextFn(row, column));
+    },
+    [cellContextFn]
+  );
   const isFocusedCellFn = (0, import_react.useCallback)((row, column) => {
-    return (0, import_ui_grid3.isGridCellPosition)(focusedCellRef.current, row.id, column.name);
+    return (0, import_ui_grid4.isGridCellPosition)(focusedCellRef.current, row.id, column.name);
   }, []);
   const isEditingCellFn = (0, import_react.useCallback)((row, column) => {
-    return (0, import_ui_grid3.isGridCellPosition)(editingCellRef.current, row.id, column.name);
+    return (0, import_ui_grid4.isGridCellPosition)(editingCellRef.current, row.id, column.name);
   }, []);
   const editorInputTypeFn = (0, import_react.useCallback)((column) => {
-    return (0, import_ui_grid3.gridEditorInputType)(column);
-  }, []);
-  const expandedContextFn = (0, import_react.useCallback)((row) => {
-    return {
-      $implicit: row.entity,
-      row: row.entity,
-      rowIndex: row.index,
-      expanded: true,
-      ...optionsRef.current.expandableRowScope ?? {}
-    };
+    return (0, import_ui_grid4.gridEditorInputType)(column);
   }, []);
-  const columnWidthFn = (0, import_react.useCallback)((column) => (0, import_ui_grid3.gridColumnWidth)(column), []);
+  const expandedContextFn = (0, import_react.useCallback)(
+    (row) => {
+      return {
+        $implicit: row.entity,
+        row: row.entity,
+        rowIndex: row.index,
+        expanded: true,
+        ...optionsRef.current.expandableRowScope ?? {}
+      };
+    },
+    []
+  );
+  const columnWidthFn = (0, import_react.useCallback)((column) => (0, import_ui_grid4.gridColumnWidth)(column), []);
   const isColumnSortableFn = (0, import_react.useCallback)((column) => {
-    return (0, import_ui_grid3.isGridColumnSortable)(optionsRef.current, column);
+    return (0, import_ui_grid4.isGridColumnSortable)(optionsRef.current, column);
   }, []);
   const isColumnFilterableFn = (0, import_react.useCallback)((column) => {
-    return (0, import_ui_grid3.isGridColumnFilterable)(optionsRef.current, column);
+    return (0, import_ui_grid4.isGridColumnFilterable)(optionsRef.current, column);
   }, []);
   const cellIndentFn = (0, import_react.useCallback)((row, column) => {
-    return (0, import_ui_grid3.gridCellIndent)(optionsRef.current, visibleColumnsRef.current, row, column);
+    return (0, import_ui_grid4.gridCellIndent)(optionsRef.current, visibleColumnsRef.current, row, column);
   }, []);
-  const treeToggleLabelFn = (0, import_react.useCallback)((row) => {
-    return (0, import_ui_grid3.gridTreeToggleLabelForRow)(expandedTreeRowsRef.current, row, labels);
-  }, [labels]);
+  const treeToggleLabelFn = (0, import_react.useCallback)(
+    (row) => {
+      return (0, import_ui_grid4.gridTreeToggleLabelForRow)(expandedTreeRowsRef.current, row, labels);
+    },
+    [labels]
+  );
   const isTreeRowExpandedFn = (0, import_react.useCallback)((row) => {
-    return (0, import_ui_grid3.isGridTreeRowExpanded)(expandedTreeRowsRef.current, row);
+    return (0, import_ui_grid4.isGridTreeRowExpanded)(expandedTreeRowsRef.current, row);
   }, []);
-  const expandToggleLabelFn = (0, import_react.useCallback)((row) => {
-    return (0, import_ui_grid3.gridExpandToggleLabelForRow)(row, labels);
-  }, [labels]);
+  const expandToggleLabelFn = (0, import_react.useCallback)(
+    (row) => {
+      return (0, import_ui_grid4.gridExpandToggleLabelForRow)(row, labels);
+    },
+    [labels]
+  );
   const isGroupedFn = (0, import_react.useCallback)((column) => {
-    return (0, import_ui_grid3.isGridColumnGrouped)(groupByColumnsRef.current, column);
+    return (0, import_ui_grid4.isGridColumnGrouped)(groupByColumnsRef.current, column);
   }, []);
   const showTreeToggleFn = (0, import_react.useCallback)((row, column) => {
-    return (0, import_ui_grid3.shouldShowGridTreeToggle)(optionsRef.current, visibleColumnsRef.current, row, column);
+    return (0, import_ui_grid4.shouldShowGridTreeToggle)(optionsRef.current, visibleColumnsRef.current, row, column);
   }, []);
   const showExpandToggleFn = (0, import_react.useCallback)((row, column) => {
-    return (0, import_ui_grid3.shouldShowGridExpandToggle)(optionsRef.current, visibleColumnsRef.current, column);
+    return (0, import_ui_grid4.shouldShowGridExpandToggle)(optionsRef.current, visibleColumnsRef.current, column);
   }, []);
   const showPaginationControlsFn = (0, import_react.useCallback)(() => {
-    return import_ui_grid3.FEATURE_PAGINATION && (0, import_ui_grid3.shouldShowGridPaginationControls)(optionsRef.current);
+    return import_ui_grid4.FEATURE_PAGINATION && (0, import_ui_grid4.shouldShowGridPaginationControls)(optionsRef.current);
   }, []);
   const paginationSummaryFn = (0, import_react.useCallback)(() => {
     const ti = pipelineRef.current.totalItems;
-    if (ti === 0) return "0-0 of 0";
-    return `${getFirstRowIndexValueFn(ti) + 1}-${getLastRowIndexValueFn(ti) + 1} of ${ti}`;
+    return formatPaginationSummary(ti, getFirstRowIndexValueFn(ti), getLastRowIndexValueFn(ti));
   }, [getFirstRowIndexValueFn, getLastRowIndexValueFn]);
   const pageSizeOptionsFn = (0, import_react.useCallback)(() => {
     return optionsRef.current.paginationPageSizes ?? [];
   }, []);
   const isGroupingEnabledFn = (0, import_react.useCallback)(() => {
-    return import_ui_grid3.FEATURE_GROUPING && (0, import_ui_grid3.isGridGroupingEnabled)(optionsRef.current);
+    return import_ui_grid4.FEATURE_GROUPING && (0, import_ui_grid4.isGridGroupingEnabled)(optionsRef.current);
   }, []);
   const isFilteringEnabledFn = (0, import_react.useCallback)(() => {
-    return import_ui_grid3.FEATURE_FILTERING && (0, import_ui_grid3.isGridFilteringEnabled)(optionsRef.current);
+    return import_ui_grid4.FEATURE_FILTERING && (0, import_ui_grid4.isGridFilteringEnabled)(optionsRef.current);
   }, []);
   const toggleSortFn = (0, import_react.useCallback)((column) => {
-    if (!import_ui_grid3.FEATURE_SORTING || !(0, import_ui_grid3.isGridColumnSortable)(optionsRef.current, column)) return;
-    const currentDirection = sortStateRef.current.columnName === column.name ? sortStateRef.current.direction : import_ui_grid3.SORT_DIRECTIONS.none;
-    const nextDirection = currentDirection === import_ui_grid3.SORT_DIRECTIONS.none ? import_ui_grid3.SORT_DIRECTIONS.asc : currentDirection === import_ui_grid3.SORT_DIRECTIONS.asc ? import_ui_grid3.SORT_DIRECTIONS.desc : import_ui_grid3.SORT_DIRECTIONS.none;
+    if (!import_ui_grid4.FEATURE_SORTING || !(0, import_ui_grid4.isGridColumnSortable)(optionsRef.current, column)) return;
+    const currentDirection = sortStateRef.current.columnName === column.name ? sortStateRef.current.direction : import_ui_grid4.SORT_DIRECTIONS.none;
+    const nextDirection = currentDirection === import_ui_grid4.SORT_DIRECTIONS.none ? import_ui_grid4.SORT_DIRECTIONS.asc : currentDirection === import_ui_grid4.SORT_DIRECTIONS.asc ? import_ui_grid4.SORT_DIRECTIONS.desc : import_ui_grid4.SORT_DIRECTIONS.none;
     applyGridSortStateCommand(gridApiRef.current, (state) => setSortState(state), {
-      columnName: nextDirection === import_ui_grid3.SORT_DIRECTIONS.none ? null : column.name,
+      columnName: nextDirection === import_ui_grid4.SORT_DIRECTIONS.none ? null : column.name,
       direction: nextDirection
     });
   }, []);
@@ -1341,7 +1665,7 @@ function useGridState(options, onRegisterApi) {
   }, []);
   const toggleGroupingFn = (0, import_react.useCallback)((column, event) => {
     event?.stopPropagation();
-    if (!(import_ui_grid3.FEATURE_GROUPING && (0, import_ui_grid3.isGridGroupingEnabled)(optionsRef.current))) return;
+    if (!(import_ui_grid4.FEATURE_GROUPING && (0, import_ui_grid4.isGridGroupingEnabled)(optionsRef.current))) return;
     const current = groupByColumnsRef.current;
     const next = current.includes(column.name) ? current.filter((n) => n !== column.name) : [...current, column.name];
     groupByColumnsRef.current = next;
@@ -1354,112 +1678,134 @@ function useGridState(options, onRegisterApi) {
       [item.id]: !current[item.id]
     }));
   }, []);
-  const focusCellFn = (0, import_react.useCallback)((row, column, triggerEvent) => {
-    const nextFocusResult = (0, import_ui_grid3.buildGridFocusCellResult)({
-      currentFocusedCell: focusedCellRef.current,
-      currentEditingCell: editingCellRef.current,
-      rowId: row.id,
-      columnName: column.name,
-      shouldEditOnFocus: shouldEditOnFocusFn(column),
-      isCellEditable: isCellEditable(row, column, triggerEvent)
-    });
-    setFocusedCell(nextFocusResult.focusedCell);
-    if (nextFocusResult.shouldBeginEdit) {
-      startCellEditFn(row, column, triggerEvent);
-    }
-  }, [isCellEditable, shouldEditOnFocusFn, startCellEditFn]);
-  const handleCellKeyDownFn = (0, import_react.useCallback)((row, column, event) => {
-    focusCellFn(row, column, event.nativeEvent);
-    switch (event.key) {
-      case "ArrowLeft":
-        event.preventDefault();
-        moveFocusFn(row, column, "left", event.nativeEvent);
-        return;
-      case "ArrowRight":
-        event.preventDefault();
-        moveFocusFn(row, column, "right", event.nativeEvent);
-        return;
-      case "ArrowUp":
-        event.preventDefault();
-        moveFocusFn(row, column, "up", event.nativeEvent);
-        return;
-      case "ArrowDown":
+  const focusCellFn = (0, import_react.useCallback)(
+    (row, column, triggerEvent) => {
+      const nextFocusResult = (0, import_ui_grid4.buildGridFocusCellResult)({
+        currentFocusedCell: focusedCellRef.current,
+        currentEditingCell: editingCellRef.current,
+        rowId: row.id,
+        columnName: column.name,
+        shouldEditOnFocus: shouldEditOnFocusFn(column),
+        isCellEditable: isCellEditable(row, column, triggerEvent)
+      });
+      setFocusedCell(nextFocusResult.focusedCell);
+      if (nextFocusResult.shouldBeginEdit) {
+        startCellEditFn(row, column, triggerEvent);
+      }
+    },
+    [isCellEditable, shouldEditOnFocusFn, startCellEditFn]
+  );
+  const handleCellKeyDownFn = (0, import_react.useCallback)(
+    (row, column, event) => {
+      focusCellFn(row, column, event.nativeEvent);
+      switch (event.key) {
+        case "ArrowLeft":
+          event.preventDefault();
+          moveFocusFn(row, column, "left", event.nativeEvent);
+          return;
+        case "ArrowRight":
+          event.preventDefault();
+          moveFocusFn(row, column, "right", event.nativeEvent);
+          return;
+        case "ArrowUp":
+          event.preventDefault();
+          moveFocusFn(row, column, "up", event.nativeEvent);
+          return;
+        case "ArrowDown":
+          event.preventDefault();
+          moveFocusFn(row, column, "down", event.nativeEvent);
+          return;
+        case "Tab":
+          event.preventDefault();
+          moveFocusFn(row, column, event.shiftKey ? "left" : "right", event.nativeEvent);
+          return;
+        case "Enter":
+          event.preventDefault();
+          moveFocusFn(row, column, event.shiftKey ? "up" : "down", event.nativeEvent);
+          return;
+        case "F2":
+          event.preventDefault();
+          if (isCellEditable(row, column, event.nativeEvent)) {
+            startCellEditFn(row, column, event.nativeEvent);
+          }
+          return;
+        case "Backspace":
+        case "Delete":
+          if (isCellEditable(row, column, event.nativeEvent)) {
+            event.preventDefault();
+            startCellEditFn(row, column, event.nativeEvent, "");
+          }
+          return;
+        default:
+          break;
+      }
+      if ((0, import_ui_grid4.isPrintableGridKey)(event.key, event.ctrlKey, event.metaKey, event.altKey) && isCellEditable(row, column, event.nativeEvent)) {
         event.preventDefault();
-        moveFocusFn(row, column, "down", event.nativeEvent);
-        return;
-      case "Tab":
+        startCellEditFn(row, column, event.nativeEvent, event.key);
+      }
+    },
+    [focusCellFn, moveFocusFn, isCellEditable, startCellEditFn]
+  );
+  const handleCellDoubleClickFn = (0, import_react.useCallback)(
+    (row, column, event) => {
+      focusCellFn(row, column, event.nativeEvent);
+      if (isCellEditable(row, column, event.nativeEvent)) {
+        startCellEditFn(row, column, event.nativeEvent);
+      }
+    },
+    [focusCellFn, isCellEditable, startCellEditFn]
+  );
+  const updateEditingValueFn = (0, import_react.useCallback)((value) => {
+    setEditingValue(value);
+  }, []);
+  const handleEditorKeyDownFn = (0, import_react.useCallback)(
+    (event) => {
+      if (event.key === "Escape") {
         event.preventDefault();
-        moveFocusFn(row, column, event.shiftKey ? "left" : "right", event.nativeEvent);
+        cancelCellEditFn();
         return;
-      case "Enter":
+      }
+      if (event.key === "Enter") {
         event.preventDefault();
-        moveFocusFn(row, column, event.shiftKey ? "up" : "down", event.nativeEvent);
+        commitCellEditFn(event.shiftKey ? "up" : "down");
         return;
-      case "F2":
+      }
+      if (event.key === "Tab") {
         event.preventDefault();
-        if (isCellEditable(row, column, event.nativeEvent)) {
-          startCellEditFn(row, column, event.nativeEvent);
-        }
-        return;
-      case "Backspace":
-      case "Delete":
-        if (isCellEditable(row, column, event.nativeEvent)) {
-          event.preventDefault();
-          startCellEditFn(row, column, event.nativeEvent, "");
-        }
+        commitCellEditFn(event.shiftKey ? "left" : "right");
+      }
+    },
+    [cancelCellEditFn, commitCellEditFn]
+  );
+  const handleEditorBlurFn = (0, import_react.useCallback)(
+    (event) => {
+      const ec = editingCellRef.current;
+      const target = event.target;
+      if (!ec || !target) return;
+      if (target.dataset["rowId"] !== ec.rowId || target.dataset["colName"] !== ec.columnName)
         return;
-      default:
-        break;
-    }
-    if ((0, import_ui_grid3.isPrintableGridKey)(event.key, event.ctrlKey, event.metaKey, event.altKey) && isCellEditable(row, column, event.nativeEvent)) {
-      event.preventDefault();
-      startCellEditFn(row, column, event.nativeEvent, event.key);
-    }
-  }, [focusCellFn, moveFocusFn, isCellEditable, startCellEditFn]);
-  const handleCellDoubleClickFn = (0, import_react.useCallback)((row, column, event) => {
-    focusCellFn(row, column, event.nativeEvent);
-    if (isCellEditable(row, column, event.nativeEvent)) {
-      startCellEditFn(row, column, event.nativeEvent);
-    }
-  }, [focusCellFn, isCellEditable, startCellEditFn]);
-  const updateEditingValueFn = (0, import_react.useCallback)((value) => {
-    setEditingValue(value);
-  }, []);
-  const handleEditorKeyDownFn = (0, import_react.useCallback)((event) => {
-    if (event.key === "Escape") {
-      event.preventDefault();
-      cancelCellEditFn();
-      return;
-    }
-    if (event.key === "Enter") {
-      event.preventDefault();
-      commitCellEditFn(event.shiftKey ? "up" : "down");
-      return;
-    }
-    if (event.key === "Tab") {
-      event.preventDefault();
-      commitCellEditFn(event.shiftKey ? "left" : "right");
-    }
-  }, [cancelCellEditFn, commitCellEditFn]);
-  const handleEditorBlurFn = (0, import_react.useCallback)((event) => {
-    const ec = editingCellRef.current;
-    const target = event.target;
-    if (!ec || !target) return;
-    if (target.dataset["rowId"] !== ec.rowId || target.dataset["colName"] !== ec.columnName) return;
-    commitCellEditFn(void 0, false);
-  }, [commitCellEditFn]);
-  const toggleRowExpansionFn = (0, import_react.useCallback)((row, event) => {
-    event?.stopPropagation();
-    toggleRowExpansionByRefFn(row);
-  }, [toggleRowExpansionByRefFn]);
-  const toggleTreeRowFn = (0, import_react.useCallback)((row, event) => {
-    event?.stopPropagation();
-    toggleTreeRowByRefFn(row);
-  }, [toggleTreeRowByRefFn]);
+      commitCellEditFn(void 0, false);
+    },
+    [commitCellEditFn]
+  );
+  const toggleRowExpansionFn = (0, import_react.useCallback)(
+    (row, event) => {
+      event?.stopPropagation();
+      toggleRowExpansionByRefFn(row);
+    },
+    [toggleRowExpansionByRefFn]
+  );
+  const toggleTreeRowFn = (0, import_react.useCallback)(
+    (row, event) => {
+      event?.stopPropagation();
+      toggleTreeRowByRefFn(row);
+    },
+    [toggleTreeRowByRefFn]
+  );
   const moveColumnFn = (0, import_react.useCallback)((fromIndex, toIndex) => {
     moveGridColumnCommand(
       gridApiRef.current,
-      import_ui_grid3.FEATURE_COLUMN_MOVING && optionsRef.current.enableColumnMoving === true,
+      import_ui_grid4.FEATURE_COLUMN_MOVING && optionsRef.current.enableColumnMoving === true,
       (updater) => setColumnOrder((current) => updater(current)),
       fromIndex,
       toIndex
@@ -1471,9 +1817,12 @@ function useGridState(options, onRegisterApi) {
   const previousPageFn = (0, import_react.useCallback)(() => {
     seekPageFn(getCurrentPageValueFn() - 1);
   }, [seekPageFn, getCurrentPageValueFn]);
-  const onPageSizeChangeFn = (0, import_react.useCallback)((value) => {
-    setPaginationPageSizeFn(Number(value));
-  }, [setPaginationPageSizeFn]);
+  const onPageSizeChangeFn = (0, import_react.useCallback)(
+    (value) => {
+      setPaginationPageSizeFn(Number(value));
+    },
+    [setPaginationPageSizeFn]
+  );
   const onViewportScrollFn = (0, import_react.useCallback)((startIndex) => {
     if (!scrollingRef.current) {
       scrollingRef.current = true;
@@ -1486,14 +1835,17 @@ function useGridState(options, onRegisterApi) {
       scrollingRef.current = false;
       raiseGridScrollEnd(gridApiRef.current);
     }, 120);
-    const isInfiniteScrollEnabled = import_ui_grid3.FEATURE_INFINITE_SCROLL && (optionsRef.current.infiniteScrollRowsFromEnd !== void 0 || optionsRef.current.infiniteScrollUp === true || optionsRef.current.infiniteScrollDown !== void 0);
+    const isInfiniteScrollEnabled = import_ui_grid4.FEATURE_INFINITE_SCROLL && (optionsRef.current.infiniteScrollRowsFromEnd !== void 0 || optionsRef.current.infiniteScrollUp === true || optionsRef.current.infiniteScrollDown !== void 0);
     maybeRequestInfiniteScrollCommand(gridApiRef.current, {
       enabled: isInfiniteScrollEnabled,
       virtualizationEnabled: pipelineRef.current.virtualizationEnabled,
       state: infiniteScrollStateRef.current,
       startIndex,
       visibleRows: pipelineRef.current.visibleRows.length,
-      viewportRows: Math.max(1, Math.ceil((optionsRef.current.viewportHeight ?? 560) / (optionsRef.current.rowHeight ?? 44))),
+      viewportRows: computeViewportRows(
+        optionsRef.current.viewportHeight,
+        optionsRef.current.rowHeight
+      ),
       threshold: optionsRef.current.infiniteScrollRowsFromEnd ?? 20,
       setState: (state) => setInfiniteScrollState(state)
     });
@@ -1562,16 +1914,16 @@ function useGridState(options, onRegisterApi) {
     pageSizeOptions: pageSizeOptionsFn,
     isCellEditable,
     shouldEditOnFocus: shouldEditOnFocusFn,
-    sortingFeature: import_ui_grid3.FEATURE_SORTING,
-    filteringFeature: import_ui_grid3.FEATURE_FILTERING,
-    groupingFeature: import_ui_grid3.FEATURE_GROUPING,
-    paginationFeature: import_ui_grid3.FEATURE_PAGINATION,
-    cellEditFeature: import_ui_grid3.FEATURE_CELL_EDIT,
-    expandableFeature: import_ui_grid3.FEATURE_EXPANDABLE,
-    treeViewFeature: import_ui_grid3.FEATURE_TREE_VIEW,
-    infiniteScrollFeature: import_ui_grid3.FEATURE_INFINITE_SCROLL,
-    columnMovingFeature: import_ui_grid3.FEATURE_COLUMN_MOVING,
-    csvExportFeature: import_ui_grid3.FEATURE_CSV_EXPORT,
+    sortingFeature: import_ui_grid4.FEATURE_SORTING,
+    filteringFeature: import_ui_grid4.FEATURE_FILTERING,
+    groupingFeature: import_ui_grid4.FEATURE_GROUPING,
+    paginationFeature: import_ui_grid4.FEATURE_PAGINATION,
+    cellEditFeature: import_ui_grid4.FEATURE_CELL_EDIT,
+    expandableFeature: import_ui_grid4.FEATURE_EXPANDABLE,
+    treeViewFeature: import_ui_grid4.FEATURE_TREE_VIEW,
+    infiniteScrollFeature: import_ui_grid4.FEATURE_INFINITE_SCROLL,
+    columnMovingFeature: import_ui_grid4.FEATURE_COLUMN_MOVING,
+    csvExportFeature: import_ui_grid4.FEATURE_CSV_EXPORT,
     isGroupingEnabled: isGroupingEnabledFn,
     isFilteringEnabled: isFilteringEnabledFn,
     toggleSort: toggleSortFn,
@@ -1593,29 +1945,60 @@ function useGridState(options, onRegisterApi) {
     onPageSizeChange: onPageSizeChangeFn,
     runBenchmark: runBenchmarkFn,
     exportCsv: exportCsvFn,
-    onViewportScroll: onViewportScrollFn
+    onViewportScroll: onViewportScrollFn,
+    // Pinning
+    isPinned: isPinnedFn,
+    pinnedOffset: pinnedOffsetFn,
+    isPinningEnabled: isPinningEnabledFn,
+    isColumnPinnable: isColumnPinnableFn,
+    togglePin: togglePinFn,
+    pinningFeature: import_ui_grid4.FEATURE_PINNING
   };
 }
 
 // src/useVirtualScroll.ts
 var import_react2 = require("react");
+
+// src/virtualScrollMath.ts
+function calculateVirtualWindow(request) {
+  const overscan = request.overscan ?? 3;
+  if (request.itemCount <= 0 || request.itemSize <= 0) {
+    return {
+      visibleRange: { start: 0, end: 0 },
+      totalHeight: Math.max(0, request.itemCount) * Math.max(0, request.itemSize),
+      offsetY: 0
+    };
+  }
+  const rawStart = Math.floor(request.scrollTop / request.itemSize) - overscan;
+  const start = Math.max(0, rawStart);
+  const rawEnd = rawStart + Math.ceil(request.viewportHeight / request.itemSize) + 2 * overscan;
+  const end = Math.min(request.itemCount, rawEnd);
+  return {
+    visibleRange: { start, end },
+    totalHeight: request.itemCount * request.itemSize,
+    offsetY: start * request.itemSize
+  };
+}
+
+// src/useVirtualScroll.ts
 function useVirtualScroll(options) {
   const { itemCount, itemSize, viewportHeight, overscan = 3 } = options;
   const [scrollTop, setScrollTop] = (0, import_react2.useState)(0);
   const viewportRef = (0, import_react2.useRef)(null);
-  const rawStart = Math.floor(scrollTop / itemSize) - overscan;
-  const start = Math.max(0, rawStart);
-  const rawEnd = rawStart + Math.ceil(viewportHeight / itemSize) + 2 * overscan;
-  const end = Math.min(itemCount, rawEnd);
-  const totalHeight = itemCount * itemSize;
-  const offsetY = start * itemSize;
+  const virtualWindow = calculateVirtualWindow({
+    itemCount,
+    itemSize,
+    viewportHeight,
+    overscan,
+    scrollTop
+  });
   const onScroll = (0, import_react2.useCallback)((event) => {
     setScrollTop(event.currentTarget.scrollTop);
   }, []);
   return {
-    visibleRange: { start, end },
-    totalHeight,
-    offsetY,
+    visibleRange: virtualWindow.visibleRange,
+    totalHeight: virtualWindow.totalHeight,
+    offsetY: virtualWindow.offsetY,
     onScroll,
     viewportRef,
     scrollTop
@@ -1624,7 +2007,13 @@ function useVirtualScroll(options) {
 
 // src/UiGrid.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function UiGrid({ options, onRegisterApi, cellRenderer, expandableRenderer, className }) {
+function UiGrid({
+  options,
+  onRegisterApi,
+  cellRenderer,
+  expandableRenderer,
+  className
+}) {
   const state = useGridState(options, onRegisterApi);
   const {
     pipeline,
@@ -1688,7 +2077,16 @@ function UiGrid({ options, onRegisterApi, cellRenderer, expandableRenderer, clas
               " ",
               labels.groupRowsSuffix
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "toggle-icon group-disclosure-icon", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: item.collapsed ? "M10 7l5 5-5 5z" : "M7 10l5 5 5-5z" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "svg",
+              {
+                className: "toggle-icon group-disclosure-icon",
+                viewBox: "0 0 24 24",
+                "aria-hidden": "true",
+                focusable: false,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: item.collapsed ? "M10 7l5 5-5 5z" : "M7 10l5 5 5-5z" })
+              }
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only ui-grid-sr-only", children: state.groupDisclosureLabel(item) })
           ]
         },
@@ -1710,62 +2108,84 @@ function UiGrid({ options, onRegisterApi, cellRenderer, expandableRenderer, clas
     }
     if (item.kind !== "row") return null;
     const rowItem = item;
-    return visibleColumns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
-      {
-        className: cellClassName(rowItem, column),
-        "data-part": "body-cell",
-        role: "gridcell",
-        tabIndex: 0,
-        "data-row-id": rowItem.row.id,
-        "data-col-name": column.name,
-        onFocus: () => state.focusCell(rowItem.row, column),
-        onClick: () => state.focusCell(rowItem.row, column),
-        onDoubleClick: (e) => state.handleCellDoubleClick(rowItem.row, column, e),
-        onKeyDown: (e) => state.handleCellKeyDown(rowItem.row, column, e),
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cell-shell", style: { paddingInlineStart: state.cellIndent(rowItem.row, column) }, children: [
-          treeViewFeature && state.showTreeToggle(rowItem.row, column) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "button",
-            {
-              type: "button",
-              className: "row-toggle row-toggle-tree",
-              "data-part": "tree-toggle",
-              "aria-label": state.treeToggleLabel(rowItem.row),
-              "aria-expanded": state.isTreeRowExpanded(rowItem.row),
-              onClick: (e) => state.toggleTreeRow(rowItem.row, e),
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "toggle-icon", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: state.isTreeRowExpanded(rowItem.row) ? "M7 10l5 5 5-5z" : "M10 7l5 5-5 5z" }) })
-            }
-          ),
-          expandableFeature && state.showExpandToggle(rowItem.row, column) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "button",
-            {
-              type: "button",
-              className: "row-toggle row-toggle-expand",
-              "data-part": "expand-toggle",
-              "aria-label": state.expandToggleLabel(rowItem.row),
-              "aria-expanded": rowItem.row.expanded,
-              onClick: (e) => state.toggleRowExpansion(rowItem.row, e),
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "toggle-icon", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: rowItem.row.expanded ? "M7 10l5 5 5-5z" : "M10 7l5 5-5 5z" }) })
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cell-value", children: cellEditFeature && state.isEditingCell(rowItem.row, column) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "input",
+    return visibleColumns.map((column) => {
+      const pinned = state.isPinned(column);
+      const pinOffset = pinned ? state.pinnedOffset(column) : null;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          className: `${cellClassName(rowItem, column)}${pinned ? " is-pinned" : ""}`,
+          "data-part": "body-cell",
+          role: "gridcell",
+          tabIndex: 0,
+          "data-row-id": rowItem.row.id,
+          "data-col-name": column.name,
+          onFocus: () => state.focusCell(rowItem.row, column),
+          onClick: () => state.focusCell(rowItem.row, column),
+          onDoubleClick: (e) => state.handleCellDoubleClick(rowItem.row, column, e),
+          onKeyDown: (e) => state.handleCellKeyDown(rowItem.row, column, e),
+          style: {
+            position: pinned ? "sticky" : void 0,
+            left: pinOffset?.side === "left" ? pinOffset.offset : void 0,
+            right: pinOffset?.side === "right" ? pinOffset.offset : void 0,
+            zIndex: pinned ? 2 : void 0
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
             {
-              className: "cell-editor",
-              "data-row-id": rowItem.row.id,
-              "data-col-name": column.name,
-              "aria-label": state.headerLabel(column),
-              type: state.editorInputType(column),
-              defaultValue: editingValue,
-              onChange: (e) => state.updateEditingValue(e.target.value),
-              onKeyDown: (e) => state.handleEditorKeyDown(e),
-              onBlur: (e) => state.handleEditorBlur(e)
+              className: "cell-shell",
+              style: { paddingInlineStart: state.cellIndent(rowItem.row, column) },
+              children: [
+                treeViewFeature && state.showTreeToggle(rowItem.row, column) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "row-toggle row-toggle-tree",
+                    "data-part": "tree-toggle",
+                    "aria-label": state.treeToggleLabel(rowItem.row),
+                    "aria-expanded": state.isTreeRowExpanded(rowItem.row),
+                    onClick: (e) => state.toggleTreeRow(rowItem.row, e),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "toggle-icon", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "path",
+                      {
+                        d: state.isTreeRowExpanded(rowItem.row) ? "M7 10l5 5 5-5z" : "M10 7l5 5-5 5z"
+                      }
+                    ) })
+                  }
+                ),
+                expandableFeature && state.showExpandToggle(rowItem.row, column) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "row-toggle row-toggle-expand",
+                    "data-part": "expand-toggle",
+                    "aria-label": state.expandToggleLabel(rowItem.row),
+                    "aria-expanded": rowItem.row.expanded,
+                    onClick: (e) => state.toggleRowExpansion(rowItem.row, e),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "toggle-icon", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: rowItem.row.expanded ? "M7 10l5 5 5-5z" : "M10 7l5 5-5 5z" }) })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cell-value", children: cellEditFeature && state.isEditingCell(rowItem.row, column) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "input",
+                  {
+                    className: "cell-editor",
+                    "data-row-id": rowItem.row.id,
+                    "data-col-name": column.name,
+                    "aria-label": state.headerLabel(column),
+                    type: state.editorInputType(column),
+                    defaultValue: editingValue,
+                    onChange: (e) => state.updateEditingValue(e.target.value),
+                    onKeyDown: (e) => state.handleEditorKeyDown(e),
+                    onBlur: (e) => state.handleEditorBlur(e)
+                  }
+                ) : cellRenderer ? cellRenderer(state.cellContext(rowItem.row, column)) ?? state.displayValue(rowItem.row, column) : state.displayValue(rowItem.row, column) })
+              ]
             }
-          ) : cellRenderer ? cellRenderer(state.cellContext(rowItem.row, column)) ?? state.displayValue(rowItem.row, column) : state.displayValue(rowItem.row, column) })
-        ] })
-      },
-      `${rowItem.row.id}-${column.name}`
-    ));
+          )
+        },
+        `${rowItem.row.id}-${column.name}`
+      );
+    });
   }
   function cellClassName(item, column) {
     const classes = ["body-cell", "ui-grid-cell"];
@@ -1795,226 +2215,365 @@ function UiGrid({ options, onRegisterApi, cellRenderer, expandableRenderer, clas
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "deck", children: "Familiar `gridOptions` and `onRegisterApi`, built with React hooks, virtualization, grouping, sorting, filtering, and column ordering." })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "hero-actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: "action action-secondary", "data-part": "action benchmark-action", onClick: () => state.runBenchmark(), children: "Benchmark" }),
-        csvExportFeature && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: "action action-secondary", "data-part": "action export-action", onClick: () => state.exportCsv(), children: "Export CSV" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "action action-secondary",
+            "data-part": "action benchmark-action",
+            onClick: () => state.runBenchmark(),
+            children: "Benchmark"
+          }
+        ),
+        csvExportFeature && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "action action-secondary",
+            "data-part": "action export-action",
+            onClick: () => state.exportCsv(),
+            children: "Export CSV"
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "stats-card", "data-part": "stats-card", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: visibleRowCount }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { children: labels.statsVisibleRows })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "metrics-strip", "data-part": "metrics", "aria-label": "Grid performance metrics", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("article", { "data-part": "metric-card", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { children: [
-          pipelineMs.toFixed(2),
-          " ms"
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "pipeline" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("article", { "data-part": "metric-card", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: virtualizationEnabled ? "On" : "Off" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "virtualization" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("article", { "data-part": "metric-card", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: state.groupByColumns.length }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "group columns" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("article", { "data-part": "metric-card", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: benchmarkResult?.averageMs?.toFixed(2) || "\u2014" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "benchmark avg" })
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "grid-frame ui-grid", "data-part": "grid-frame", role: "grid", "aria-label": options.title ?? "Data grid", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid-toolbar", "data-part": "grid-toolbar", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: visibleRowCount }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
-            labels.toolbarOf,
-            " ",
-            totalRows,
-            " ",
-            labels.toolbarRows
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "section",
+      {
+        className: "metrics-strip",
+        "data-part": "metrics",
+        "aria-label": "Grid performance metrics",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("article", { "data-part": "metric-card", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { children: [
+              pipelineMs.toFixed(2),
+              " ms"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "pipeline" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("article", { "data-part": "metric-card", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: virtualizationEnabled ? "On" : "Off" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "virtualization" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("article", { "data-part": "metric-card", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: state.groupByColumns.length }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "group columns" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("article", { "data-part": "metric-card", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: benchmarkResult?.averageMs?.toFixed(2) || "\u2014" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "benchmark avg" })
           ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "`gridOptions` compatibility layer: sorting, filtering, grouping, column moving, templating, and virtualized rendering." })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid-table ui-grid-contents-wrapper", "data-part": "grid-table", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "div",
-          {
-            className: "header-grid ui-grid-header ui-grid-header-canvas",
-            "data-part": "header",
-            role: "row",
-            style: { gridTemplateColumns },
-            children: visibleColumns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "section",
+      {
+        className: "grid-frame ui-grid",
+        "data-part": "grid-frame",
+        role: "grid",
+        "aria-label": options.title ?? "Data grid",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid-toolbar", "data-part": "grid-toolbar", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: visibleRowCount }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+                labels.toolbarOf,
+                " ",
+                totalRows,
+                " ",
+                labels.toolbarRows
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "`gridOptions` compatibility layer: sorting, filtering, grouping, column moving, templating, and virtualized rendering." })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid-table ui-grid-contents-wrapper", "data-part": "grid-table", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                className: "header-grid ui-grid-header ui-grid-header-canvas",
+                "data-part": "header",
+                role: "row",
+                style: { gridTemplateColumns },
+                children: visibleColumns.map((column) => {
+                  const pinned = state.isPinned(column);
+                  const pinOffset = pinned ? state.pinnedOffset(column) : null;
+                  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    "div",
+                    {
+                      className: `header-cell ui-grid-header-cell${sortingFeature && state.sortDirection(column) !== "none" ? " is-active" : ""}${pinned ? " is-pinned" : ""}`,
+                      "data-part": "header-cell",
+                      role: "columnheader",
+                      "aria-sort": sortingFeature ? state.sortAriaSort(column) : void 0,
+                      style: {
+                        position: pinned ? "sticky" : void 0,
+                        left: pinOffset?.side === "left" ? pinOffset.offset : void 0,
+                        right: pinOffset?.side === "right" ? pinOffset.offset : void 0,
+                        zIndex: pinned ? 2 : void 0
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "header-label", children: state.headerLabel(column) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "header-actions", children: [
+                          sortingFeature && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                            "button",
+                            {
+                              type: "button",
+                              className: `header-action${!state.isColumnSortable(column) ? " header-action-disabled" : ""}`,
+                              disabled: !state.isColumnSortable(column),
+                              "aria-label": state.sortButtonLabel(column),
+                              title: state.sortButtonLabel(column),
+                              onClick: () => state.toggleSort(column),
+                              children: [
+                                renderSortIcon(column),
+                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only ui-grid-sr-only", children: state.sortButtonLabel(column) })
+                              ]
+                            }
+                          ),
+                          groupingFeature && state.isGroupingEnabled() && column.enableGrouping !== false && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                            "button",
+                            {
+                              type: "button",
+                              className: `chip-action${state.isGrouped(column) ? " chip-action-active" : ""}`,
+                              "data-part": "group-toggle",
+                              "aria-label": state.groupingButtonLabel(column),
+                              title: state.groupingButtonLabel(column),
+                              onClick: (e) => state.toggleGrouping(column, e),
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 6h8v4H4V6Zm0 8h8v4H4v-4Zm10-8h6v4h-6V6Zm0 8h6v4h-6v-4Z" }) }),
+                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only ui-grid-sr-only", children: state.groupingButtonLabel(column) })
+                              ]
+                            }
+                          ),
+                          state.pinningFeature && state.isPinningEnabled() && state.isColumnPinnable(column) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                            "button",
+                            {
+                              type: "button",
+                              className: `chip-action${pinned ? " chip-action-active" : ""}`,
+                              "data-part": "pin-toggle",
+                              "aria-label": pinned ? labels.unpin : labels.pinLeft,
+                              title: pinned ? labels.unpin : labels.pinLeft,
+                              onClick: () => state.togglePin(column),
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M16 12V4h1V2H7v2h1v8l-2 2v2h5v6l1 1 1-1v-6h5v-2l-2-2z" }) }),
+                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only ui-grid-sr-only", children: pinned ? labels.unpin : labels.pinLeft })
+                              ]
+                            }
+                          )
+                        ] })
+                      ]
+                    },
+                    column.name
+                  );
+                })
+              }
+            ),
+            filteringFeature && state.isFilteringEnabled() && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                className: "filter-grid ui-grid-header",
+                "data-part": "filters",
+                style: { gridTemplateColumns },
+                children: visibleColumns.map((column) => {
+                  const pinned = state.isPinned(column);
+                  const pinOffset = pinned ? state.pinnedOffset(column) : null;
+                  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    "label",
+                    {
+                      className: `filter-cell ui-grid-filter-container${pinned ? " is-pinned" : ""}`,
+                      "data-part": "filter-cell",
+                      style: {
+                        position: pinned ? "sticky" : void 0,
+                        left: pinOffset?.side === "left" ? pinOffset.offset : void 0,
+                        right: pinOffset?.side === "right" ? pinOffset.offset : void 0,
+                        zIndex: pinned ? 2 : void 0
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "sr-only ui-grid-sr-only", children: [
+                          labels.filterColumn,
+                          " ",
+                          state.headerLabel(column)
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "input",
+                          {
+                            className: "ui-grid-filter-input",
+                            type: "text",
+                            defaultValue: state.filterValue(column.name),
+                            placeholder: state.filterPlaceholder(column),
+                            disabled: state.isFilterInputDisabled(column),
+                            onChange: (e) => state.updateFilter(column.name, e.target.value)
+                          }
+                        )
+                      ]
+                    },
+                    column.name
+                  );
+                })
+              }
+            ),
+            displayItems.length > 0 ? virtualizationEnabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "div",
               {
-                className: `header-cell ui-grid-header-cell${sortingFeature && state.sortDirection(column) !== "none" ? " is-active" : ""}`,
-                "data-part": "header-cell",
-                role: "columnheader",
-                "aria-sort": sortingFeature ? state.sortAriaSort(column) : void 0,
+                className: "grid-viewport ui-grid-viewport",
+                "data-part": "viewport",
+                ref: virtualScroll.viewportRef,
+                style: { height: viewportHeightPx, overflow: "auto", position: "relative" },
+                onScroll: onViewportScroll,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { height: `${virtualScroll.totalHeight}px`, position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    className: "body-grid ui-grid-canvas",
+                    "data-part": "body",
+                    role: "rowgroup",
+                    style: {
+                      gridTemplateColumns,
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      right: 0,
+                      transform: `translateY(${virtualScroll.offsetY}px)`
+                    },
+                    children: itemsToRender.map(renderDisplayItem)
+                  }
+                ) })
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                className: "body-grid ui-grid-canvas",
+                "data-part": "body",
+                role: "rowgroup",
+                style: { gridTemplateColumns },
+                children: displayItems.map(renderDisplayItem)
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "empty-state ui-grid-no-row-overlay", "data-part": "empty-state", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: options.emptyMessage ?? labels.emptyHeading }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: labels.emptyDescription })
+            ] }),
+            paginationFeature && state.showPaginationControls() && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "footer",
+              {
+                className: "pagination-bar ui-grid-pagination",
+                "data-part": "pagination",
+                role: "navigation",
+                "aria-label": labels.paginationPage,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "header-label", children: state.headerLabel(column) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "header-actions", children: [
-                    sortingFeature && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: state.paginationSummary() }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pagination-controls", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                       "button",
                       {
                         type: "button",
-                        className: `header-action${!state.isColumnSortable(column) ? " header-action-disabled" : ""}`,
-                        disabled: !state.isColumnSortable(column),
-                        "aria-label": state.sortButtonLabel(column),
-                        title: state.sortButtonLabel(column),
-                        onClick: () => state.toggleSort(column),
+                        className: "action action-secondary pagination-button",
+                        "aria-label": labels.paginationPrevious,
+                        disabled: paginationCurrentPage <= 1,
+                        onClick: () => state.previousPage(),
                         children: [
-                          renderSortIcon(column),
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only ui-grid-sr-only", children: state.sortButtonLabel(column) })
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "svg",
+                            {
+                              className: "pagination-icon",
+                              viewBox: "0 0 24 24",
+                              "aria-hidden": "true",
+                              focusable: false,
+                              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" })
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: labels.paginationPrevious })
                         ]
                       }
                     ),
-                    groupingFeature && state.isGroupingEnabled() && column.enableGrouping !== false && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+                      labels.paginationPage,
+                      " ",
+                      paginationCurrentPage,
+                      " ",
+                      labels.paginationOf,
+                      " ",
+                      paginationTotalPages
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                       "button",
                       {
                         type: "button",
-                        className: `chip-action${state.isGrouped(column) ? " chip-action-active" : ""}`,
-                        "data-part": "group-toggle",
-                        "aria-label": state.groupingButtonLabel(column),
-                        title: state.groupingButtonLabel(column),
-                        onClick: (e) => state.toggleGrouping(column, e),
+                        className: "action action-secondary pagination-button",
+                        "aria-label": labels.paginationNext,
+                        disabled: paginationCurrentPage >= paginationTotalPages,
+                        onClick: () => state.nextPage(),
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 6h8v4H4V6Zm0 8h8v4H4v-4Zm10-8h6v4h-6V6Zm0 8h6v4h-6v-4Z" }) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only ui-grid-sr-only", children: state.groupingButtonLabel(column) })
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "svg",
+                            {
+                              className: "pagination-icon",
+                              viewBox: "0 0 24 24",
+                              "aria-hidden": "true",
+                              focusable: false,
+                              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z" })
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: labels.paginationNext })
                         ]
                       }
-                    )
+                    ),
+                    state.pageSizeOptions().length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "pagination-size", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: labels.paginationRows }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "select",
+                        {
+                          "aria-label": labels.paginationRows,
+                          value: paginationSelectedPageSize,
+                          onChange: (e) => state.onPageSizeChange(e.target.value),
+                          children: state.pageSizeOptions().map((size) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: size, children: size }, size))
+                        }
+                      )
+                    ] })
                   ] })
                 ]
-              },
-              column.name
-            ))
-          }
-        ),
-        filteringFeature && state.isFilteringEnabled() && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "filter-grid ui-grid-header", "data-part": "filters", style: { gridTemplateColumns }, children: visibleColumns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "filter-cell ui-grid-filter-container", "data-part": "filter-cell", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "sr-only ui-grid-sr-only", children: [
-            labels.filterColumn,
-            " ",
-            state.headerLabel(column)
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "input",
-            {
-              className: "ui-grid-filter-input",
-              type: "text",
-              defaultValue: state.filterValue(column.name),
-              placeholder: state.filterPlaceholder(column),
-              disabled: state.isFilterInputDisabled(column),
-              onChange: (e) => state.updateFilter(column.name, e.target.value)
-            }
-          )
-        ] }, column.name)) }),
-        displayItems.length > 0 ? virtualizationEnabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "div",
-          {
-            className: "grid-viewport ui-grid-viewport",
-            "data-part": "viewport",
-            ref: virtualScroll.viewportRef,
-            style: { height: viewportHeightPx, overflow: "auto", position: "relative" },
-            onScroll: onViewportScroll,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { height: `${virtualScroll.totalHeight}px`, position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "div",
-              {
-                className: "body-grid ui-grid-canvas",
-                "data-part": "body",
-                role: "rowgroup",
-                style: {
-                  gridTemplateColumns,
-                  position: "absolute",
-                  top: 0,
-                  left: 0,
-                  right: 0,
-                  transform: `translateY(${virtualScroll.offsetY}px)`
-                },
-                children: itemsToRender.map(renderDisplayItem)
-              }
-            ) })
-          }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "div",
-          {
-            className: "body-grid ui-grid-canvas",
-            "data-part": "body",
-            role: "rowgroup",
-            style: { gridTemplateColumns },
-            children: displayItems.map(renderDisplayItem)
-          }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "empty-state ui-grid-no-row-overlay", "data-part": "empty-state", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: options.emptyMessage ?? labels.emptyHeading }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: labels.emptyDescription })
-        ] }),
-        paginationFeature && state.showPaginationControls() && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("footer", { className: "pagination-bar ui-grid-pagination", "data-part": "pagination", role: "navigation", "aria-label": labels.paginationPage, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: state.paginationSummary() }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pagination-controls", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-              "button",
-              {
-                type: "button",
-                className: "action action-secondary pagination-button",
-                "aria-label": labels.paginationPrevious,
-                disabled: paginationCurrentPage <= 1,
-                onClick: () => state.previousPage(),
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "pagination-icon", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: labels.paginationPrevious })
-                ]
               }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
-              labels.paginationPage,
-              " ",
-              paginationCurrentPage,
-              " ",
-              labels.paginationOf,
-              " ",
-              paginationTotalPages
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-              "button",
-              {
-                type: "button",
-                className: "action action-secondary pagination-button",
-                "aria-label": labels.paginationNext,
-                disabled: paginationCurrentPage >= paginationTotalPages,
-                onClick: () => state.nextPage(),
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "pagination-icon", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: labels.paginationNext })
-                ]
-              }
-            ),
-            state.pageSizeOptions().length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "pagination-size", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: labels.paginationRows }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "select",
-                {
-                  "aria-label": labels.paginationRows,
-                  value: paginationSelectedPageSize,
-                  onChange: (e) => state.onPageSizeChange(e.target.value),
-                  children: state.pageSizeOptions().map((size) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: size, children: size }, size))
-                }
-              )
-            ] })
+            )
           ] })
-        ] })
-      ] })
-    ] })
+        ]
+      }
+    )
   ] }) });
 }
 
+// src/rustWasmGridEngine.ts
+var import_ui_grid8 = require("@ornery/ui-grid");
+var uiGridWasmModulePath = "../../../dist/ui-grid-wasm/ui_grid_wasm.js";
+function registerReactUiGridWasmEngineFromModule(module2) {
+  (0, import_ui_grid8.registerRustWasmGridEngine)({
+    buildPipeline(context) {
+      return module2.build_pipeline_js(context);
+    }
+  });
+}
+async function enableReactUiGridWasmEngine() {
+  const module2 = await import(
+    /* @vite-ignore */
+    uiGridWasmModulePath
+  );
+  registerReactUiGridWasmEngineFromModule(module2);
+}
+
 // src/index.ts
-var import_ui_grid7 = require("@ornery/ui-grid");
+var import_ui_grid9 = require("@ornery/ui-grid");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DEFAULT_GRID_LABELS,
   UiGrid,
+  buildGridTemplateColumns,
+  computeViewportHeightPx,
+  computeViewportRows,
+  enableReactUiGridWasmEngine,
+  formatPaginationSummary,
+  orderVisibleColumns,
+  registerReactUiGridWasmEngineFromModule,
+  resolveBenchmarkIterations,
   useGridState,
   useVirtualScroll
 });