@ornery/ui-grid-react 0.1.5 → 0.1.6

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,18 +17,27 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  DEFAULT_GRID_LABELS: () => import_ui_grid9.DEFAULT_GRID_LABELS,
+  DEFAULT_GRID_LABELS: () => import_ui_grid4.DEFAULT_GRID_LABELS,
   UiGrid: () => UiGrid,
   buildGridTemplateColumns: () => buildGridTemplateColumns,
   computeViewportHeightPx: () => computeViewportHeightPx,
   computeViewportRows: () => computeViewportRows,
   enableReactUiGridWasmEngine: () => enableReactUiGridWasmEngine,
   formatPaginationSummary: () => formatPaginationSummary,
+  mountUiGrid: () => mountUiGrid,
   orderVisibleColumns: () => orderVisibleColumns,
   registerReactUiGridWasmEngineFromModule: () => registerReactUiGridWasmEngineFromModule,
   resolveBenchmarkIterations: () => resolveBenchmarkIterations,
@@ -35,6 +46,9 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/UiGrid.tsx
+var import_react3 = __toESM(require("react"));
+
 // src/useGridState.ts
 var import_react = require("react");
 
@@ -63,678 +77,7 @@ function computeViewportRows(viewportHeight, rowHeight) {
 }
 
 // src/useGridState.ts
-var import_ui_grid4 = require("@ornery/ui-grid");
-
-// ../ui-grid/src/lib/grid/grid.core.pagination.ts
-function seekGridPage(page, totalPages) {
-  return Math.min(Math.max(page, 1), Math.max(totalPages, 1));
-}
-function resolveGridPageSize(pageSize) {
-  return Number.isFinite(pageSize) && pageSize > 0 ? pageSize : null;
-}
-
-// ../ui-grid/src/lib/grid/grid.constants.ts
-var SORT_DIRECTIONS = {
-  asc: "asc",
-  desc: "desc",
-  none: "none"
-};
-
-// ../ui-grid/src/lib/grid/grid.utils.ts
-var PROTECTED_PATH_SEGMENTS = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
-function getPathValue(record, path) {
-  return path.split(".").reduce((current, part) => {
-    if (current === null || current === void 0 || typeof current !== "object") {
-      return void 0;
-    }
-    if (PROTECTED_PATH_SEGMENTS.has(part)) {
-      return void 0;
-    }
-    if (!Object.prototype.hasOwnProperty.call(current, part)) {
-      return void 0;
-    }
-    return current[part];
-  }, record);
-}
-function getCellValue(row, column) {
-  if (column.valueGetter) {
-    return column.valueGetter(row);
-  }
-  if (column.field) {
-    return getPathValue(row, column.field);
-  }
-  return row[column.name];
-}
-
-// ../ui-grid/src/lib/grid/grid.core.identity.ts
-function buildGridSortState(columnName, direction) {
-  return {
-    columnName,
-    direction: direction ?? SORT_DIRECTIONS.asc
-  };
-}
-
-// ../ui-grid/src/lib/grid/grid.core.edit.ts
-function beginGridEditSession(rowId, columnName, editingValue) {
-  const position = { rowId, columnName };
-  return {
-    focusedCell: position,
-    editingCell: position,
-    editingValue
-  };
-}
-function clearGridEditSession() {
-  return {
-    editingCell: null,
-    editingValue: ""
-  };
-}
-function stringifyGridEditorValue(value) {
-  if (value instanceof Date) {
-    return value.toISOString().slice(0, 10);
-  }
-  return value === null || value === void 0 ? "" : String(value);
-}
-
-// ../ui-grid/src/lib/grid/grid.core.infinite-scroll.ts
-function maybeRequestInfiniteScrollData(context) {
-  if (context.state.dataLoading) {
-    return { request: null, nextState: context.state };
-  }
-  if (context.state.scrollUp && context.startIndex <= context.threshold) {
-    return {
-      request: "top",
-      nextState: {
-        ...context.state,
-        dataLoading: true,
-        previousVisibleRows: context.visibleRows
-      }
-    };
-  }
-  if (context.state.scrollDown && context.startIndex + context.viewportRows >= Math.max(context.visibleRows - context.threshold, 0)) {
-    return {
-      request: "bottom",
-      nextState: {
-        ...context.state,
-        dataLoading: true,
-        previousVisibleRows: context.visibleRows
-      }
-    };
-  }
-  return { request: null, nextState: context.state };
-}
-function completeInfiniteScrollDataLoad(state, scrollUp, scrollDown) {
-  return {
-    ...state,
-    scrollUp,
-    scrollDown,
-    dataLoading: false
-  };
-}
-function resetInfiniteScrollState(scrollUp, scrollDown) {
-  return {
-    scrollUp,
-    scrollDown,
-    dataLoading: false,
-    previousVisibleRows: 0
-  };
-}
-function saveInfiniteScrollPercentage(state, visibleRows) {
-  return {
-    ...state,
-    previousVisibleRows: visibleRows
-  };
-}
-function setInfiniteScrollDirectionsState(state, scrollUp, scrollDown) {
-  return {
-    ...state,
-    scrollUp,
-    scrollDown
-  };
-}
-
-// ../ui-grid/src/lib/grid/grid.core.row-state.ts
-function toggleGridRowExpanded(expandedRows, rowId) {
-  const expanded = !expandedRows[rowId];
-  return {
-    expanded,
-    nextExpandedRows: {
-      ...expandedRows,
-      [rowId]: expanded
-    }
-  };
-}
-function expandAllGridRows(rows) {
-  const nextExpandedRows = {};
-  for (const row of rows) {
-    nextExpandedRows[row.id] = true;
-  }
-  return nextExpandedRows;
-}
-function setGridTreeRowExpanded(expandedTreeRows, rowId, expanded) {
-  return {
-    ...expandedTreeRows,
-    [rowId]: expanded
-  };
-}
-function toggleGridTreeRowExpanded(expandedTreeRows, rowId) {
-  const expanded = !expandedTreeRows[rowId];
-  return {
-    expanded,
-    nextExpandedTreeRows: setGridTreeRowExpanded(expandedTreeRows, rowId, expanded)
-  };
-}
-function expandAllGridTreeRows(rows) {
-  const nextExpandedTreeRows = {};
-  for (const row of rows) {
-    if (row.hasChildren) {
-      nextExpandedTreeRows[row.id] = true;
-    }
-  }
-  return nextExpandedTreeRows;
-}
-
-// ../ui-grid/src/lib/grid/grid.core.state.ts
-function normalizeGridSavedState(state) {
-  const normalized = {};
-  if (Array.isArray(state.columnOrder)) {
-    normalized.columnOrder = state.columnOrder.filter(
-      (columnName) => typeof columnName === "string" && isSafeStateKey(columnName)
-    );
-  }
-  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;
-      },
-      {}
-    );
-  }
-  if (state.sort && typeof state.sort === "object") {
-    normalized.sort = {
-      columnName: typeof state.sort.columnName === "string" && isSafeStateKey(state.sort.columnName) ? state.sort.columnName : null,
-      direction: state.sort.direction === SORT_DIRECTIONS.asc || state.sort.direction === SORT_DIRECTIONS.desc ? state.sort.direction : SORT_DIRECTIONS.none
-    };
-  }
-  if (Array.isArray(state.grouping)) {
-    normalized.grouping = state.grouping.filter(
-      (columnName) => typeof columnName === "string" && isSafeStateKey(columnName)
-    );
-  }
-  if (state.pagination && typeof state.pagination === "object") {
-    const paginationCurrentPage = Number(state.pagination.paginationCurrentPage);
-    const paginationPageSize = Number(state.pagination.paginationPageSize);
-    normalized.pagination = {
-      paginationCurrentPage: Number.isFinite(paginationCurrentPage) && paginationCurrentPage > 0 ? Math.floor(paginationCurrentPage) : 1,
-      paginationPageSize: Number.isFinite(paginationPageSize) && paginationPageSize >= 0 ? Math.floor(paginationPageSize) : 0
-    };
-  }
-  if (state.expandable && typeof state.expandable === "object") {
-    normalized.expandable = normalizeBooleanMap(state.expandable);
-  }
-  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) {
-  return Object.entries(value).reduce((accumulator, [key, entry]) => {
-    if (typeof key === "string" && isSafeStateKey(key) && typeof entry === "boolean") {
-      accumulator[key] = entry;
-    }
-    return accumulator;
-  }, {});
-}
-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);
-}
-function raiseGridRowsRendered(gridApi, rows) {
-  gridApi.core.raise.rowsRendered(rows);
-}
-function raiseGridRowsVisibleChanged(gridApi, rows) {
-  gridApi.core.raise.rowsVisibleChanged(rows);
-}
-function raiseGridCanvasHeightChanged(gridApi, oldHeight, newHeight) {
-  gridApi.core.raise.canvasHeightChanged(oldHeight, newHeight);
-}
-function raiseGridDimensionChanged(gridApi, oldHeight, oldWidth, newHeight, newWidth) {
-  gridApi.core.raise.gridDimensionChanged(oldHeight, oldWidth, newHeight, newWidth);
-}
-function raiseGridScrollBegin(gridApi) {
-  gridApi.core.raise.scrollBegin();
-}
-function raiseGridScrollEnd(gridApi) {
-  gridApi.core.raise.scrollEnd();
-}
-function raiseGridSortChanged(gridApi, sortState) {
-  gridApi.core.raise.sortChanged(sortState.columnName, sortState.direction);
-}
-function raiseGridFilterChanged(gridApi, filters) {
-  gridApi.core.raise.filterChanged(filters);
-}
-function raiseGridGroupingChanged(gridApi, groupByColumns) {
-  gridApi.core.raise.groupingChanged(groupByColumns);
-}
-function raiseGridColumnOrderChanged(gridApi, order) {
-  gridApi.core.raise.columnOrderChanged(order);
-}
-function raiseGridBenchmarkComplete(gridApi, result) {
-  gridApi.core.raise.benchmarkComplete(result);
-}
-function raiseGridPaginationChanged(gridApi, currentPage, pageSize) {
-  gridApi.pagination.raise.paginationChanged(currentPage, pageSize);
-}
-function raiseGridExpandableRowStateChanged(gridApi, row, expanded) {
-  gridApi.expandable.raise.rowExpandedStateChanged(row, expanded);
-}
-function raiseGridTreeRowStateChanged(gridApi, row, expanded) {
-  if (expanded) {
-    gridApi.treeBase.raise.rowExpanded(row);
-    return;
-  }
-  gridApi.treeBase.raise.rowCollapsed(row);
-}
-function raiseGridNeedMoreData(gridApi, request) {
-  if (request === "top") {
-    gridApi.infiniteScroll.raise.needLoadMoreDataTop();
-    return;
-  }
-  gridApi.infiniteScroll.raise.needLoadMoreData();
-}
-function raiseGridBeginCellEdit(gridApi, rowEntity, column, triggerEvent) {
-  gridApi.edit.raise.beginCellEdit(rowEntity, column, triggerEvent);
-}
-function raiseGridAfterCellEdit(gridApi, rowEntity, column, newValue, oldValue) {
-  gridApi.edit.raise.afterCellEdit(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) {
-  const next = [...items];
-  const [item] = next.splice(fromIndex, 1);
-  if (item === void 0) {
-    return next;
-  }
-  next.splice(toIndex, 0, item);
-  return next;
-}
-function moveGridColumnOrderState(current, fromIndex, toIndex) {
-  return moveArrayItem(current, fromIndex, toIndex);
-}
-function createGridRestoreMutationPlan(state) {
-  const normalizedState = normalizeGridSavedState(state);
-  const plan = {};
-  if (normalizedState.columnOrder) {
-    plan.columnOrder = normalizedState.columnOrder;
-  }
-  if (normalizedState.filters) {
-    plan.filters = normalizedState.filters;
-  }
-  if (normalizedState.sort) {
-    plan.sort = normalizedState.sort;
-  }
-  if (normalizedState.grouping) {
-    plan.grouping = normalizedState.grouping;
-  }
-  if (normalizedState.pagination) {
-    plan.pagination = {
-      currentPage: normalizedState.pagination.paginationCurrentPage,
-      pageSize: normalizedState.pagination.paginationPageSize
-    };
-  }
-  if (normalizedState.expandable) {
-    plan.expandable = normalizedState.expandable;
-  }
-  if (normalizedState.treeView) {
-    plan.treeView = normalizedState.treeView;
-  }
-  if (normalizedState.pinning) {
-    plan.pinning = normalizedState.pinning;
-  }
-  return plan;
-}
-
-// ../ui-grid/src/lib/grid/ui-grid.commands.ts
-function applyGridSortStateCommand(gridApi, setSortState, sortState) {
-  setSortState(sortState);
-  raiseGridSortChanged(gridApi, sortState);
-}
-function sortGridColumnCommand(gridApi, setSortState, columnName, direction) {
-  applyGridSortStateCommand(gridApi, setSortState, buildGridSortState(columnName, direction));
-}
-function updateGridFilterCommand(gridApi, updateFilters, getFilters, columnName, value) {
-  updateFilters((current) => ({
-    ...current,
-    [columnName]: value
-  }));
-  raiseGridFilterChanged(gridApi, getFilters());
-}
-function clearGridFiltersCommand(gridApi, setFilters) {
-  const nextFilters = {};
-  setFilters(nextFilters);
-  raiseGridFilterChanged(gridApi, nextFilters);
-}
-function clearGridGroupingCommand(gridApi, setGroupByColumns, shouldRaise = true) {
-  const nextGrouping = [];
-  setGroupByColumns(nextGrouping);
-  if (shouldRaise) {
-    raiseGridGroupingChanged(gridApi, nextGrouping);
-  }
-}
-function moveGridColumnCommand(gridApi, canMoveColumns, updateColumnOrder, fromIndex, toIndex) {
-  if (!canMoveColumns) {
-    return;
-  }
-  updateColumnOrder((current) => {
-    const next = moveGridColumnOrderState(current, fromIndex, toIndex);
-    raiseGridColumnOrderChanged(gridApi, next);
-    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);
-  raiseGridPaginationChanged(gridApi, nextPage, getEffectivePageSize());
-}
-function setGridPaginationPageSizeCommand(gridApi, setPageSize, setCurrentPage, pageSize) {
-  const nextPageSize = resolveGridPageSize(pageSize);
-  if (nextPageSize === null) {
-    return;
-  }
-  setPageSize(nextPageSize);
-  setCurrentPage(1);
-  raiseGridPaginationChanged(gridApi, 1, nextPageSize);
-}
-function restoreGridStateCommand(gridApi, state, access) {
-  const restorePlan = createGridRestoreMutationPlan(state);
-  if (restorePlan.columnOrder) {
-    access.setColumnOrder(restorePlan.columnOrder);
-  }
-  if (restorePlan.filters) {
-    access.setActiveFilters(restorePlan.filters);
-    raiseGridFilterChanged(gridApi, restorePlan.filters);
-  }
-  if (restorePlan.sort) {
-    access.setSortState(restorePlan.sort);
-  }
-  if (restorePlan.grouping) {
-    access.setGroupByColumns(restorePlan.grouping);
-    raiseGridGroupingChanged(gridApi, restorePlan.grouping);
-  }
-  if (restorePlan.pagination) {
-    access.setCurrentPage(restorePlan.pagination.currentPage);
-    access.setPageSize(restorePlan.pagination.pageSize);
-    raiseGridPaginationChanged(
-      gridApi,
-      restorePlan.pagination.currentPage,
-      access.getEffectivePageSize()
-    );
-  }
-  if (restorePlan.expandable) {
-    access.setExpandedRows(restorePlan.expandable);
-  }
-  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) {
-    return;
-  }
-  const { expanded, nextExpandedRows } = toggleGridRowExpanded(currentExpandedRows, rowId);
-  setExpandedRows(nextExpandedRows);
-  const gridRow = findRowById(rowId);
-  if (!gridRow) {
-    return;
-  }
-  gridRow.expanded = expanded;
-  raiseGridExpandableRowStateChanged(gridApi, gridRow, expanded);
-}
-function expandAllGridRowsCommand(buildRows, data, setExpandedRows) {
-  setExpandedRows(expandAllGridRows(buildRows(data)));
-}
-function collapseAllGridRowsCommand(setExpandedRows) {
-  setExpandedRows({});
-}
-function toggleGridTreeRowCommand(gridApi, currentExpandedTreeRows, rowId, setExpandedTreeRows, findRowById) {
-  const { expanded, nextExpandedTreeRows } = toggleGridTreeRowExpanded(
-    currentExpandedTreeRows,
-    rowId
-  );
-  setExpandedTreeRows(nextExpandedTreeRows);
-  const gridRow = findRowById(rowId);
-  if (gridRow) {
-    raiseGridTreeRowStateChanged(gridApi, gridRow, expanded);
-  }
-}
-function setGridTreeRowExpandedCommand(gridApi, currentExpandedTreeRows, rowId, expanded, setExpandedTreeRows, findRowById) {
-  setExpandedTreeRows(setGridTreeRowExpanded(currentExpandedTreeRows, rowId, expanded));
-  const gridRow = findRowById(rowId);
-  if (gridRow) {
-    raiseGridTreeRowStateChanged(gridApi, gridRow, expanded);
-  }
-}
-function expandAllGridTreeRowsCommand(buildRows, data, setExpandedTreeRows) {
-  setExpandedTreeRows(expandAllGridTreeRows(buildRows(data)));
-}
-function collapseAllGridTreeRowsCommand(setExpandedTreeRows) {
-  setExpandedTreeRows({});
-}
-function beginGridCellEditCommand(gridApi, access, row, column, currentValue, triggerEvent, initialValue) {
-  const nextEditSession = beginGridEditSession(
-    row.id,
-    column.name,
-    initialValue ?? stringifyGridEditorValue(currentValue)
-  );
-  access.setFocusedCell(nextEditSession.focusedCell);
-  access.setEditingCell(nextEditSession.editingCell);
-  access.setEditingValue(nextEditSession.editingValue);
-  raiseGridBeginCellEdit(gridApi, row.entity, column, triggerEvent);
-  return nextEditSession.editingCell;
-}
-function commitGridCellEditCommand(gridApi, access) {
-  const editingCell = access.getEditingCell();
-  if (!editingCell) {
-    return { committed: false };
-  }
-  const row = access.findRowById(editingCell.rowId);
-  const column = access.findColumnByName(editingCell.columnName);
-  if (!row || !column) {
-    access.setEditingCell(null);
-    return { committed: false };
-  }
-  const oldValue = getCellValue(row.entity, column);
-  const newValue = access.parseEditedValue(column, access.getEditingValue(), oldValue);
-  access.setCellValue(row.entity, column, newValue);
-  const clearedEditSession = clearGridEditSession();
-  access.setEditingCell(clearedEditSession.editingCell);
-  raiseGridAfterCellEdit(gridApi, row.entity, column, newValue, oldValue);
-  access.setEditingValue(clearedEditSession.editingValue);
-  return {
-    committed: true,
-    focusTarget: { rowId: row.id, columnName: column.name },
-    row,
-    column
-  };
-}
-function cancelGridCellEditCommand(gridApi, access) {
-  const editingCell = access.getEditingCell();
-  if (!editingCell) {
-    return {};
-  }
-  const row = access.findRowById(editingCell.rowId);
-  const column = access.findColumnByName(editingCell.columnName);
-  const clearedEditSession = clearGridEditSession();
-  access.setEditingCell(clearedEditSession.editingCell);
-  access.setEditingValue(clearedEditSession.editingValue);
-  if (!row || !column) {
-    return {};
-  }
-  raiseGridCancelCellEdit(gridApi, row.entity, column);
-  return { focusTarget: editingCell };
-}
-function maybeRequestInfiniteScrollCommand(gridApi, access) {
-  if (!access.enabled || !access.virtualizationEnabled) {
-    return;
-  }
-  const { request, nextState } = maybeRequestInfiniteScrollData({
-    state: access.state,
-    startIndex: access.startIndex,
-    visibleRows: access.visibleRows,
-    viewportRows: access.viewportRows,
-    threshold: access.threshold
-  });
-  if (request === "top" || request === "bottom") {
-    access.setState(nextState);
-    raiseGridNeedMoreData(gridApi, request);
-  }
-}
-function completeGridInfiniteScrollDataLoadCommand(currentState, setState, scrollUp, scrollDown) {
-  setState(completeInfiniteScrollDataLoad(currentState, scrollUp, scrollDown));
-  return Promise.resolve();
-}
-function resetGridInfiniteScrollCommand(setState, scrollUp, scrollDown) {
-  setState(resetInfiniteScrollState(scrollUp, scrollDown));
-}
-function saveGridInfiniteScrollPercentageCommand(currentState, visibleRows, setState) {
-  setState(saveInfiniteScrollPercentage(currentState, visibleRows));
-}
-function setGridInfiniteScrollDirectionsCommand(currentState, setState, scrollUp, scrollDown) {
-  setState(setInfiniteScrollDirectionsState(currentState, scrollUp, scrollDown));
-}
-
-// ../ui-grid/src/lib/grid/ui-grid.host.ts
-function observeGridHostSize(hostElement, onSizeChange) {
-  if (typeof ResizeObserver === "undefined") {
-    return null;
-  }
-  const observer = new ResizeObserver((entries) => {
-    const entry = entries[0];
-    if (!entry) {
-      return;
-    }
-    onSizeChange({
-      height: Math.round(entry.contentRect.height),
-      width: Math.round(entry.contentRect.width)
-    });
-  });
-  observer.observe(hostElement);
-  return observer;
-}
-function downloadGridCsvFile(csv, filename) {
-  if (typeof Blob === "undefined" || typeof URL === "undefined" || typeof document === "undefined") {
-    return;
-  }
-  const blob = new Blob([csv], { type: "text/csv;charset=utf-8" });
-  const url = URL.createObjectURL(blob);
-  const link = document.createElement("a");
-  link.href = url;
-  link.download = filename;
-  link.click();
-  URL.revokeObjectURL(url);
-}
-
-// src/useGridState.ts
+var import_ui_grid2 = require("@ornery/ui-grid");
 function escapeCssSelectorValue(value) {
   const nativeEscape = globalThis.CSS?.escape;
   if (typeof nativeEscape === "function") {
@@ -772,7 +115,7 @@ function useGridState(options, onRegisterApi) {
   const [hiddenRowReasons, setHiddenRowReasons] = (0, import_react.useState)({});
   const [sortState, setSortState] = (0, import_react.useState)({
     columnName: null,
-    direction: import_ui_grid4.SORT_DIRECTIONS.none
+    direction: import_ui_grid2.SORT_DIRECTIONS.none
   });
   const [focusedCell, setFocusedCell] = (0, import_react.useState)(null);
   const [editingCell, setEditingCell] = (0, import_react.useState)(null);
@@ -833,12 +176,21 @@ function useGridState(options, onRegisterApi) {
   optionsRef.current = options;
   const rowSize = options.rowHeight ?? 44;
   const visibleColumns = (0, import_react.useMemo)(() => {
-    return orderVisibleColumns(options.columnDefs, columnOrder);
-  }, [options.columnDefs, columnOrder]);
+    const orderedColumns = orderVisibleColumns(options.columnDefs, columnOrder);
+    const pinnedEntries = Object.entries(pinnedColumns);
+    if (pinnedEntries.length === 0) {
+      return orderedColumns;
+    }
+    const columnByName = new Map(orderedColumns.map((column) => [column.name, column]));
+    const pinnedLeft = pinnedEntries.filter(([, direction]) => direction === "left").map(([columnName]) => columnByName.get(columnName)).filter((column) => column !== void 0);
+    const pinnedRight = pinnedEntries.filter(([, direction]) => direction === "right").map(([columnName]) => columnByName.get(columnName)).filter((column) => column !== void 0);
+    const centerColumns = orderedColumns.filter((column) => pinnedColumns[column.name] === void 0);
+    return [...pinnedLeft, ...centerColumns, ...pinnedRight];
+  }, [options.columnDefs, columnOrder, pinnedColumns]);
   const visibleColumnsRef = (0, import_react.useRef)(visibleColumns);
   visibleColumnsRef.current = visibleColumns;
   const pipeline = (0, import_react.useMemo)(() => {
-    return import_ui_grid4.defaultGridEngine.buildPipeline({
+    return import_ui_grid2.defaultGridEngine.buildPipeline({
       options,
       columns: visibleColumns,
       activeFilters,
@@ -868,28 +220,28 @@ function useGridState(options, onRegisterApi) {
   ]);
   const pipelineRef = (0, import_react.useRef)(pipeline);
   pipelineRef.current = pipeline;
-  const labels = (0, import_react.useMemo)(() => (0, import_ui_grid4.resolveGridLabels)(options.labels), [options.labels]);
+  const labels = (0, import_react.useMemo)(() => (0, import_ui_grid2.resolveGridLabels)(options.labels), [options.labels]);
   const gridTemplateColumns = (0, import_react.useMemo)(
     () => buildGridTemplateColumns(visibleColumns),
     [visibleColumns]
   );
   const isPinningEnabledFn = (0, import_react.useCallback)(() => {
-    return isPinningEnabled(optionsRef.current);
+    return (0, import_ui_grid2.isPinningEnabled)(optionsRef.current);
   }, []);
   const isColumnPinnableFn = (0, import_react.useCallback)((column) => {
-    return isColumnPinnable(optionsRef.current, column);
+    return (0, import_ui_grid2.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);
+    return (0, import_ui_grid2.computePinnedOffset)(visibleColumnsRef.current, pinnedColumnsRef.current, column);
   }, []);
   const resolveRowId = (0, import_react.useCallback)((row) => {
-    return (0, import_ui_grid4.resolveGridRowId)(optionsRef.current, row);
+    return (0, import_ui_grid2.resolveGridRowId)(optionsRef.current, row);
   }, []);
   const buildRowsFromData = (0, import_react.useCallback)((data) => {
-    return (0, import_ui_grid4.buildGridRows)(
+    return (0, import_ui_grid2.buildGridRows)(
       { ...optionsRef.current, data },
       optionsRef.current.rowHeight ?? 44,
       hiddenRowReasonsRef.current,
@@ -898,19 +250,19 @@ function useGridState(options, onRegisterApi) {
   }, []);
   const findRowById = (0, import_react.useCallback)(
     (rowId) => {
-      return (0, import_ui_grid4.findGridRowById)(buildRowsFromData(optionsRef.current.data), rowId);
+      return (0, import_ui_grid2.findGridRowById)(buildRowsFromData(optionsRef.current.data), rowId);
     },
     [buildRowsFromData]
   );
   const canExpandRowsFn = (0, import_react.useCallback)(() => {
-    return import_ui_grid4.FEATURE_EXPANDABLE && (0, import_ui_grid4.canGridExpandRows)(optionsRef.current);
+    return import_ui_grid2.FEATURE_EXPANDABLE && (0, import_ui_grid2.canGridExpandRows)(optionsRef.current);
   }, []);
   const effectivePageSizeFn = (0, import_react.useCallback)((totalItems) => {
-    return (0, import_ui_grid4.getEffectivePageSize)(optionsRef.current, pageSizeRef.current, totalItems);
+    return (0, import_ui_grid2.getEffectivePageSize)(optionsRef.current, pageSizeRef.current, totalItems);
   }, []);
   const getCurrentPageValueFn = (0, import_react.useCallback)((totalItems) => {
     const ti = totalItems ?? pipelineRef.current.totalItems;
-    return (0, import_ui_grid4.getCurrentPageValue)(
+    return (0, import_ui_grid2.getCurrentPageValue)(
       optionsRef.current,
       currentPageRef.current,
       ti,
@@ -919,11 +271,11 @@ function useGridState(options, onRegisterApi) {
   }, []);
   const getTotalPagesValueFn = (0, import_react.useCallback)((totalItems) => {
     const ti = totalItems ?? pipelineRef.current.totalItems;
-    return (0, import_ui_grid4.getTotalPagesValue)(optionsRef.current, ti, pageSizeRef.current);
+    return (0, import_ui_grid2.getTotalPagesValue)(optionsRef.current, ti, pageSizeRef.current);
   }, []);
   const getFirstRowIndexValueFn = (0, import_react.useCallback)((totalItems) => {
     const ti = totalItems ?? pipelineRef.current.totalItems;
-    return (0, import_ui_grid4.getFirstRowIndexValue)(
+    return (0, import_ui_grid2.getFirstRowIndexValue)(
       optionsRef.current,
       currentPageRef.current,
       ti,
@@ -932,7 +284,7 @@ function useGridState(options, onRegisterApi) {
   }, []);
   const getLastRowIndexValueFn = (0, import_react.useCallback)((totalItems) => {
     const ti = totalItems ?? pipelineRef.current.totalItems;
-    return (0, import_ui_grid4.getLastRowIndexValue)(
+    return (0, import_ui_grid2.getLastRowIndexValue)(
       optionsRef.current,
       currentPageRef.current,
       ti,
@@ -941,7 +293,7 @@ function useGridState(options, onRegisterApi) {
   }, []);
   const isCellEditable = (0, import_react.useCallback)(
     (row, column, triggerEvent) => {
-      if (!import_ui_grid4.FEATURE_CELL_EDIT) return false;
+      if (!import_ui_grid2.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;
@@ -1006,12 +358,12 @@ function useGridState(options, onRegisterApi) {
       refresh: () => setActiveFilters((current) => ({ ...current })),
       getVisibleRows: () => pipelineRef.current.visibleRows,
       setRowInvisible: (row, reason = "user") => {
-        const rowId = (0, import_ui_grid4.resolveGridRowId)(optionsRef.current, row);
-        setHiddenRowReasons((current) => (0, import_ui_grid4.addGridRowInvisibleReason)(current, rowId, reason));
+        const rowId = (0, import_ui_grid2.resolveGridRowId)(optionsRef.current, row);
+        setHiddenRowReasons((current) => (0, import_ui_grid2.addGridRowInvisibleReason)(current, rowId, reason));
       },
       clearRowInvisible: (row, reason = "user") => {
-        const rowId = (0, import_ui_grid4.resolveGridRowId)(optionsRef.current, row);
-        setHiddenRowReasons((current) => (0, import_ui_grid4.clearGridRowInvisibleReason)(current, rowId, reason));
+        const rowId = (0, import_ui_grid2.resolveGridRowId)(optionsRef.current, row);
+        setHiddenRowReasons((current) => (0, import_ui_grid2.clearGridRowInvisibleReason)(current, rowId, reason));
       },
       setFilter: (columnName, value) => {
         setActiveFilters((current) => {
@@ -1028,19 +380,19 @@ function useGridState(options, onRegisterApi) {
         queueMicrotask(() => gridApiRef.current.core.raise.filterChanged(nextFilters));
       },
       sortColumn: (columnName, direction) => {
-        sortGridColumnCommand(gridApiRef.current, (s) => setSortState(s), columnName, direction);
+        (0, import_ui_grid2.sortGridColumnCommand)(gridApiRef.current, (s) => setSortState(s), columnName, direction);
       },
       moveColumn: (fromIndex, toIndex) => {
-        moveGridColumnCommand(
+        (0, import_ui_grid2.moveGridColumnCommand)(
           gridApiRef.current,
-          import_ui_grid4.FEATURE_COLUMN_MOVING && optionsRef.current.enableColumnMoving === true,
+          import_ui_grid2.FEATURE_COLUMN_MOVING && optionsRef.current.enableColumnMoving === true,
           (updater) => setColumnOrder((current) => updater(current)),
           fromIndex,
           toIndex
         );
       },
       toggleGrouping: (columnName) => {
-        if (!(import_ui_grid4.FEATURE_GROUPING && (0, import_ui_grid4.isGridGroupingEnabled)(optionsRef.current))) return;
+        if (!(import_ui_grid2.FEATURE_GROUPING && (0, import_ui_grid2.isGridGroupingEnabled)(optionsRef.current))) return;
         const current = groupByColumnsRef.current;
         const next = current.includes(columnName) ? current.filter((n) => n !== columnName) : [...current, columnName];
         groupByColumnsRef.current = next;
@@ -1048,7 +400,7 @@ function useGridState(options, onRegisterApi) {
         gridApiRef.current.core.raise.groupingChanged(next);
       },
       clearGrouping: () => {
-        clearGridGroupingCommand(
+        (0, import_ui_grid2.clearGridGroupingCommand)(
           gridApiRef.current,
           (grouping) => setGroupByColumns(grouping),
           false
@@ -1071,30 +423,30 @@ function useGridState(options, onRegisterApi) {
       toggleRowExpansion: (row) => toggleRowExpansionByRefFn(row),
       expandAllRows: () => expandAllRowsFn(),
       collapseAllRows: () => {
-        collapseAllGridRowsCommand((e) => setExpandedRows(e));
+        (0, import_ui_grid2.collapseAllGridRowsCommand)((e) => setExpandedRows(e));
       },
       toggleAllRows: () => toggleAllRowsFn(),
       treeExpandAllRows: () => {
-        expandAllGridTreeRowsCommand(
+        (0, import_ui_grid2.expandAllGridTreeRowsCommand)(
           (data) => buildRowsFromData(data),
           optionsRef.current.data,
           (e) => setExpandedTreeRows(e)
         );
       },
       treeCollapseAllRows: () => {
-        collapseAllGridTreeRowsCommand((e) => setExpandedTreeRows(e));
+        (0, import_ui_grid2.collapseAllGridTreeRowsCommand)((e) => setExpandedTreeRows(e));
       },
       treeToggleRow: (row) => toggleTreeRowByRefFn(row),
       treeExpandRow: (row) => expandTreeRowByRefFn(row),
       treeCollapseRow: (row) => collapseTreeRowByRefFn(row),
       treeGetRowChildren: (row) => {
-        const rowId = (0, import_ui_grid4.resolveGridRowId)(optionsRef.current, row);
+        const rowId = (0, import_ui_grid2.resolveGridRowId)(optionsRef.current, row);
         return buildRowsFromData(optionsRef.current.data).filter((r) => r.parentId === rowId);
       },
       treeGetState: () => expandedTreeRowsRef.current,
       treeSetState: (state) => setExpandedTreeRows({ ...state }),
       infiniteScrollDataLoaded: (scrollUp, scrollDown) => {
-        return completeGridInfiniteScrollDataLoadCommand(
+        return (0, import_ui_grid2.completeGridInfiniteScrollDataLoadCommand)(
           infiniteScrollStateRef.current,
           (s) => setInfiniteScrollState(s),
           scrollUp ?? infiniteScrollStateRef.current.scrollUp,
@@ -1102,35 +454,35 @@ function useGridState(options, onRegisterApi) {
         );
       },
       infiniteScrollReset: (scrollUp, scrollDown) => {
-        resetGridInfiniteScrollCommand(
+        (0, import_ui_grid2.resetGridInfiniteScrollCommand)(
           (s) => setInfiniteScrollState(s),
           scrollUp ?? infiniteScrollStateRef.current.scrollUp,
           scrollDown ?? infiniteScrollStateRef.current.scrollDown
         );
       },
       infiniteScrollSaveScrollPercentage: () => {
-        saveGridInfiniteScrollPercentageCommand(
+        (0, import_ui_grid2.saveGridInfiniteScrollPercentageCommand)(
           infiniteScrollStateRef.current,
           pipelineRef.current.visibleRows.length,
           (s) => setInfiniteScrollState(s)
         );
       },
       infiniteScrollDataRemovedTop: (scrollUp, scrollDown) => {
-        resetGridInfiniteScrollCommand(
+        (0, import_ui_grid2.resetGridInfiniteScrollCommand)(
           (s) => setInfiniteScrollState(s),
           scrollUp ?? infiniteScrollStateRef.current.scrollUp,
           scrollDown ?? infiniteScrollStateRef.current.scrollDown
         );
       },
       infiniteScrollDataRemovedBottom: (scrollUp, scrollDown) => {
-        resetGridInfiniteScrollCommand(
+        (0, import_ui_grid2.resetGridInfiniteScrollCommand)(
           (s) => setInfiniteScrollState(s),
           scrollUp ?? infiniteScrollStateRef.current.scrollUp,
           scrollDown ?? infiniteScrollStateRef.current.scrollDown
         );
       },
       infiniteScrollSetDirections: (scrollUp, scrollDown) => {
-        setGridInfiniteScrollDirectionsCommand(
+        (0, import_ui_grid2.setGridInfiniteScrollDirectionsCommand)(
           infiniteScrollStateRef.current,
           (s) => setInfiniteScrollState(s),
           scrollUp,
@@ -1138,7 +490,7 @@ function useGridState(options, onRegisterApi) {
         );
       },
       saveState: () => {
-        return (0, import_ui_grid4.buildGridSavedState)({
+        return (0, import_ui_grid2.buildGridSavedState)({
           columnOrder: columnOrderRef.current,
           activeFilters: activeFiltersRef.current,
           sortState: sortStateRef.current,
@@ -1152,7 +504,7 @@ function useGridState(options, onRegisterApi) {
         });
       },
       restoreState: (state) => {
-        restoreGridStateCommand(gridApiRef.current, state, {
+        (0, import_ui_grid2.restoreGridStateCommand)(gridApiRef.current, state, {
           setColumnOrder: (order) => setColumnOrder(order),
           setActiveFilters: (filters) => setActiveFilters(filters),
           setSortState: (s) => setSortState(s),
@@ -1166,8 +518,8 @@ function useGridState(options, onRegisterApi) {
         });
       },
       beginCellEdit: (row, columnName, triggerEvent) => {
-        const rowId = (0, import_ui_grid4.resolveGridRowId)(optionsRef.current, row);
-        const gridRow = (0, import_ui_grid4.findGridRowById)(buildRowsFromData(optionsRef.current.data), rowId);
+        const rowId = (0, import_ui_grid2.resolveGridRowId)(optionsRef.current, row);
+        const gridRow = (0, import_ui_grid2.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);
@@ -1176,7 +528,7 @@ function useGridState(options, onRegisterApi) {
       cancelCellEdit: () => cancelCellEditFn(),
       getEditingCell: () => editingCellRef.current,
       pinColumn: (columnName, direction) => {
-        pinGridColumnCommand(
+        (0, import_ui_grid2.pinGridColumnCommand)(
           gridApiRef.current,
           isPinningEnabledFn(),
           (v) => setPinnedColumns(v),
@@ -1186,12 +538,12 @@ function useGridState(options, onRegisterApi) {
         );
       }
     };
-    gridApiRef.current = (0, import_ui_grid4.createGridApi)(bindings);
+    gridApiRef.current = (0, import_ui_grid2.createGridApi)(bindings);
   }
   const gridApi = gridApiRef.current;
   const seekPageFn = (0, import_react.useCallback)(
     (page) => {
-      seekGridPaginationCommand(
+      (0, import_ui_grid2.seekGridPaginationCommand)(
         gridApiRef.current,
         (nextPage) => setCurrentPage(nextPage),
         () => getTotalPagesValueFn(),
@@ -1204,7 +556,7 @@ function useGridState(options, onRegisterApi) {
   const togglePinFn = (0, import_react.useCallback)((column) => {
     const current = pinnedColumnsRef.current[column.name];
     const next = current === "left" ? "right" : current === "right" ? "none" : "left";
-    pinGridColumnCommand(
+    (0, import_ui_grid2.pinGridColumnCommand)(
       gridApiRef.current,
       isPinningEnabledFn(),
       (v) => setPinnedColumns(v),
@@ -1214,7 +566,7 @@ function useGridState(options, onRegisterApi) {
     );
   }, []);
   const setPaginationPageSizeFn = (0, import_react.useCallback)((ps) => {
-    setGridPaginationPageSizeCommand(
+    (0, import_ui_grid2.setGridPaginationPageSizeCommand)(
       gridApiRef.current,
       (nextPageSize) => setPageSize(nextPageSize),
       (nextPage) => setCurrentPage(nextPage),
@@ -1223,83 +575,83 @@ function useGridState(options, onRegisterApi) {
   }, []);
   const toggleRowExpansionByRefFn = (0, import_react.useCallback)(
     (row) => {
-      const rowId = (0, import_ui_grid4.resolveGridRowId)(optionsRef.current, row);
-      toggleGridRowExpansionCommand(
+      const rowId = (0, import_ui_grid2.resolveGridRowId)(optionsRef.current, row);
+      (0, import_ui_grid2.toggleGridRowExpansionCommand)(
         gridApiRef.current,
-        import_ui_grid4.FEATURE_EXPANDABLE && (0, import_ui_grid4.canGridExpandRows)(optionsRef.current),
+        import_ui_grid2.FEATURE_EXPANDABLE && (0, import_ui_grid2.canGridExpandRows)(optionsRef.current),
         expandedRowsRef.current,
         rowId,
         (e) => setExpandedRows(e),
-        (resolvedRowId) => (0, import_ui_grid4.findGridRowById)(buildRowsFromData(optionsRef.current.data), resolvedRowId)
+        (resolvedRowId) => (0, import_ui_grid2.findGridRowById)(buildRowsFromData(optionsRef.current.data), resolvedRowId)
       );
     },
     [buildRowsFromData]
   );
   const expandAllRowsFn = (0, import_react.useCallback)(() => {
-    if (!(0, import_ui_grid4.canGridExpandRows)(optionsRef.current)) return;
-    expandAllGridRowsCommand(
+    if (!(0, import_ui_grid2.canGridExpandRows)(optionsRef.current)) return;
+    (0, import_ui_grid2.expandAllGridRowsCommand)(
       (data) => buildRowsFromData(data),
       optionsRef.current.data,
       (e) => setExpandedRows(e)
     );
   }, [buildRowsFromData]);
   const toggleAllRowsFn = (0, import_react.useCallback)(() => {
-    const allExpanded = (0, import_ui_grid4.areAllGridRowsExpanded)(
+    const allExpanded = (0, import_ui_grid2.areAllGridRowsExpanded)(
       buildRowsFromData(optionsRef.current.data),
       expandedRowsRef.current
     );
     if (allExpanded) {
-      collapseAllGridRowsCommand((e) => setExpandedRows(e));
+      (0, import_ui_grid2.collapseAllGridRowsCommand)((e) => setExpandedRows(e));
     } else {
       expandAllRowsFn();
     }
   }, [buildRowsFromData, expandAllRowsFn]);
   const toggleTreeRowByRefFn = (0, import_react.useCallback)(
     (row) => {
-      const rowId = (0, import_ui_grid4.resolveGridRowId)(optionsRef.current, row);
-      toggleGridTreeRowCommand(
+      const rowId = (0, import_ui_grid2.resolveGridRowId)(optionsRef.current, row);
+      (0, import_ui_grid2.toggleGridTreeRowCommand)(
         gridApiRef.current,
         expandedTreeRowsRef.current,
         rowId,
         (e) => setExpandedTreeRows(e),
-        (resolvedRowId) => (0, import_ui_grid4.findGridRowById)(buildRowsFromData(optionsRef.current.data), resolvedRowId)
+        (resolvedRowId) => (0, import_ui_grid2.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(
+      const rowId = (0, import_ui_grid2.resolveGridRowId)(optionsRef.current, row);
+      (0, import_ui_grid2.setGridTreeRowExpandedCommand)(
         gridApiRef.current,
         expandedTreeRowsRef.current,
         rowId,
         true,
         (e) => setExpandedTreeRows(e),
-        (resolvedRowId) => (0, import_ui_grid4.findGridRowById)(buildRowsFromData(optionsRef.current.data), resolvedRowId)
+        (resolvedRowId) => (0, import_ui_grid2.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(
+      const rowId = (0, import_ui_grid2.resolveGridRowId)(optionsRef.current, row);
+      (0, import_ui_grid2.setGridTreeRowExpandedCommand)(
         gridApiRef.current,
         expandedTreeRowsRef.current,
         rowId,
         false,
         (e) => setExpandedTreeRows(e),
-        (resolvedRowId) => (0, import_ui_grid4.findGridRowById)(buildRowsFromData(optionsRef.current.data), resolvedRowId)
+        (resolvedRowId) => (0, import_ui_grid2.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 currentValue = (0, import_ui_grid2.getCellValue)(row.entity, column);
       const focusToken = ++editorFocusTokenRef.current;
-      const ec = beginGridCellEditCommand(
+      const ec = (0, import_ui_grid2.beginGridCellEditCommand)(
         gridApiRef.current,
         {
           setFocusedCell: (fc) => setFocusedCell(fc),
@@ -1320,17 +672,17 @@ function useGridState(options, onRegisterApi) {
   );
   const commitCellEditFn = (0, import_react.useCallback)(
     (direction, restoreFocus = true) => {
-      const result = commitGridCellEditCommand(gridApiRef.current, {
+      const result = (0, import_ui_grid2.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),
+        findRowById: (rowId) => (0, import_ui_grid2.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),
+        parseEditedValue: (column, value, oldValue) => (0, import_ui_grid2.parseGridEditedValue)(column, value, oldValue),
         setCellValue: (rowEntity, column, value) => {
           const fieldPath = column.editModelField ?? column.field ?? column.name;
-          (0, import_ui_grid4.setPathValue)(rowEntity, fieldPath, value);
+          (0, import_ui_grid2.setPathValue)(rowEntity, fieldPath, value);
         }
       });
       if (!result.committed || !result.row || !result.column || !result.focusTarget) return;
@@ -1346,11 +698,11 @@ function useGridState(options, onRegisterApi) {
   );
   const cancelCellEditFn = (0, import_react.useCallback)(() => {
     const hadEditingCell = editingCellRef.current !== null;
-    const result = cancelGridCellEditCommand(gridApiRef.current, {
+    const result = (0, import_ui_grid2.cancelGridCellEditCommand)(gridApiRef.current, {
       getEditingCell: () => editingCellRef.current,
       setEditingCell: (ec) => setEditingCell(ec),
       setEditingValue: (ev) => setEditingValue(ev),
-      findRowById: (rowId) => (0, import_ui_grid4.findGridRowById)(buildRowsFromData(optionsRef.current.data), rowId),
+      findRowById: (rowId) => (0, import_ui_grid2.findGridRowById)(buildRowsFromData(optionsRef.current.data), rowId),
       findColumnByName: (columnName) => visibleColumnsRef.current.find((c) => c.name === columnName)
     });
     if (!hadEditingCell) return;
@@ -1359,7 +711,7 @@ function useGridState(options, onRegisterApi) {
   }, [buildRowsFromData, focusRenderedCell]);
   const moveFocusFn = (0, import_react.useCallback)(
     (row, column, direction, triggerEvent) => {
-      const nextCell = (0, import_ui_grid4.findNextGridCell)({
+      const nextCell = (0, import_ui_grid2.findNextGridCell)({
         rows: pipelineRef.current.visibleRows,
         columns: visibleColumnsRef.current,
         rowId: row.id,
@@ -1382,7 +734,7 @@ function useGridState(options, onRegisterApi) {
       optionsRef.current.benchmark?.iterations
     );
     const startedAt = performance.now();
-    let lastResult = import_ui_grid4.defaultGridEngine.buildPipeline({
+    let lastResult = import_ui_grid2.defaultGridEngine.buildPipeline({
       options: optionsRef.current,
       columns: visibleColumnsRef.current,
       activeFilters: activeFiltersRef.current,
@@ -1397,7 +749,7 @@ function useGridState(options, onRegisterApi) {
       rowSize: optionsRef.current.rowHeight ?? 44
     });
     for (let i = 1; i < safeIterations; i++) {
-      lastResult = import_ui_grid4.defaultGridEngine.buildPipeline({
+      lastResult = import_ui_grid2.defaultGridEngine.buildPipeline({
         options: optionsRef.current,
         columns: visibleColumnsRef.current,
         activeFilters: activeFiltersRef.current,
@@ -1421,14 +773,14 @@ function useGridState(options, onRegisterApi) {
       renderedItems: lastResult.displayItems.length
     };
     setBenchmarkResult(result);
-    raiseGridBenchmarkComplete(gridApiRef.current, result);
+    (0, import_ui_grid2.raiseGridBenchmarkComplete)(gridApiRef.current, result);
     return result;
   }, []);
   const exportCsvFn = (0, import_react.useCallback)(() => {
-    if (!import_ui_grid4.FEATURE_CSV_EXPORT) return;
+    if (!import_ui_grid2.FEATURE_CSV_EXPORT) return;
     const columns = visibleColumnsRef.current;
-    const csv = (0, import_ui_grid4.exportCsvRows)(columns, pipelineRef.current.visibleRows);
-    downloadGridCsvFile(csv, `${(0, import_ui_grid4.sanitizeDownloadFilename)(optionsRef.current.id)}.csv`);
+    const csv = (0, import_ui_grid2.exportCsvRows)(columns, pipelineRef.current.visibleRows);
+    (0, import_ui_grid2.downloadGridCsvFile)(csv, `${(0, import_ui_grid2.sanitizeDownloadFilename)(optionsRef.current.id)}.csv`);
   }, []);
   (0, import_react.useEffect)(() => {
     if (initializedGridIdRef.current === options.id) return;
@@ -1443,9 +795,9 @@ function useGridState(options, onRegisterApi) {
     setExpandedTreeRows({});
     setColumnOrder(options.columnDefs.map((column) => column.name));
     setGroupByColumns(options.grouping?.groupBy ?? []);
-    setPinnedColumns(buildInitialPinnedState(options.columnDefs));
+    setPinnedColumns((0, import_ui_grid2.buildInitialPinnedState)(options.columnDefs));
     setCurrentPage(options.paginationCurrentPage ?? 1);
-    setPageSize((0, import_ui_grid4.getEffectivePageSize)(options, 0, options.data.length));
+    setPageSize((0, import_ui_grid2.getEffectivePageSize)(options, 0, options.data.length));
     setInfiniteScrollState({
       scrollUp: options.infiniteScrollUp === true,
       scrollDown: options.infiniteScrollDown !== false,
@@ -1457,28 +809,28 @@ function useGridState(options, onRegisterApi) {
     );
     setSortState({
       columnName: initialSort?.name ?? null,
-      direction: initialSort?.sort?.direction ?? import_ui_grid4.SORT_DIRECTIONS.none
+      direction: initialSort?.sort?.direction ?? import_ui_grid2.SORT_DIRECTIONS.none
     });
     onRegisterApi?.(gridApi);
-    raiseGridRenderingComplete(gridApi);
+    (0, import_ui_grid2.raiseGridRenderingComplete)(gridApi);
   }, [options.id]);
   (0, import_react.useEffect)(() => {
-    raiseGridRowsRendered(gridApi, pipeline.visibleRows);
-    raiseGridRowsVisibleChanged(gridApi, pipeline.visibleRows);
+    (0, import_ui_grid2.raiseGridRowsRendered)(gridApi, pipeline.visibleRows);
+    (0, import_ui_grid2.raiseGridRowsVisibleChanged)(gridApi, pipeline.visibleRows);
     const newHeight = pipeline.displayItems.length * rowSize;
     if (newHeight !== lastCanvasHeightRef.current) {
-      raiseGridCanvasHeightChanged(gridApi, lastCanvasHeightRef.current, newHeight);
+      (0, import_ui_grid2.raiseGridCanvasHeightChanged)(gridApi, lastCanvasHeightRef.current, newHeight);
       lastCanvasHeightRef.current = newHeight;
     }
   }, [pipeline, gridApi, rowSize]);
   (0, import_react.useEffect)(() => {
-    if (!import_ui_grid4.FEATURE_AUTO_RESIZE || !options.enableAutoResize) return;
+    if (!import_ui_grid2.FEATURE_AUTO_RESIZE || !options.enableAutoResize) return;
     const container = gridContainerRef.current;
     if (!container) return;
-    const observer = observeGridHostSize(container, ({ height: nextHeight, width: nextWidth }) => {
+    const observer = (0, import_ui_grid2.observeGridHostSize)(container, ({ height: nextHeight, width: nextWidth }) => {
       if (nextHeight === lastGridHeightRef.current && nextWidth === lastGridWidthRef.current)
         return;
-      raiseGridDimensionChanged(
+      (0, import_ui_grid2.raiseGridDimensionChanged)(
         gridApi,
         lastGridHeightRef.current,
         lastGridWidthRef.current,
@@ -1503,7 +855,7 @@ function useGridState(options, onRegisterApi) {
   const paginationTotalPages = getTotalPagesValueFn();
   const paginationSelectedPageSize = effectivePageSizeFn(pipeline.totalItems);
   const viewportHeightPx = computeViewportHeightPx(options.viewportHeight, autoViewportHeight);
-  const headerLabelFn = (0, import_react.useCallback)((column) => (0, import_ui_grid4.headerLabel)(column), []);
+  const headerLabelFn = (0, import_react.useCallback)((column) => (0, import_ui_grid2.headerLabel)(column), []);
   const isGroupItemFn = (0, import_react.useCallback)(
     (item) => item.kind === "group",
     []
@@ -1518,24 +870,24 @@ function useGridState(options, onRegisterApi) {
     []
   );
   const sortDirectionFn = (0, import_react.useCallback)((column) => {
-    return sortStateRef.current.columnName === column.name ? sortStateRef.current.direction : import_ui_grid4.SORT_DIRECTIONS.none;
+    return sortStateRef.current.columnName === column.name ? sortStateRef.current.direction : import_ui_grid2.SORT_DIRECTIONS.none;
   }, []);
   const sortButtonLabelFn = (0, import_react.useCallback)(
     (column) => {
-      return (0, import_ui_grid4.gridSortButtonLabel)(sortDirectionFn(column), labels);
+      return (0, import_ui_grid2.gridSortButtonLabel)(sortDirectionFn(column), labels);
     },
     [labels, sortDirectionFn]
   );
   const sortAriaSortFn = (0, import_react.useCallback)(
     (column) => {
-      return (0, import_ui_grid4.gridSortAriaSort)(sortDirectionFn(column));
+      return (0, import_ui_grid2.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),
+      return (0, import_ui_grid2.gridGroupingButtonLabel)(
+        (0, import_ui_grid2.isGridColumnGrouped)(groupByColumnsRef.current, column),
         labels
       );
     },
@@ -1546,39 +898,39 @@ function useGridState(options, onRegisterApi) {
   }, []);
   const filterPlaceholderFn = (0, import_react.useCallback)(
     (column) => {
-      return (0, import_ui_grid4.gridFilterPlaceholder)((0, import_ui_grid4.isGridColumnFilterable)(optionsRef.current, column), labels);
+      return (0, import_ui_grid2.gridFilterPlaceholder)((0, import_ui_grid2.isGridColumnFilterable)(optionsRef.current, column), labels);
     },
     [labels]
   );
   const isFilterInputDisabledFn = (0, import_react.useCallback)((column) => {
-    return !(0, import_ui_grid4.isGridColumnFilterable)(optionsRef.current, column);
+    return !(0, import_ui_grid2.isGridColumnFilterable)(optionsRef.current, column);
   }, []);
   const groupDisclosureLabelFn = (0, import_react.useCallback)(
     (item) => {
-      return (0, import_ui_grid4.gridGroupDisclosureLabel)(item.collapsed, labels);
+      return (0, import_ui_grid2.gridGroupDisclosureLabel)(item.collapsed, labels);
     },
     [labels]
   );
   const cellContextFn = (0, import_react.useCallback)(
     (row, column) => {
-      return (0, import_ui_grid4.buildGridCellContext)(row, column);
+      return (0, import_ui_grid2.buildGridCellContext)(row, column);
     },
     []
   );
   const displayValueFn = (0, import_react.useCallback)(
     (row, column) => {
-      return (0, import_ui_grid4.formatGridCellDisplayValue)(cellContextFn(row, column));
+      return (0, import_ui_grid2.formatGridCellDisplayValue)(cellContextFn(row, column));
     },
     [cellContextFn]
   );
   const isFocusedCellFn = (0, import_react.useCallback)((row, column) => {
-    return (0, import_ui_grid4.isGridCellPosition)(focusedCellRef.current, row.id, column.name);
+    return (0, import_ui_grid2.isGridCellPosition)(focusedCellRef.current, row.id, column.name);
   }, []);
   const isEditingCellFn = (0, import_react.useCallback)((row, column) => {
-    return (0, import_ui_grid4.isGridCellPosition)(editingCellRef.current, row.id, column.name);
+    return (0, import_ui_grid2.isGridCellPosition)(editingCellRef.current, row.id, column.name);
   }, []);
   const editorInputTypeFn = (0, import_react.useCallback)((column) => {
-    return (0, import_ui_grid4.gridEditorInputType)(column);
+    return (0, import_ui_grid2.gridEditorInputType)(column);
   }, []);
   const expandedContextFn = (0, import_react.useCallback)(
     (row) => {
@@ -1592,42 +944,42 @@ function useGridState(options, onRegisterApi) {
     },
     []
   );
-  const columnWidthFn = (0, import_react.useCallback)((column) => (0, import_ui_grid4.gridColumnWidth)(column), []);
+  const columnWidthFn = (0, import_react.useCallback)((column) => (0, import_ui_grid2.gridColumnWidth)(column), []);
   const isColumnSortableFn = (0, import_react.useCallback)((column) => {
-    return (0, import_ui_grid4.isGridColumnSortable)(optionsRef.current, column);
+    return (0, import_ui_grid2.isGridColumnSortable)(optionsRef.current, column);
   }, []);
   const isColumnFilterableFn = (0, import_react.useCallback)((column) => {
-    return (0, import_ui_grid4.isGridColumnFilterable)(optionsRef.current, column);
+    return (0, import_ui_grid2.isGridColumnFilterable)(optionsRef.current, column);
   }, []);
   const cellIndentFn = (0, import_react.useCallback)((row, column) => {
-    return (0, import_ui_grid4.gridCellIndent)(optionsRef.current, visibleColumnsRef.current, row, column);
+    return (0, import_ui_grid2.gridCellIndent)(optionsRef.current, visibleColumnsRef.current, row, column);
   }, []);
   const treeToggleLabelFn = (0, import_react.useCallback)(
     (row) => {
-      return (0, import_ui_grid4.gridTreeToggleLabelForRow)(expandedTreeRowsRef.current, row, labels);
+      return (0, import_ui_grid2.gridTreeToggleLabelForRow)(expandedTreeRowsRef.current, row, labels);
     },
     [labels]
   );
   const isTreeRowExpandedFn = (0, import_react.useCallback)((row) => {
-    return (0, import_ui_grid4.isGridTreeRowExpanded)(expandedTreeRowsRef.current, row);
+    return (0, import_ui_grid2.isGridTreeRowExpanded)(expandedTreeRowsRef.current, row);
   }, []);
   const expandToggleLabelFn = (0, import_react.useCallback)(
     (row) => {
-      return (0, import_ui_grid4.gridExpandToggleLabelForRow)(row, labels);
+      return (0, import_ui_grid2.gridExpandToggleLabelForRow)(row, labels);
     },
     [labels]
   );
   const isGroupedFn = (0, import_react.useCallback)((column) => {
-    return (0, import_ui_grid4.isGridColumnGrouped)(groupByColumnsRef.current, column);
+    return (0, import_ui_grid2.isGridColumnGrouped)(groupByColumnsRef.current, column);
   }, []);
   const showTreeToggleFn = (0, import_react.useCallback)((row, column) => {
-    return (0, import_ui_grid4.shouldShowGridTreeToggle)(optionsRef.current, visibleColumnsRef.current, row, column);
+    return (0, import_ui_grid2.shouldShowGridTreeToggle)(optionsRef.current, visibleColumnsRef.current, row, column);
   }, []);
   const showExpandToggleFn = (0, import_react.useCallback)((row, column) => {
-    return (0, import_ui_grid4.shouldShowGridExpandToggle)(optionsRef.current, visibleColumnsRef.current, column);
+    return (0, import_ui_grid2.shouldShowGridExpandToggle)(optionsRef.current, visibleColumnsRef.current, column);
   }, []);
   const showPaginationControlsFn = (0, import_react.useCallback)(() => {
-    return import_ui_grid4.FEATURE_PAGINATION && (0, import_ui_grid4.shouldShowGridPaginationControls)(optionsRef.current);
+    return import_ui_grid2.FEATURE_PAGINATION && (0, import_ui_grid2.shouldShowGridPaginationControls)(optionsRef.current);
   }, []);
   const paginationSummaryFn = (0, import_react.useCallback)(() => {
     const ti = pipelineRef.current.totalItems;
@@ -1637,22 +989,22 @@ function useGridState(options, onRegisterApi) {
     return optionsRef.current.paginationPageSizes ?? [];
   }, []);
   const isGroupingEnabledFn = (0, import_react.useCallback)(() => {
-    return import_ui_grid4.FEATURE_GROUPING && (0, import_ui_grid4.isGridGroupingEnabled)(optionsRef.current);
+    return import_ui_grid2.FEATURE_GROUPING && (0, import_ui_grid2.isGridGroupingEnabled)(optionsRef.current);
   }, []);
   const isFilteringEnabledFn = (0, import_react.useCallback)(() => {
-    return import_ui_grid4.FEATURE_FILTERING && (0, import_ui_grid4.isGridFilteringEnabled)(optionsRef.current);
+    return import_ui_grid2.FEATURE_FILTERING && (0, import_ui_grid2.isGridFilteringEnabled)(optionsRef.current);
   }, []);
   const toggleSortFn = (0, import_react.useCallback)((column) => {
-    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_grid4.SORT_DIRECTIONS.none ? null : column.name,
+    if (!import_ui_grid2.FEATURE_SORTING || !(0, import_ui_grid2.isGridColumnSortable)(optionsRef.current, column)) return;
+    const currentDirection = sortStateRef.current.columnName === column.name ? sortStateRef.current.direction : import_ui_grid2.SORT_DIRECTIONS.none;
+    const nextDirection = currentDirection === import_ui_grid2.SORT_DIRECTIONS.none ? import_ui_grid2.SORT_DIRECTIONS.asc : currentDirection === import_ui_grid2.SORT_DIRECTIONS.asc ? import_ui_grid2.SORT_DIRECTIONS.desc : import_ui_grid2.SORT_DIRECTIONS.none;
+    (0, import_ui_grid2.applyGridSortStateCommand)(gridApiRef.current, (state) => setSortState(state), {
+      columnName: nextDirection === import_ui_grid2.SORT_DIRECTIONS.none ? null : column.name,
       direction: nextDirection
     });
   }, []);
   const updateFilterFn = (0, import_react.useCallback)((columnName, value) => {
-    updateGridFilterCommand(
+    (0, import_ui_grid2.updateGridFilterCommand)(
       gridApiRef.current,
       (updater) => setActiveFilters((current) => updater(current)),
       () => activeFiltersRef.current,
@@ -1661,11 +1013,11 @@ function useGridState(options, onRegisterApi) {
     );
   }, []);
   const clearAllFiltersFn = (0, import_react.useCallback)(() => {
-    clearGridFiltersCommand(gridApiRef.current, (filters) => setActiveFilters(filters));
+    (0, import_ui_grid2.clearGridFiltersCommand)(gridApiRef.current, (filters) => setActiveFilters(filters));
   }, []);
   const toggleGroupingFn = (0, import_react.useCallback)((column, event) => {
     event?.stopPropagation();
-    if (!(import_ui_grid4.FEATURE_GROUPING && (0, import_ui_grid4.isGridGroupingEnabled)(optionsRef.current))) return;
+    if (!(import_ui_grid2.FEATURE_GROUPING && (0, import_ui_grid2.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;
@@ -1680,7 +1032,7 @@ function useGridState(options, onRegisterApi) {
   }, []);
   const focusCellFn = (0, import_react.useCallback)(
     (row, column, triggerEvent) => {
-      const nextFocusResult = (0, import_ui_grid4.buildGridFocusCellResult)({
+      const nextFocusResult = (0, import_ui_grid2.buildGridFocusCellResult)({
         currentFocusedCell: focusedCellRef.current,
         currentEditingCell: editingCellRef.current,
         rowId: row.id,
@@ -1739,7 +1091,7 @@ function useGridState(options, onRegisterApi) {
         default:
           break;
       }
-      if ((0, import_ui_grid4.isPrintableGridKey)(event.key, event.ctrlKey, event.metaKey, event.altKey) && isCellEditable(row, column, event.nativeEvent)) {
+      if ((0, import_ui_grid2.isPrintableGridKey)(event.key, event.ctrlKey, event.metaKey, event.altKey) && isCellEditable(row, column, event.nativeEvent)) {
         event.preventDefault();
         startCellEditFn(row, column, event.nativeEvent, event.key);
       }
@@ -1803,9 +1155,9 @@ function useGridState(options, onRegisterApi) {
     [toggleTreeRowByRefFn]
   );
   const moveColumnFn = (0, import_react.useCallback)((fromIndex, toIndex) => {
-    moveGridColumnCommand(
+    (0, import_ui_grid2.moveGridColumnCommand)(
       gridApiRef.current,
-      import_ui_grid4.FEATURE_COLUMN_MOVING && optionsRef.current.enableColumnMoving === true,
+      import_ui_grid2.FEATURE_COLUMN_MOVING && optionsRef.current.enableColumnMoving === true,
       (updater) => setColumnOrder((current) => updater(current)),
       fromIndex,
       toIndex
@@ -1826,17 +1178,17 @@ function useGridState(options, onRegisterApi) {
   const onViewportScrollFn = (0, import_react.useCallback)((startIndex) => {
     if (!scrollingRef.current) {
       scrollingRef.current = true;
-      raiseGridScrollBegin(gridApiRef.current);
+      (0, import_ui_grid2.raiseGridScrollBegin)(gridApiRef.current);
     }
     if (scrollEndHandleRef.current) {
       window.clearTimeout(scrollEndHandleRef.current);
     }
     scrollEndHandleRef.current = window.setTimeout(() => {
       scrollingRef.current = false;
-      raiseGridScrollEnd(gridApiRef.current);
+      (0, import_ui_grid2.raiseGridScrollEnd)(gridApiRef.current);
     }, 120);
-    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, {
+    const isInfiniteScrollEnabled = import_ui_grid2.FEATURE_INFINITE_SCROLL && (optionsRef.current.infiniteScrollRowsFromEnd !== void 0 || optionsRef.current.infiniteScrollUp === true || optionsRef.current.infiniteScrollDown !== void 0);
+    (0, import_ui_grid2.maybeRequestInfiniteScrollCommand)(gridApiRef.current, {
       enabled: isInfiniteScrollEnabled,
       virtualizationEnabled: pipelineRef.current.virtualizationEnabled,
       state: infiniteScrollStateRef.current,
@@ -1914,16 +1266,16 @@ function useGridState(options, onRegisterApi) {
     pageSizeOptions: pageSizeOptionsFn,
     isCellEditable,
     shouldEditOnFocus: shouldEditOnFocusFn,
-    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,
+    sortingFeature: import_ui_grid2.FEATURE_SORTING,
+    filteringFeature: import_ui_grid2.FEATURE_FILTERING,
+    groupingFeature: import_ui_grid2.FEATURE_GROUPING,
+    paginationFeature: import_ui_grid2.FEATURE_PAGINATION,
+    cellEditFeature: import_ui_grid2.FEATURE_CELL_EDIT,
+    expandableFeature: import_ui_grid2.FEATURE_EXPANDABLE,
+    treeViewFeature: import_ui_grid2.FEATURE_TREE_VIEW,
+    infiniteScrollFeature: import_ui_grid2.FEATURE_INFINITE_SCROLL,
+    columnMovingFeature: import_ui_grid2.FEATURE_COLUMN_MOVING,
+    csvExportFeature: import_ui_grid2.FEATURE_CSV_EXPORT,
     isGroupingEnabled: isGroupingEnabledFn,
     isFilteringEnabled: isFilteringEnabledFn,
     toggleSort: toggleSortFn,
@@ -1952,7 +1304,7 @@ function useGridState(options, onRegisterApi) {
     isPinningEnabled: isPinningEnabledFn,
     isColumnPinnable: isColumnPinnableFn,
     togglePin: togglePinFn,
-    pinningFeature: import_ui_grid4.FEATURE_PINNING
+    pinningFeature: import_ui_grid2.FEATURE_PINNING
   };
 }
 
@@ -2000,6 +1352,7 @@ function useVirtualScroll(options) {
     totalHeight: virtualWindow.totalHeight,
     offsetY: virtualWindow.offsetY,
     onScroll,
+    setScrollTop,
     viewportRef,
     scrollTop
   };
@@ -2048,10 +1401,82 @@ function UiGrid({
     viewportHeight: options.viewportHeight ?? 560,
     overscan: 3
   });
+  const headerGridRef = import_react3.default.useRef(null);
+  const filterGridRef = import_react3.default.useRef(null);
+  const [openPinMenuColumn, setOpenPinMenuColumn] = import_react3.default.useState(null);
+  const [headerStickyHeight, setHeaderStickyHeight] = import_react3.default.useState(0);
+  const [filterStickyHeight, setFilterStickyHeight] = import_react3.default.useState(0);
+  const stickyChromeHeight = headerStickyHeight + filterStickyHeight;
+  const scrollContainerHeight = `${(options.viewportHeight ?? 560) + stickyChromeHeight}px`;
+  const eventPathIncludesClass = import_react3.default.useCallback((event, className2) => {
+    const eventPath = typeof event.composedPath === "function" ? event.composedPath() : event.target ? [event.target] : [];
+    return eventPath.some((target) => {
+      if (!target || typeof target !== "object" || !("classList" in target)) {
+        return false;
+      }
+      const classList = target.classList;
+      return classList?.contains(className2) ?? false;
+    });
+  }, []);
+  const isPinMenuOpen = import_react3.default.useCallback(
+    (column) => openPinMenuColumn === column.name,
+    [openPinMenuColumn]
+  );
+  const pinButtonLabel = import_react3.default.useCallback(
+    (column) => state.isPinned(column) ? labels.unpin : labels.pinColumn,
+    [labels, state]
+  );
+  const onPinTrigger = import_react3.default.useCallback(
+    (column, event) => {
+      event?.stopPropagation();
+      if (state.isPinned(column)) {
+        setOpenPinMenuColumn(null);
+        state.gridApi.pinning.pinColumn(column.name, "none");
+        return;
+      }
+      setOpenPinMenuColumn((current) => current === column.name ? null : column.name);
+    },
+    [state]
+  );
+  const choosePinDirection = import_react3.default.useCallback(
+    (column, direction, event) => {
+      event?.stopPropagation();
+      setOpenPinMenuColumn(null);
+      state.gridApi.pinning.pinColumn(column.name, direction);
+    },
+    [state]
+  );
+  import_react3.default.useLayoutEffect(() => {
+    setHeaderStickyHeight(headerGridRef.current?.offsetHeight ?? 0);
+    setFilterStickyHeight(filterGridRef.current?.offsetHeight ?? 0);
+  }, [visibleColumns, filteringFeature, options.enableFiltering]);
+  import_react3.default.useEffect(() => {
+    if (!openPinMenuColumn) {
+      return;
+    }
+    const handleDocumentClick = (event) => {
+      if (eventPathIncludesClass(event, "pin-control")) {
+        return;
+      }
+      setOpenPinMenuColumn(null);
+    };
+    const handleDocumentEscape = (event) => {
+      if (event.key === "Escape") {
+        setOpenPinMenuColumn(null);
+      }
+    };
+    document.addEventListener("click", handleDocumentClick);
+    document.addEventListener("keydown", handleDocumentEscape);
+    return () => {
+      document.removeEventListener("click", handleDocumentClick);
+      document.removeEventListener("keydown", handleDocumentEscape);
+    };
+  }, [eventPathIncludesClass, openPinMenuColumn]);
   const itemsToRender = virtualizationEnabled ? displayItems.slice(virtualScroll.visibleRange.start, virtualScroll.visibleRange.end) : displayItems;
-  const onViewportScroll = (event) => {
-    virtualScroll.onScroll(event);
-    const startIndex = Math.floor(event.currentTarget.scrollTop / rowSize);
+  const onGridTableScroll = (event) => {
+    const bodyScrollTop = Math.max(0, event.currentTarget.scrollTop - stickyChromeHeight);
+    virtualScroll.setScrollTop(bodyScrollTop);
+    const startIndex = Math.floor(bodyScrollTop / rowSize);
     state.onViewportScroll(startIndex);
   };
   function renderDisplayItem(item) {
@@ -2291,262 +1716,322 @@ function UiGrid({
             ] }),
             /* @__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: "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)(
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              className: "grid-table ui-grid-contents-wrapper",
+              "data-part": "grid-table",
+              style: virtualizationEnabled ? { height: scrollContainerHeight, overflowY: "auto" } : void 0,
+              onScroll: virtualizationEnabled ? onGridTableScroll : void 0,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   "div",
                   {
-                    className: "body-grid ui-grid-canvas",
+                    className: "header-grid ui-grid-header ui-grid-header-canvas",
+                    "data-part": "header",
+                    role: "row",
+                    ref: headerGridRef,
+                    style: { gridTemplateColumns },
+                    children: visibleColumns.map((column) => {
+                      const pinned = state.isPinned(column);
+                      const pinOffset = pinned ? state.pinnedOffset(column) : null;
+                      const pinMenuOpen = isPinMenuOpen(column);
+                      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" : ""}${pinMenuOpen ? " is-pin-menu-open" : ""}`,
+                          "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: pinMenuOpen ? 8 : 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)("div", { className: `pin-control${pinMenuOpen ? " pin-control-open" : ""}`, onClick: (event) => event.stopPropagation(), children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                                  "button",
+                                  {
+                                    type: "button",
+                                    className: `chip-action pin-trigger${pinned || pinMenuOpen ? " chip-action-active" : ""}`,
+                                    "data-part": "pin-toggle",
+                                    "aria-label": pinButtonLabel(column),
+                                    title: pinButtonLabel(column),
+                                    "aria-haspopup": pinned ? void 0 : "menu",
+                                    "aria-expanded": pinned ? void 0 : pinMenuOpen,
+                                    onClick: (event) => onPinTrigger(column, event),
+                                    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: pinButtonLabel(column) })
+                                    ]
+                                  }
+                                ),
+                                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                                  "div",
+                                  {
+                                    className: "pin-menu",
+                                    "data-part": "pin-menu",
+                                    role: "menu",
+                                    "aria-label": "Pin options",
+                                    "aria-hidden": !pinMenuOpen,
+                                    children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                                        "button",
+                                        {
+                                          type: "button",
+                                          className: "pin-menu-action",
+                                          "data-part": "pin-left-action",
+                                          role: "menuitem",
+                                          "aria-label": labels.pinLeft,
+                                          title: labels.pinLeft,
+                                          tabIndex: pinMenuOpen ? 0 : -1,
+                                          onClick: (event) => choosePinDirection(column, "left", event),
+                                          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: "M10 6 4 12l6 6v-4h10v-4H10V6z" }) }),
+                                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only ui-grid-sr-only", children: labels.pinLeft })
+                                          ]
+                                        }
+                                      ),
+                                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                                        "button",
+                                        {
+                                          type: "button",
+                                          className: "pin-menu-action",
+                                          "data-part": "pin-right-action",
+                                          role: "menuitem",
+                                          "aria-label": labels.pinRight,
+                                          title: labels.pinRight,
+                                          tabIndex: pinMenuOpen ? 0 : -1,
+                                          onClick: (event) => choosePinDirection(column, "right", event),
+                                          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: "M14 6v4H4v4h10v4l6-6-6-6z" }) }),
+                                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only ui-grid-sr-only", children: labels.pinRight })
+                                          ]
+                                        }
+                                      )
+                                    ]
+                                  }
+                                )
+                              ] })
+                            ] })
+                          ]
+                        },
+                        column.name
+                      );
+                    })
+                  }
+                ),
+                filteringFeature && state.isFilteringEnabled() && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    className: "filter-grid ui-grid-header",
+                    "data-part": "filters",
+                    ref: filterGridRef,
+                    style: { gridTemplateColumns, ["--ui-grid-header-sticky-top"]: `${headerStickyHeight}px` },
+                    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: "grid-virtual-spacer", style: { height: `${virtualScroll.totalHeight}px` }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    className: "body-grid ui-grid-canvas grid-virtual-body",
                     "data-part": "body",
                     role: "rowgroup",
                     style: {
                       gridTemplateColumns,
                       position: "absolute",
-                      top: 0,
-                      left: 0,
-                      right: 0,
-                      transform: `translateY(${virtualScroll.offsetY}px)`
+                      top: `${virtualScroll.offsetY}px`,
+                      left: 0
                     },
                     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)(
+                  "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)(
-                            "svg",
+                            "select",
                             {
-                              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" })
+                              "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))
                             }
-                          ),
-                          /* @__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/mountUiGrid.tsx
+var import_react4 = __toESM(require("react"));
+var import_client = require("react-dom/client");
+function mountUiGrid(container, props) {
+  const root = (0, import_client.createRoot)(container);
+  root.render(import_react4.default.createElement(UiGrid, props));
+  return root;
+}
+
 // src/rustWasmGridEngine.ts
-var import_ui_grid8 = require("@ornery/ui-grid");
-var uiGridWasmModulePath = "../../../dist/ui-grid-wasm/ui_grid_wasm.js";
+var import_ui_grid3 = require("@ornery/ui-grid");
+var uiGridWasmModulePath = "../../../dist/ui-grid-wasm-web/ui_grid_wasm.js";
+var uiGridWasmBinaryPath = "/dist/ui-grid-wasm-web/ui_grid_wasm_bg.wasm";
 function registerReactUiGridWasmEngineFromModule(module2) {
-  (0, import_ui_grid8.registerRustWasmGridEngine)({
+  (0, import_ui_grid3.registerRustWasmGridEngine)({
     buildPipeline(context) {
       return module2.build_pipeline_js(context);
     }
@@ -2557,11 +2042,12 @@ async function enableReactUiGridWasmEngine() {
     /* @vite-ignore */
     uiGridWasmModulePath
   );
+  await module2.default(uiGridWasmBinaryPath);
   registerReactUiGridWasmEngineFromModule(module2);
 }
 
 // src/index.ts
-var import_ui_grid9 = require("@ornery/ui-grid");
+var import_ui_grid4 = require("@ornery/ui-grid");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DEFAULT_GRID_LABELS,
@@ -2571,6 +2057,7 @@ var import_ui_grid9 = require("@ornery/ui-grid");
   computeViewportRows,
   enableReactUiGridWasmEngine,
   formatPaginationSummary,
+  mountUiGrid,
   orderVisibleColumns,
   registerReactUiGridWasmEngineFromModule,
   resolveBenchmarkIterations,