@ornery/ui-grid-react 0.1.6 → 0.1.7-hotfix

package/dist/index.js

@@ -30,7 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  DEFAULT_GRID_LABELS: () => import_ui_grid4.DEFAULT_GRID_LABELS,
+  DEFAULT_GRID_LABELS: () => import_ui_grid_core4.DEFAULT_GRID_LABELS,
   UiGrid: () => UiGrid,
   buildGridTemplateColumns: () => buildGridTemplateColumns,
   computeViewportHeightPx: () => computeViewportHeightPx,
@@ -38,6 +38,7 @@ __export(index_exports, {
   enableReactUiGridWasmEngine: () => enableReactUiGridWasmEngine,
   formatPaginationSummary: () => formatPaginationSummary,
   mountUiGrid: () => mountUiGrid,
+  mountUiGridCustomElement: () => mountUiGridCustomElement,
   orderVisibleColumns: () => orderVisibleColumns,
   registerReactUiGridWasmEngineFromModule: () => registerReactUiGridWasmEngineFromModule,
   resolveBenchmarkIterations: () => resolveBenchmarkIterations,
@@ -53,12 +54,12 @@ var import_react3 = __toESM(require("react"));
 var import_react = require("react");
 
 // src/gridStateMath.ts
-var import_ui_grid = require("@ornery/ui-grid");
+var import_ui_grid_core = require("@ornery/ui-grid-core");
 function orderVisibleColumns(columns, order) {
   return [...columns].filter((column) => column.visible !== false).sort((left, right) => order.indexOf(left.name) - order.indexOf(right.name));
 }
 function buildGridTemplateColumns(columns) {
-  return columns.map((column) => (0, import_ui_grid.gridColumnWidth)(column)).join(" ");
+  return columns.map((column) => (0, import_ui_grid_core.gridColumnWidth)(column)).join(" ");
 }
 function resolveBenchmarkIterations(iterations, configuredIterations) {
   return Math.max(1, iterations ?? configuredIterations ?? 25);
@@ -77,7 +78,7 @@ function computeViewportRows(viewportHeight, rowHeight) {
 }
 
 // src/useGridState.ts
-var import_ui_grid2 = require("@ornery/ui-grid");
+var import_ui_grid_core2 = require("@ornery/ui-grid-core");
 function escapeCssSelectorValue(value) {
   const nativeEscape = globalThis.CSS?.escape;
   if (typeof nativeEscape === "function") {
@@ -115,7 +116,7 @@ function useGridState(options, onRegisterApi) {
   const [hiddenRowReasons, setHiddenRowReasons] = (0, import_react.useState)({});
   const [sortState, setSortState] = (0, import_react.useState)({
     columnName: null,
-    direction: import_ui_grid2.SORT_DIRECTIONS.none
+    direction: import_ui_grid_core2.SORT_DIRECTIONS.none
   });
   const [focusedCell, setFocusedCell] = (0, import_react.useState)(null);
   const [editingCell, setEditingCell] = (0, import_react.useState)(null);
@@ -184,13 +185,15 @@ function useGridState(options, onRegisterApi) {
     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);
+    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_grid2.defaultGridEngine.buildPipeline({
+    return import_ui_grid_core2.defaultGridEngine.buildPipeline({
       options,
       columns: visibleColumns,
       activeFilters,
@@ -220,28 +223,28 @@ function useGridState(options, onRegisterApi) {
   ]);
   const pipelineRef = (0, import_react.useRef)(pipeline);
   pipelineRef.current = pipeline;
-  const labels = (0, import_react.useMemo)(() => (0, import_ui_grid2.resolveGridLabels)(options.labels), [options.labels]);
+  const labels = (0, import_react.useMemo)(() => (0, import_ui_grid_core2.resolveGridLabels)(options.labels), [options.labels]);
   const gridTemplateColumns = (0, import_react.useMemo)(
     () => buildGridTemplateColumns(visibleColumns),
     [visibleColumns]
   );
   const isPinningEnabledFn = (0, import_react.useCallback)(() => {
-    return (0, import_ui_grid2.isPinningEnabled)(optionsRef.current);
+    return (0, import_ui_grid_core2.isPinningEnabled)(optionsRef.current);
   }, []);
   const isColumnPinnableFn = (0, import_react.useCallback)((column) => {
-    return (0, import_ui_grid2.isColumnPinnable)(optionsRef.current, column);
+    return (0, import_ui_grid_core2.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 (0, import_ui_grid2.computePinnedOffset)(visibleColumnsRef.current, pinnedColumnsRef.current, column);
+    return (0, import_ui_grid_core2.computePinnedOffset)(visibleColumnsRef.current, pinnedColumnsRef.current, column);
   }, []);
   const resolveRowId = (0, import_react.useCallback)((row) => {
-    return (0, import_ui_grid2.resolveGridRowId)(optionsRef.current, row);
+    return (0, import_ui_grid_core2.resolveGridRowId)(optionsRef.current, row);
   }, []);
   const buildRowsFromData = (0, import_react.useCallback)((data) => {
-    return (0, import_ui_grid2.buildGridRows)(
+    return (0, import_ui_grid_core2.buildGridRows)(
       { ...optionsRef.current, data },
       optionsRef.current.rowHeight ?? 44,
       hiddenRowReasonsRef.current,
@@ -250,19 +253,19 @@ function useGridState(options, onRegisterApi) {
   }, []);
   const findRowById = (0, import_react.useCallback)(
     (rowId) => {
-      return (0, import_ui_grid2.findGridRowById)(buildRowsFromData(optionsRef.current.data), rowId);
+      return (0, import_ui_grid_core2.findGridRowById)(buildRowsFromData(optionsRef.current.data), rowId);
     },
     [buildRowsFromData]
   );
   const canExpandRowsFn = (0, import_react.useCallback)(() => {
-    return import_ui_grid2.FEATURE_EXPANDABLE && (0, import_ui_grid2.canGridExpandRows)(optionsRef.current);
+    return import_ui_grid_core2.FEATURE_EXPANDABLE && (0, import_ui_grid_core2.canGridExpandRows)(optionsRef.current);
   }, []);
   const effectivePageSizeFn = (0, import_react.useCallback)((totalItems) => {
-    return (0, import_ui_grid2.getEffectivePageSize)(optionsRef.current, pageSizeRef.current, totalItems);
+    return (0, import_ui_grid_core2.getEffectivePageSize)(optionsRef.current, pageSizeRef.current, totalItems);
   }, []);
   const getCurrentPageValueFn = (0, import_react.useCallback)((totalItems) => {
     const ti = totalItems ?? pipelineRef.current.totalItems;
-    return (0, import_ui_grid2.getCurrentPageValue)(
+    return (0, import_ui_grid_core2.getCurrentPageValue)(
       optionsRef.current,
       currentPageRef.current,
       ti,
@@ -271,11 +274,11 @@ function useGridState(options, onRegisterApi) {
   }, []);
   const getTotalPagesValueFn = (0, import_react.useCallback)((totalItems) => {
     const ti = totalItems ?? pipelineRef.current.totalItems;
-    return (0, import_ui_grid2.getTotalPagesValue)(optionsRef.current, ti, pageSizeRef.current);
+    return (0, import_ui_grid_core2.getTotalPagesValue)(optionsRef.current, ti, pageSizeRef.current);
   }, []);
   const getFirstRowIndexValueFn = (0, import_react.useCallback)((totalItems) => {
     const ti = totalItems ?? pipelineRef.current.totalItems;
-    return (0, import_ui_grid2.getFirstRowIndexValue)(
+    return (0, import_ui_grid_core2.getFirstRowIndexValue)(
       optionsRef.current,
       currentPageRef.current,
       ti,
@@ -284,7 +287,7 @@ function useGridState(options, onRegisterApi) {
   }, []);
   const getLastRowIndexValueFn = (0, import_react.useCallback)((totalItems) => {
     const ti = totalItems ?? pipelineRef.current.totalItems;
-    return (0, import_ui_grid2.getLastRowIndexValue)(
+    return (0, import_ui_grid_core2.getLastRowIndexValue)(
       optionsRef.current,
       currentPageRef.current,
       ti,
@@ -293,7 +296,7 @@ function useGridState(options, onRegisterApi) {
   }, []);
   const isCellEditable = (0, import_react.useCallback)(
     (row, column, triggerEvent) => {
-      if (!import_ui_grid2.FEATURE_CELL_EDIT) return false;
+      if (!import_ui_grid_core2.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;
@@ -358,12 +361,12 @@ function useGridState(options, onRegisterApi) {
       refresh: () => setActiveFilters((current) => ({ ...current })),
       getVisibleRows: () => pipelineRef.current.visibleRows,
       setRowInvisible: (row, reason = "user") => {
-        const rowId = (0, import_ui_grid2.resolveGridRowId)(optionsRef.current, row);
-        setHiddenRowReasons((current) => (0, import_ui_grid2.addGridRowInvisibleReason)(current, rowId, reason));
+        const rowId = (0, import_ui_grid_core2.resolveGridRowId)(optionsRef.current, row);
+        setHiddenRowReasons((current) => (0, import_ui_grid_core2.addGridRowInvisibleReason)(current, rowId, reason));
       },
       clearRowInvisible: (row, reason = "user") => {
-        const rowId = (0, import_ui_grid2.resolveGridRowId)(optionsRef.current, row);
-        setHiddenRowReasons((current) => (0, import_ui_grid2.clearGridRowInvisibleReason)(current, rowId, reason));
+        const rowId = (0, import_ui_grid_core2.resolveGridRowId)(optionsRef.current, row);
+        setHiddenRowReasons((current) => (0, import_ui_grid_core2.clearGridRowInvisibleReason)(current, rowId, reason));
       },
       setFilter: (columnName, value) => {
         setActiveFilters((current) => {
@@ -380,19 +383,19 @@ function useGridState(options, onRegisterApi) {
         queueMicrotask(() => gridApiRef.current.core.raise.filterChanged(nextFilters));
       },
       sortColumn: (columnName, direction) => {
-        (0, import_ui_grid2.sortGridColumnCommand)(gridApiRef.current, (s) => setSortState(s), columnName, direction);
+        (0, import_ui_grid_core2.sortGridColumnCommand)(gridApiRef.current, (s) => setSortState(s), columnName, direction);
       },
       moveColumn: (fromIndex, toIndex) => {
-        (0, import_ui_grid2.moveGridColumnCommand)(
+        (0, import_ui_grid_core2.moveGridColumnCommand)(
           gridApiRef.current,
-          import_ui_grid2.FEATURE_COLUMN_MOVING && optionsRef.current.enableColumnMoving === true,
+          import_ui_grid_core2.FEATURE_COLUMN_MOVING && optionsRef.current.enableColumnMoving === true,
           (updater) => setColumnOrder((current) => updater(current)),
           fromIndex,
           toIndex
         );
       },
       toggleGrouping: (columnName) => {
-        if (!(import_ui_grid2.FEATURE_GROUPING && (0, import_ui_grid2.isGridGroupingEnabled)(optionsRef.current))) return;
+        if (!(import_ui_grid_core2.FEATURE_GROUPING && (0, import_ui_grid_core2.isGridGroupingEnabled)(optionsRef.current))) return;
         const current = groupByColumnsRef.current;
         const next = current.includes(columnName) ? current.filter((n) => n !== columnName) : [...current, columnName];
         groupByColumnsRef.current = next;
@@ -400,7 +403,7 @@ function useGridState(options, onRegisterApi) {
         gridApiRef.current.core.raise.groupingChanged(next);
       },
       clearGrouping: () => {
-        (0, import_ui_grid2.clearGridGroupingCommand)(
+        (0, import_ui_grid_core2.clearGridGroupingCommand)(
           gridApiRef.current,
           (grouping) => setGroupByColumns(grouping),
           false
@@ -423,30 +426,30 @@ function useGridState(options, onRegisterApi) {
       toggleRowExpansion: (row) => toggleRowExpansionByRefFn(row),
       expandAllRows: () => expandAllRowsFn(),
       collapseAllRows: () => {
-        (0, import_ui_grid2.collapseAllGridRowsCommand)((e) => setExpandedRows(e));
+        (0, import_ui_grid_core2.collapseAllGridRowsCommand)((e) => setExpandedRows(e));
       },
       toggleAllRows: () => toggleAllRowsFn(),
       treeExpandAllRows: () => {
-        (0, import_ui_grid2.expandAllGridTreeRowsCommand)(
+        (0, import_ui_grid_core2.expandAllGridTreeRowsCommand)(
           (data) => buildRowsFromData(data),
           optionsRef.current.data,
           (e) => setExpandedTreeRows(e)
         );
       },
       treeCollapseAllRows: () => {
-        (0, import_ui_grid2.collapseAllGridTreeRowsCommand)((e) => setExpandedTreeRows(e));
+        (0, import_ui_grid_core2.collapseAllGridTreeRowsCommand)((e) => setExpandedTreeRows(e));
       },
       treeToggleRow: (row) => toggleTreeRowByRefFn(row),
       treeExpandRow: (row) => expandTreeRowByRefFn(row),
       treeCollapseRow: (row) => collapseTreeRowByRefFn(row),
       treeGetRowChildren: (row) => {
-        const rowId = (0, import_ui_grid2.resolveGridRowId)(optionsRef.current, row);
+        const rowId = (0, import_ui_grid_core2.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 (0, import_ui_grid2.completeGridInfiniteScrollDataLoadCommand)(
+        return (0, import_ui_grid_core2.completeGridInfiniteScrollDataLoadCommand)(
           infiniteScrollStateRef.current,
           (s) => setInfiniteScrollState(s),
           scrollUp ?? infiniteScrollStateRef.current.scrollUp,
@@ -454,35 +457,35 @@ function useGridState(options, onRegisterApi) {
         );
       },
       infiniteScrollReset: (scrollUp, scrollDown) => {
-        (0, import_ui_grid2.resetGridInfiniteScrollCommand)(
+        (0, import_ui_grid_core2.resetGridInfiniteScrollCommand)(
           (s) => setInfiniteScrollState(s),
           scrollUp ?? infiniteScrollStateRef.current.scrollUp,
           scrollDown ?? infiniteScrollStateRef.current.scrollDown
         );
       },
       infiniteScrollSaveScrollPercentage: () => {
-        (0, import_ui_grid2.saveGridInfiniteScrollPercentageCommand)(
+        (0, import_ui_grid_core2.saveGridInfiniteScrollPercentageCommand)(
           infiniteScrollStateRef.current,
           pipelineRef.current.visibleRows.length,
           (s) => setInfiniteScrollState(s)
         );
       },
       infiniteScrollDataRemovedTop: (scrollUp, scrollDown) => {
-        (0, import_ui_grid2.resetGridInfiniteScrollCommand)(
+        (0, import_ui_grid_core2.resetGridInfiniteScrollCommand)(
           (s) => setInfiniteScrollState(s),
           scrollUp ?? infiniteScrollStateRef.current.scrollUp,
           scrollDown ?? infiniteScrollStateRef.current.scrollDown
         );
       },
       infiniteScrollDataRemovedBottom: (scrollUp, scrollDown) => {
-        (0, import_ui_grid2.resetGridInfiniteScrollCommand)(
+        (0, import_ui_grid_core2.resetGridInfiniteScrollCommand)(
           (s) => setInfiniteScrollState(s),
           scrollUp ?? infiniteScrollStateRef.current.scrollUp,
           scrollDown ?? infiniteScrollStateRef.current.scrollDown
         );
       },
       infiniteScrollSetDirections: (scrollUp, scrollDown) => {
-        (0, import_ui_grid2.setGridInfiniteScrollDirectionsCommand)(
+        (0, import_ui_grid_core2.setGridInfiniteScrollDirectionsCommand)(
           infiniteScrollStateRef.current,
           (s) => setInfiniteScrollState(s),
           scrollUp,
@@ -490,7 +493,7 @@ function useGridState(options, onRegisterApi) {
         );
       },
       saveState: () => {
-        return (0, import_ui_grid2.buildGridSavedState)({
+        return (0, import_ui_grid_core2.buildGridSavedState)({
           columnOrder: columnOrderRef.current,
           activeFilters: activeFiltersRef.current,
           sortState: sortStateRef.current,
@@ -504,7 +507,7 @@ function useGridState(options, onRegisterApi) {
         });
       },
       restoreState: (state) => {
-        (0, import_ui_grid2.restoreGridStateCommand)(gridApiRef.current, state, {
+        (0, import_ui_grid_core2.restoreGridStateCommand)(gridApiRef.current, state, {
           setColumnOrder: (order) => setColumnOrder(order),
           setActiveFilters: (filters) => setActiveFilters(filters),
           setSortState: (s) => setSortState(s),
@@ -518,8 +521,8 @@ function useGridState(options, onRegisterApi) {
         });
       },
       beginCellEdit: (row, columnName, triggerEvent) => {
-        const rowId = (0, import_ui_grid2.resolveGridRowId)(optionsRef.current, row);
-        const gridRow = (0, import_ui_grid2.findGridRowById)(buildRowsFromData(optionsRef.current.data), rowId);
+        const rowId = (0, import_ui_grid_core2.resolveGridRowId)(optionsRef.current, row);
+        const gridRow = (0, import_ui_grid_core2.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);
@@ -528,7 +531,7 @@ function useGridState(options, onRegisterApi) {
       cancelCellEdit: () => cancelCellEditFn(),
       getEditingCell: () => editingCellRef.current,
       pinColumn: (columnName, direction) => {
-        (0, import_ui_grid2.pinGridColumnCommand)(
+        (0, import_ui_grid_core2.pinGridColumnCommand)(
           gridApiRef.current,
           isPinningEnabledFn(),
           (v) => setPinnedColumns(v),
@@ -538,12 +541,12 @@ function useGridState(options, onRegisterApi) {
         );
       }
     };
-    gridApiRef.current = (0, import_ui_grid2.createGridApi)(bindings);
+    gridApiRef.current = (0, import_ui_grid_core2.createGridApi)(bindings);
   }
   const gridApi = gridApiRef.current;
   const seekPageFn = (0, import_react.useCallback)(
     (page) => {
-      (0, import_ui_grid2.seekGridPaginationCommand)(
+      (0, import_ui_grid_core2.seekGridPaginationCommand)(
         gridApiRef.current,
         (nextPage) => setCurrentPage(nextPage),
         () => getTotalPagesValueFn(),
@@ -556,7 +559,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";
-    (0, import_ui_grid2.pinGridColumnCommand)(
+    (0, import_ui_grid_core2.pinGridColumnCommand)(
       gridApiRef.current,
       isPinningEnabledFn(),
       (v) => setPinnedColumns(v),
@@ -566,7 +569,7 @@ function useGridState(options, onRegisterApi) {
     );
   }, []);
   const setPaginationPageSizeFn = (0, import_react.useCallback)((ps) => {
-    (0, import_ui_grid2.setGridPaginationPageSizeCommand)(
+    (0, import_ui_grid_core2.setGridPaginationPageSizeCommand)(
       gridApiRef.current,
       (nextPageSize) => setPageSize(nextPageSize),
       (nextPage) => setCurrentPage(nextPage),
@@ -575,83 +578,83 @@ function useGridState(options, onRegisterApi) {
   }, []);
   const toggleRowExpansionByRefFn = (0, import_react.useCallback)(
     (row) => {
-      const rowId = (0, import_ui_grid2.resolveGridRowId)(optionsRef.current, row);
-      (0, import_ui_grid2.toggleGridRowExpansionCommand)(
+      const rowId = (0, import_ui_grid_core2.resolveGridRowId)(optionsRef.current, row);
+      (0, import_ui_grid_core2.toggleGridRowExpansionCommand)(
         gridApiRef.current,
-        import_ui_grid2.FEATURE_EXPANDABLE && (0, import_ui_grid2.canGridExpandRows)(optionsRef.current),
+        import_ui_grid_core2.FEATURE_EXPANDABLE && (0, import_ui_grid_core2.canGridExpandRows)(optionsRef.current),
         expandedRowsRef.current,
         rowId,
         (e) => setExpandedRows(e),
-        (resolvedRowId) => (0, import_ui_grid2.findGridRowById)(buildRowsFromData(optionsRef.current.data), resolvedRowId)
+        (resolvedRowId) => (0, import_ui_grid_core2.findGridRowById)(buildRowsFromData(optionsRef.current.data), resolvedRowId)
       );
     },
     [buildRowsFromData]
   );
   const expandAllRowsFn = (0, import_react.useCallback)(() => {
-    if (!(0, import_ui_grid2.canGridExpandRows)(optionsRef.current)) return;
-    (0, import_ui_grid2.expandAllGridRowsCommand)(
+    if (!(0, import_ui_grid_core2.canGridExpandRows)(optionsRef.current)) return;
+    (0, import_ui_grid_core2.expandAllGridRowsCommand)(
       (data) => buildRowsFromData(data),
       optionsRef.current.data,
       (e) => setExpandedRows(e)
     );
   }, [buildRowsFromData]);
   const toggleAllRowsFn = (0, import_react.useCallback)(() => {
-    const allExpanded = (0, import_ui_grid2.areAllGridRowsExpanded)(
+    const allExpanded = (0, import_ui_grid_core2.areAllGridRowsExpanded)(
       buildRowsFromData(optionsRef.current.data),
       expandedRowsRef.current
     );
     if (allExpanded) {
-      (0, import_ui_grid2.collapseAllGridRowsCommand)((e) => setExpandedRows(e));
+      (0, import_ui_grid_core2.collapseAllGridRowsCommand)((e) => setExpandedRows(e));
     } else {
       expandAllRowsFn();
     }
   }, [buildRowsFromData, expandAllRowsFn]);
   const toggleTreeRowByRefFn = (0, import_react.useCallback)(
     (row) => {
-      const rowId = (0, import_ui_grid2.resolveGridRowId)(optionsRef.current, row);
-      (0, import_ui_grid2.toggleGridTreeRowCommand)(
+      const rowId = (0, import_ui_grid_core2.resolveGridRowId)(optionsRef.current, row);
+      (0, import_ui_grid_core2.toggleGridTreeRowCommand)(
         gridApiRef.current,
         expandedTreeRowsRef.current,
         rowId,
         (e) => setExpandedTreeRows(e),
-        (resolvedRowId) => (0, import_ui_grid2.findGridRowById)(buildRowsFromData(optionsRef.current.data), resolvedRowId)
+        (resolvedRowId) => (0, import_ui_grid_core2.findGridRowById)(buildRowsFromData(optionsRef.current.data), resolvedRowId)
       );
     },
     [buildRowsFromData]
   );
   const expandTreeRowByRefFn = (0, import_react.useCallback)(
     (row) => {
-      const rowId = (0, import_ui_grid2.resolveGridRowId)(optionsRef.current, row);
-      (0, import_ui_grid2.setGridTreeRowExpandedCommand)(
+      const rowId = (0, import_ui_grid_core2.resolveGridRowId)(optionsRef.current, row);
+      (0, import_ui_grid_core2.setGridTreeRowExpandedCommand)(
         gridApiRef.current,
         expandedTreeRowsRef.current,
         rowId,
         true,
         (e) => setExpandedTreeRows(e),
-        (resolvedRowId) => (0, import_ui_grid2.findGridRowById)(buildRowsFromData(optionsRef.current.data), resolvedRowId)
+        (resolvedRowId) => (0, import_ui_grid_core2.findGridRowById)(buildRowsFromData(optionsRef.current.data), resolvedRowId)
       );
     },
     [buildRowsFromData]
   );
   const collapseTreeRowByRefFn = (0, import_react.useCallback)(
     (row) => {
-      const rowId = (0, import_ui_grid2.resolveGridRowId)(optionsRef.current, row);
-      (0, import_ui_grid2.setGridTreeRowExpandedCommand)(
+      const rowId = (0, import_ui_grid_core2.resolveGridRowId)(optionsRef.current, row);
+      (0, import_ui_grid_core2.setGridTreeRowExpandedCommand)(
         gridApiRef.current,
         expandedTreeRowsRef.current,
         rowId,
         false,
         (e) => setExpandedTreeRows(e),
-        (resolvedRowId) => (0, import_ui_grid2.findGridRowById)(buildRowsFromData(optionsRef.current.data), resolvedRowId)
+        (resolvedRowId) => (0, import_ui_grid_core2.findGridRowById)(buildRowsFromData(optionsRef.current.data), resolvedRowId)
       );
     },
     [buildRowsFromData]
   );
   const startCellEditFn = (0, import_react.useCallback)(
     (row, column, triggerEvent, initialValue) => {
-      const currentValue = (0, import_ui_grid2.getCellValue)(row.entity, column);
+      const currentValue = (0, import_ui_grid_core2.getCellValue)(row.entity, column);
       const focusToken = ++editorFocusTokenRef.current;
-      const ec = (0, import_ui_grid2.beginGridCellEditCommand)(
+      const ec = (0, import_ui_grid_core2.beginGridCellEditCommand)(
         gridApiRef.current,
         {
           setFocusedCell: (fc) => setFocusedCell(fc),
@@ -672,17 +675,17 @@ function useGridState(options, onRegisterApi) {
   );
   const commitCellEditFn = (0, import_react.useCallback)(
     (direction, restoreFocus = true) => {
-      const result = (0, import_ui_grid2.commitGridCellEditCommand)(gridApiRef.current, {
+      const result = (0, import_ui_grid_core2.commitGridCellEditCommand)(gridApiRef.current, {
         getEditingCell: () => editingCellRef.current,
         getEditingValue: () => editingValueRef.current,
         setEditingCell: (ec) => setEditingCell(ec),
         setEditingValue: (ev) => setEditingValue(ev),
-        findRowById: (rowId) => (0, import_ui_grid2.findGridRowById)(buildRowsFromData(optionsRef.current.data), rowId),
+        findRowById: (rowId) => (0, import_ui_grid_core2.findGridRowById)(buildRowsFromData(optionsRef.current.data), rowId),
         findColumnByName: (columnName) => visibleColumnsRef.current.find((c) => c.name === columnName),
-        parseEditedValue: (column, value, oldValue) => (0, import_ui_grid2.parseGridEditedValue)(column, value, oldValue),
+        parseEditedValue: (column, value, oldValue) => (0, import_ui_grid_core2.parseGridEditedValue)(column, value, oldValue),
         setCellValue: (rowEntity, column, value) => {
           const fieldPath = column.editModelField ?? column.field ?? column.name;
-          (0, import_ui_grid2.setPathValue)(rowEntity, fieldPath, value);
+          (0, import_ui_grid_core2.setPathValue)(rowEntity, fieldPath, value);
         }
       });
       if (!result.committed || !result.row || !result.column || !result.focusTarget) return;
@@ -698,11 +701,11 @@ function useGridState(options, onRegisterApi) {
   );
   const cancelCellEditFn = (0, import_react.useCallback)(() => {
     const hadEditingCell = editingCellRef.current !== null;
-    const result = (0, import_ui_grid2.cancelGridCellEditCommand)(gridApiRef.current, {
+    const result = (0, import_ui_grid_core2.cancelGridCellEditCommand)(gridApiRef.current, {
       getEditingCell: () => editingCellRef.current,
       setEditingCell: (ec) => setEditingCell(ec),
       setEditingValue: (ev) => setEditingValue(ev),
-      findRowById: (rowId) => (0, import_ui_grid2.findGridRowById)(buildRowsFromData(optionsRef.current.data), rowId),
+      findRowById: (rowId) => (0, import_ui_grid_core2.findGridRowById)(buildRowsFromData(optionsRef.current.data), rowId),
       findColumnByName: (columnName) => visibleColumnsRef.current.find((c) => c.name === columnName)
     });
     if (!hadEditingCell) return;
@@ -711,7 +714,7 @@ function useGridState(options, onRegisterApi) {
   }, [buildRowsFromData, focusRenderedCell]);
   const moveFocusFn = (0, import_react.useCallback)(
     (row, column, direction, triggerEvent) => {
-      const nextCell = (0, import_ui_grid2.findNextGridCell)({
+      const nextCell = (0, import_ui_grid_core2.findNextGridCell)({
         rows: pipelineRef.current.visibleRows,
         columns: visibleColumnsRef.current,
         rowId: row.id,
@@ -734,7 +737,7 @@ function useGridState(options, onRegisterApi) {
       optionsRef.current.benchmark?.iterations
     );
     const startedAt = performance.now();
-    let lastResult = import_ui_grid2.defaultGridEngine.buildPipeline({
+    let lastResult = import_ui_grid_core2.defaultGridEngine.buildPipeline({
       options: optionsRef.current,
       columns: visibleColumnsRef.current,
       activeFilters: activeFiltersRef.current,
@@ -749,7 +752,7 @@ function useGridState(options, onRegisterApi) {
       rowSize: optionsRef.current.rowHeight ?? 44
     });
     for (let i = 1; i < safeIterations; i++) {
-      lastResult = import_ui_grid2.defaultGridEngine.buildPipeline({
+      lastResult = import_ui_grid_core2.defaultGridEngine.buildPipeline({
         options: optionsRef.current,
         columns: visibleColumnsRef.current,
         activeFilters: activeFiltersRef.current,
@@ -773,14 +776,14 @@ function useGridState(options, onRegisterApi) {
       renderedItems: lastResult.displayItems.length
     };
     setBenchmarkResult(result);
-    (0, import_ui_grid2.raiseGridBenchmarkComplete)(gridApiRef.current, result);
+    (0, import_ui_grid_core2.raiseGridBenchmarkComplete)(gridApiRef.current, result);
     return result;
   }, []);
   const exportCsvFn = (0, import_react.useCallback)(() => {
-    if (!import_ui_grid2.FEATURE_CSV_EXPORT) return;
+    if (!import_ui_grid_core2.FEATURE_CSV_EXPORT) return;
     const columns = visibleColumnsRef.current;
-    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`);
+    const csv = (0, import_ui_grid_core2.exportCsvRows)(columns, pipelineRef.current.visibleRows);
+    (0, import_ui_grid_core2.downloadGridCsvFile)(csv, `${(0, import_ui_grid_core2.sanitizeDownloadFilename)(optionsRef.current.id)}.csv`);
   }, []);
   (0, import_react.useEffect)(() => {
     if (initializedGridIdRef.current === options.id) return;
@@ -795,9 +798,9 @@ function useGridState(options, onRegisterApi) {
     setExpandedTreeRows({});
     setColumnOrder(options.columnDefs.map((column) => column.name));
     setGroupByColumns(options.grouping?.groupBy ?? []);
-    setPinnedColumns((0, import_ui_grid2.buildInitialPinnedState)(options.columnDefs));
+    setPinnedColumns((0, import_ui_grid_core2.buildInitialPinnedState)(options.columnDefs));
     setCurrentPage(options.paginationCurrentPage ?? 1);
-    setPageSize((0, import_ui_grid2.getEffectivePageSize)(options, 0, options.data.length));
+    setPageSize((0, import_ui_grid_core2.getEffectivePageSize)(options, 0, options.data.length));
     setInfiniteScrollState({
       scrollUp: options.infiniteScrollUp === true,
       scrollDown: options.infiniteScrollDown !== false,
@@ -809,28 +812,28 @@ function useGridState(options, onRegisterApi) {
     );
     setSortState({
       columnName: initialSort?.name ?? null,
-      direction: initialSort?.sort?.direction ?? import_ui_grid2.SORT_DIRECTIONS.none
+      direction: initialSort?.sort?.direction ?? import_ui_grid_core2.SORT_DIRECTIONS.none
     });
     onRegisterApi?.(gridApi);
-    (0, import_ui_grid2.raiseGridRenderingComplete)(gridApi);
+    (0, import_ui_grid_core2.raiseGridRenderingComplete)(gridApi);
   }, [options.id]);
   (0, import_react.useEffect)(() => {
-    (0, import_ui_grid2.raiseGridRowsRendered)(gridApi, pipeline.visibleRows);
-    (0, import_ui_grid2.raiseGridRowsVisibleChanged)(gridApi, pipeline.visibleRows);
+    (0, import_ui_grid_core2.raiseGridRowsRendered)(gridApi, pipeline.visibleRows);
+    (0, import_ui_grid_core2.raiseGridRowsVisibleChanged)(gridApi, pipeline.visibleRows);
     const newHeight = pipeline.displayItems.length * rowSize;
     if (newHeight !== lastCanvasHeightRef.current) {
-      (0, import_ui_grid2.raiseGridCanvasHeightChanged)(gridApi, lastCanvasHeightRef.current, newHeight);
+      (0, import_ui_grid_core2.raiseGridCanvasHeightChanged)(gridApi, lastCanvasHeightRef.current, newHeight);
       lastCanvasHeightRef.current = newHeight;
     }
   }, [pipeline, gridApi, rowSize]);
   (0, import_react.useEffect)(() => {
-    if (!import_ui_grid2.FEATURE_AUTO_RESIZE || !options.enableAutoResize) return;
+    if (!import_ui_grid_core2.FEATURE_AUTO_RESIZE || !options.enableAutoResize) return;
     const container = gridContainerRef.current;
     if (!container) return;
-    const observer = (0, import_ui_grid2.observeGridHostSize)(container, ({ height: nextHeight, width: nextWidth }) => {
+    const observer = (0, import_ui_grid_core2.observeGridHostSize)(container, ({ height: nextHeight, width: nextWidth }) => {
       if (nextHeight === lastGridHeightRef.current && nextWidth === lastGridWidthRef.current)
         return;
-      (0, import_ui_grid2.raiseGridDimensionChanged)(
+      (0, import_ui_grid_core2.raiseGridDimensionChanged)(
         gridApi,
         lastGridHeightRef.current,
         lastGridWidthRef.current,
@@ -855,7 +858,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_grid2.headerLabel)(column), []);
+  const headerLabelFn = (0, import_react.useCallback)((column) => (0, import_ui_grid_core2.headerLabel)(column), []);
   const isGroupItemFn = (0, import_react.useCallback)(
     (item) => item.kind === "group",
     []
@@ -870,24 +873,24 @@ function useGridState(options, onRegisterApi) {
     []
   );
   const sortDirectionFn = (0, import_react.useCallback)((column) => {
-    return sortStateRef.current.columnName === column.name ? sortStateRef.current.direction : import_ui_grid2.SORT_DIRECTIONS.none;
+    return sortStateRef.current.columnName === column.name ? sortStateRef.current.direction : import_ui_grid_core2.SORT_DIRECTIONS.none;
   }, []);
   const sortButtonLabelFn = (0, import_react.useCallback)(
     (column) => {
-      return (0, import_ui_grid2.gridSortButtonLabel)(sortDirectionFn(column), labels);
+      return (0, import_ui_grid_core2.gridSortButtonLabel)(sortDirectionFn(column), labels);
     },
     [labels, sortDirectionFn]
   );
   const sortAriaSortFn = (0, import_react.useCallback)(
     (column) => {
-      return (0, import_ui_grid2.gridSortAriaSort)(sortDirectionFn(column));
+      return (0, import_ui_grid_core2.gridSortAriaSort)(sortDirectionFn(column));
     },
     [sortDirectionFn]
   );
   const groupingButtonLabelFn = (0, import_react.useCallback)(
     (column) => {
-      return (0, import_ui_grid2.gridGroupingButtonLabel)(
-        (0, import_ui_grid2.isGridColumnGrouped)(groupByColumnsRef.current, column),
+      return (0, import_ui_grid_core2.gridGroupingButtonLabel)(
+        (0, import_ui_grid_core2.isGridColumnGrouped)(groupByColumnsRef.current, column),
         labels
       );
     },
@@ -898,39 +901,39 @@ function useGridState(options, onRegisterApi) {
   }, []);
   const filterPlaceholderFn = (0, import_react.useCallback)(
     (column) => {
-      return (0, import_ui_grid2.gridFilterPlaceholder)((0, import_ui_grid2.isGridColumnFilterable)(optionsRef.current, column), labels);
+      return (0, import_ui_grid_core2.gridFilterPlaceholder)((0, import_ui_grid_core2.isGridColumnFilterable)(optionsRef.current, column), labels);
     },
     [labels]
   );
   const isFilterInputDisabledFn = (0, import_react.useCallback)((column) => {
-    return !(0, import_ui_grid2.isGridColumnFilterable)(optionsRef.current, column);
+    return !(0, import_ui_grid_core2.isGridColumnFilterable)(optionsRef.current, column);
   }, []);
   const groupDisclosureLabelFn = (0, import_react.useCallback)(
     (item) => {
-      return (0, import_ui_grid2.gridGroupDisclosureLabel)(item.collapsed, labels);
+      return (0, import_ui_grid_core2.gridGroupDisclosureLabel)(item.collapsed, labels);
     },
     [labels]
   );
   const cellContextFn = (0, import_react.useCallback)(
     (row, column) => {
-      return (0, import_ui_grid2.buildGridCellContext)(row, column);
+      return (0, import_ui_grid_core2.buildGridCellContext)(row, column);
     },
     []
   );
   const displayValueFn = (0, import_react.useCallback)(
     (row, column) => {
-      return (0, import_ui_grid2.formatGridCellDisplayValue)(cellContextFn(row, column));
+      return (0, import_ui_grid_core2.formatGridCellDisplayValue)(cellContextFn(row, column));
     },
     [cellContextFn]
   );
   const isFocusedCellFn = (0, import_react.useCallback)((row, column) => {
-    return (0, import_ui_grid2.isGridCellPosition)(focusedCellRef.current, row.id, column.name);
+    return (0, import_ui_grid_core2.isGridCellPosition)(focusedCellRef.current, row.id, column.name);
   }, []);
   const isEditingCellFn = (0, import_react.useCallback)((row, column) => {
-    return (0, import_ui_grid2.isGridCellPosition)(editingCellRef.current, row.id, column.name);
+    return (0, import_ui_grid_core2.isGridCellPosition)(editingCellRef.current, row.id, column.name);
   }, []);
   const editorInputTypeFn = (0, import_react.useCallback)((column) => {
-    return (0, import_ui_grid2.gridEditorInputType)(column);
+    return (0, import_ui_grid_core2.gridEditorInputType)(column);
   }, []);
   const expandedContextFn = (0, import_react.useCallback)(
     (row) => {
@@ -944,42 +947,42 @@ function useGridState(options, onRegisterApi) {
     },
     []
   );
-  const columnWidthFn = (0, import_react.useCallback)((column) => (0, import_ui_grid2.gridColumnWidth)(column), []);
+  const columnWidthFn = (0, import_react.useCallback)((column) => (0, import_ui_grid_core2.gridColumnWidth)(column), []);
   const isColumnSortableFn = (0, import_react.useCallback)((column) => {
-    return (0, import_ui_grid2.isGridColumnSortable)(optionsRef.current, column);
+    return (0, import_ui_grid_core2.isGridColumnSortable)(optionsRef.current, column);
   }, []);
   const isColumnFilterableFn = (0, import_react.useCallback)((column) => {
-    return (0, import_ui_grid2.isGridColumnFilterable)(optionsRef.current, column);
+    return (0, import_ui_grid_core2.isGridColumnFilterable)(optionsRef.current, column);
   }, []);
   const cellIndentFn = (0, import_react.useCallback)((row, column) => {
-    return (0, import_ui_grid2.gridCellIndent)(optionsRef.current, visibleColumnsRef.current, row, column);
+    return (0, import_ui_grid_core2.gridCellIndent)(optionsRef.current, visibleColumnsRef.current, row, column);
   }, []);
   const treeToggleLabelFn = (0, import_react.useCallback)(
     (row) => {
-      return (0, import_ui_grid2.gridTreeToggleLabelForRow)(expandedTreeRowsRef.current, row, labels);
+      return (0, import_ui_grid_core2.gridTreeToggleLabelForRow)(expandedTreeRowsRef.current, row, labels);
     },
     [labels]
   );
   const isTreeRowExpandedFn = (0, import_react.useCallback)((row) => {
-    return (0, import_ui_grid2.isGridTreeRowExpanded)(expandedTreeRowsRef.current, row);
+    return (0, import_ui_grid_core2.isGridTreeRowExpanded)(expandedTreeRowsRef.current, row);
   }, []);
   const expandToggleLabelFn = (0, import_react.useCallback)(
     (row) => {
-      return (0, import_ui_grid2.gridExpandToggleLabelForRow)(row, labels);
+      return (0, import_ui_grid_core2.gridExpandToggleLabelForRow)(row, labels);
     },
     [labels]
   );
   const isGroupedFn = (0, import_react.useCallback)((column) => {
-    return (0, import_ui_grid2.isGridColumnGrouped)(groupByColumnsRef.current, column);
+    return (0, import_ui_grid_core2.isGridColumnGrouped)(groupByColumnsRef.current, column);
   }, []);
   const showTreeToggleFn = (0, import_react.useCallback)((row, column) => {
-    return (0, import_ui_grid2.shouldShowGridTreeToggle)(optionsRef.current, visibleColumnsRef.current, row, column);
+    return (0, import_ui_grid_core2.shouldShowGridTreeToggle)(optionsRef.current, visibleColumnsRef.current, row, column);
   }, []);
   const showExpandToggleFn = (0, import_react.useCallback)((row, column) => {
-    return (0, import_ui_grid2.shouldShowGridExpandToggle)(optionsRef.current, visibleColumnsRef.current, column);
+    return (0, import_ui_grid_core2.shouldShowGridExpandToggle)(optionsRef.current, visibleColumnsRef.current, column);
   }, []);
   const showPaginationControlsFn = (0, import_react.useCallback)(() => {
-    return import_ui_grid2.FEATURE_PAGINATION && (0, import_ui_grid2.shouldShowGridPaginationControls)(optionsRef.current);
+    return import_ui_grid_core2.FEATURE_PAGINATION && (0, import_ui_grid_core2.shouldShowGridPaginationControls)(optionsRef.current);
   }, []);
   const paginationSummaryFn = (0, import_react.useCallback)(() => {
     const ti = pipelineRef.current.totalItems;
@@ -989,22 +992,22 @@ function useGridState(options, onRegisterApi) {
     return optionsRef.current.paginationPageSizes ?? [];
   }, []);
   const isGroupingEnabledFn = (0, import_react.useCallback)(() => {
-    return import_ui_grid2.FEATURE_GROUPING && (0, import_ui_grid2.isGridGroupingEnabled)(optionsRef.current);
+    return import_ui_grid_core2.FEATURE_GROUPING && (0, import_ui_grid_core2.isGridGroupingEnabled)(optionsRef.current);
   }, []);
   const isFilteringEnabledFn = (0, import_react.useCallback)(() => {
-    return import_ui_grid2.FEATURE_FILTERING && (0, import_ui_grid2.isGridFilteringEnabled)(optionsRef.current);
+    return import_ui_grid_core2.FEATURE_FILTERING && (0, import_ui_grid_core2.isGridFilteringEnabled)(optionsRef.current);
   }, []);
   const toggleSortFn = (0, import_react.useCallback)((column) => {
-    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,
+    if (!import_ui_grid_core2.FEATURE_SORTING || !(0, import_ui_grid_core2.isGridColumnSortable)(optionsRef.current, column)) return;
+    const currentDirection = sortStateRef.current.columnName === column.name ? sortStateRef.current.direction : import_ui_grid_core2.SORT_DIRECTIONS.none;
+    const nextDirection = currentDirection === import_ui_grid_core2.SORT_DIRECTIONS.none ? import_ui_grid_core2.SORT_DIRECTIONS.asc : currentDirection === import_ui_grid_core2.SORT_DIRECTIONS.asc ? import_ui_grid_core2.SORT_DIRECTIONS.desc : import_ui_grid_core2.SORT_DIRECTIONS.none;
+    (0, import_ui_grid_core2.applyGridSortStateCommand)(gridApiRef.current, (state) => setSortState(state), {
+      columnName: nextDirection === import_ui_grid_core2.SORT_DIRECTIONS.none ? null : column.name,
       direction: nextDirection
     });
   }, []);
   const updateFilterFn = (0, import_react.useCallback)((columnName, value) => {
-    (0, import_ui_grid2.updateGridFilterCommand)(
+    (0, import_ui_grid_core2.updateGridFilterCommand)(
       gridApiRef.current,
       (updater) => setActiveFilters((current) => updater(current)),
       () => activeFiltersRef.current,
@@ -1013,11 +1016,11 @@ function useGridState(options, onRegisterApi) {
     );
   }, []);
   const clearAllFiltersFn = (0, import_react.useCallback)(() => {
-    (0, import_ui_grid2.clearGridFiltersCommand)(gridApiRef.current, (filters) => setActiveFilters(filters));
+    (0, import_ui_grid_core2.clearGridFiltersCommand)(gridApiRef.current, (filters) => setActiveFilters(filters));
   }, []);
   const toggleGroupingFn = (0, import_react.useCallback)((column, event) => {
     event?.stopPropagation();
-    if (!(import_ui_grid2.FEATURE_GROUPING && (0, import_ui_grid2.isGridGroupingEnabled)(optionsRef.current))) return;
+    if (!(import_ui_grid_core2.FEATURE_GROUPING && (0, import_ui_grid_core2.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;
@@ -1032,7 +1035,7 @@ function useGridState(options, onRegisterApi) {
   }, []);
   const focusCellFn = (0, import_react.useCallback)(
     (row, column, triggerEvent) => {
-      const nextFocusResult = (0, import_ui_grid2.buildGridFocusCellResult)({
+      const nextFocusResult = (0, import_ui_grid_core2.buildGridFocusCellResult)({
         currentFocusedCell: focusedCellRef.current,
         currentEditingCell: editingCellRef.current,
         rowId: row.id,
@@ -1091,7 +1094,7 @@ function useGridState(options, onRegisterApi) {
         default:
           break;
       }
-      if ((0, import_ui_grid2.isPrintableGridKey)(event.key, event.ctrlKey, event.metaKey, event.altKey) && isCellEditable(row, column, event.nativeEvent)) {
+      if ((0, import_ui_grid_core2.isPrintableGridKey)(event.key, event.ctrlKey, event.metaKey, event.altKey) && isCellEditable(row, column, event.nativeEvent)) {
         event.preventDefault();
         startCellEditFn(row, column, event.nativeEvent, event.key);
       }
@@ -1155,14 +1158,25 @@ function useGridState(options, onRegisterApi) {
     [toggleTreeRowByRefFn]
   );
   const moveColumnFn = (0, import_react.useCallback)((fromIndex, toIndex) => {
-    (0, import_ui_grid2.moveGridColumnCommand)(
+    (0, import_ui_grid_core2.moveGridColumnCommand)(
       gridApiRef.current,
-      import_ui_grid2.FEATURE_COLUMN_MOVING && optionsRef.current.enableColumnMoving === true,
+      import_ui_grid_core2.FEATURE_COLUMN_MOVING && optionsRef.current.enableColumnMoving === true,
       (updater) => setColumnOrder((current) => updater(current)),
       fromIndex,
       toIndex
     );
   }, []);
+  const moveVisibleColumnFn = (0, import_react.useCallback)((columnName, targetColumnName) => {
+    (0, import_ui_grid_core2.moveGridVisibleColumnCommand)(
+      gridApiRef.current,
+      import_ui_grid_core2.FEATURE_COLUMN_MOVING && optionsRef.current.enableColumnMoving === true,
+      columnOrderRef.current,
+      visibleColumnsRef.current.map((column) => column.name),
+      columnName,
+      targetColumnName,
+      (order) => setColumnOrder(order)
+    );
+  }, []);
   const nextPageFn = (0, import_react.useCallback)(() => {
     seekPageFn(getCurrentPageValueFn() + 1);
   }, [seekPageFn, getCurrentPageValueFn]);
@@ -1178,17 +1192,17 @@ function useGridState(options, onRegisterApi) {
   const onViewportScrollFn = (0, import_react.useCallback)((startIndex) => {
     if (!scrollingRef.current) {
       scrollingRef.current = true;
-      (0, import_ui_grid2.raiseGridScrollBegin)(gridApiRef.current);
+      (0, import_ui_grid_core2.raiseGridScrollBegin)(gridApiRef.current);
     }
     if (scrollEndHandleRef.current) {
       window.clearTimeout(scrollEndHandleRef.current);
     }
     scrollEndHandleRef.current = window.setTimeout(() => {
       scrollingRef.current = false;
-      (0, import_ui_grid2.raiseGridScrollEnd)(gridApiRef.current);
+      (0, import_ui_grid_core2.raiseGridScrollEnd)(gridApiRef.current);
     }, 120);
-    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, {
+    const isInfiniteScrollEnabled = import_ui_grid_core2.FEATURE_INFINITE_SCROLL && (optionsRef.current.infiniteScrollRowsFromEnd !== void 0 || optionsRef.current.infiniteScrollUp === true || optionsRef.current.infiniteScrollDown !== void 0);
+    (0, import_ui_grid_core2.maybeRequestInfiniteScrollCommand)(gridApiRef.current, {
       enabled: isInfiniteScrollEnabled,
       virtualizationEnabled: pipelineRef.current.virtualizationEnabled,
       state: infiniteScrollStateRef.current,
@@ -1266,16 +1280,16 @@ function useGridState(options, onRegisterApi) {
     pageSizeOptions: pageSizeOptionsFn,
     isCellEditable,
     shouldEditOnFocus: shouldEditOnFocusFn,
-    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,
+    sortingFeature: import_ui_grid_core2.FEATURE_SORTING,
+    filteringFeature: import_ui_grid_core2.FEATURE_FILTERING,
+    groupingFeature: import_ui_grid_core2.FEATURE_GROUPING,
+    paginationFeature: import_ui_grid_core2.FEATURE_PAGINATION,
+    cellEditFeature: import_ui_grid_core2.FEATURE_CELL_EDIT,
+    expandableFeature: import_ui_grid_core2.FEATURE_EXPANDABLE,
+    treeViewFeature: import_ui_grid_core2.FEATURE_TREE_VIEW,
+    infiniteScrollFeature: import_ui_grid_core2.FEATURE_INFINITE_SCROLL,
+    columnMovingFeature: import_ui_grid_core2.FEATURE_COLUMN_MOVING,
+    csvExportFeature: import_ui_grid_core2.FEATURE_CSV_EXPORT,
     isGroupingEnabled: isGroupingEnabledFn,
     isFilteringEnabled: isFilteringEnabledFn,
     toggleSort: toggleSortFn,
@@ -1292,6 +1306,7 @@ function useGridState(options, onRegisterApi) {
     toggleRowExpansion: toggleRowExpansionFn,
     toggleTreeRow: toggleTreeRowFn,
     moveColumn: moveColumnFn,
+    moveVisibleColumn: moveVisibleColumnFn,
     nextPage: nextPageFn,
     previousPage: previousPageFn,
     onPageSizeChange: onPageSizeChangeFn,
@@ -1304,7 +1319,7 @@ function useGridState(options, onRegisterApi) {
     isPinningEnabled: isPinningEnabledFn,
     isColumnPinnable: isColumnPinnableFn,
     togglePin: togglePinFn,
-    pinningFeature: import_ui_grid2.FEATURE_PINNING
+    pinningFeature: import_ui_grid_core2.FEATURE_PINNING
   };
 }
 
@@ -1391,23 +1406,30 @@ function UiGrid({
     expandableFeature,
     treeViewFeature,
     csvExportFeature,
+    columnMovingFeature,
     paginationCurrentPage,
     paginationTotalPages,
     paginationSelectedPageSize
   } = state;
+  const headerGridRef = import_react3.default.useRef(null);
+  const filterGridRef = import_react3.default.useRef(null);
+  const [headerStickyHeight, setHeaderStickyHeight] = import_react3.default.useState(0);
+  const [filterStickyHeight, setFilterStickyHeight] = import_react3.default.useState(0);
+  const stickyChromeHeight = headerStickyHeight + filterStickyHeight;
+  const bodyViewportHeight = Math.max(
+    rowSize,
+    (options.viewportHeight ?? 560) - stickyChromeHeight
+  );
   const virtualScroll = useVirtualScroll({
     itemCount: displayItems.length,
     itemSize: rowSize,
-    viewportHeight: options.viewportHeight ?? 560,
+    viewportHeight: bodyViewportHeight,
     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 [draggedColumnName, setDraggedColumnName] = import_react3.default.useState(null);
+  const [dropTargetColumnName, setDropTargetColumnName] = import_react3.default.useState(null);
+  const scrollContainerHeight = `${options.viewportHeight ?? 560}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) => {
@@ -1446,10 +1468,72 @@ function UiGrid({
     },
     [state]
   );
+  const handleHeaderDragStart = import_react3.default.useCallback(
+    (column, event) => {
+      if (!columnMovingFeature) {
+        event.preventDefault();
+        return;
+      }
+      setDraggedColumnName(column.name);
+      setDropTargetColumnName(null);
+      event.dataTransfer.effectAllowed = "move";
+      event.dataTransfer.setData("text/plain", column.name);
+    },
+    [columnMovingFeature]
+  );
+  const handleHeaderDragOver = import_react3.default.useCallback(
+    (column, event) => {
+      if (!columnMovingFeature || !draggedColumnName || draggedColumnName === column.name) {
+        return;
+      }
+      event.preventDefault();
+      event.dataTransfer.dropEffect = "move";
+      setDropTargetColumnName(column.name);
+    },
+    [columnMovingFeature, draggedColumnName]
+  );
+  const handleHeaderDrop = import_react3.default.useCallback(
+    (column, event) => {
+      event.preventDefault();
+      if (!columnMovingFeature) {
+        return;
+      }
+      const sourceColumnName = draggedColumnName ?? event.dataTransfer.getData("text/plain");
+      setDraggedColumnName(null);
+      setDropTargetColumnName(null);
+      if (!sourceColumnName || sourceColumnName === column.name) {
+        return;
+      }
+      state.moveVisibleColumn(sourceColumnName, column.name);
+    },
+    [columnMovingFeature, draggedColumnName, state]
+  );
+  const handleHeaderDragEnd = import_react3.default.useCallback(() => {
+    setDraggedColumnName(null);
+    setDropTargetColumnName(null);
+  }, []);
   import_react3.default.useLayoutEffect(() => {
     setHeaderStickyHeight(headerGridRef.current?.offsetHeight ?? 0);
     setFilterStickyHeight(filterGridRef.current?.offsetHeight ?? 0);
   }, [visibleColumns, filteringFeature, options.enableFiltering]);
+  import_react3.default.useLayoutEffect(() => {
+    const headerElement = headerGridRef.current;
+    const filterElement = filterGridRef.current;
+    if (typeof ResizeObserver === "undefined" || !headerElement && !filterElement) {
+      return;
+    }
+    const observer = new ResizeObserver(() => {
+      setHeaderStickyHeight(headerGridRef.current?.offsetHeight ?? 0);
+      setFilterStickyHeight(filterGridRef.current?.offsetHeight ?? 0);
+    });
+    if (headerElement) {
+      observer.observe(headerElement);
+    }
+    if (filterElement) {
+      observer.observe(filterElement);
+    }
+    return () => observer.disconnect();
+  }, []);
   import_react3.default.useEffect(() => {
     if (!openPinMenuColumn) {
       return;
@@ -1570,12 +1654,21 @@ function UiGrid({
                     "aria-label": state.treeToggleLabel(rowItem.row),
                     "aria-expanded": state.isTreeRowExpanded(rowItem.row),
                     onClick: (e) => state.toggleTreeRow(rowItem.row, e),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "toggle-icon", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      "path",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "svg",
                       {
-                        d: state.isTreeRowExpanded(rowItem.row) ? "M7 10l5 5 5-5z" : "M10 7l5 5-5 5z"
+                        className: "toggle-icon",
+                        viewBox: "0 0 24 24",
+                        "aria-hidden": "true",
+                        focusable: false,
+                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "path",
+                          {
+                            d: state.isTreeRowExpanded(rowItem.row) ? "M7 10l5 5 5-5z" : "M10 7l5 5-5 5z"
+                          }
+                        )
                       }
-                    ) })
+                    )
                   }
                 ),
                 expandableFeature && state.showExpandToggle(rowItem.row, column) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -1587,7 +1680,16 @@ function UiGrid({
                     "aria-label": state.expandToggleLabel(rowItem.row),
                     "aria-expanded": rowItem.row.expanded,
                     onClick: (e) => state.toggleRowExpansion(rowItem.row, e),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "toggle-icon", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: rowItem.row.expanded ? "M7 10l5 5 5-5z" : "M10 7l5 5-5 5z" }) })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "svg",
+                      {
+                        className: "toggle-icon",
+                        viewBox: "0 0 24 24",
+                        "aria-hidden": "true",
+                        focusable: false,
+                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: rowItem.row.expanded ? "M7 10l5 5 5-5z" : "M10 7l5 5-5 5z" })
+                      }
+                    )
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cell-value", children: cellEditFeature && state.isEditingCell(rowItem.row, column) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -1739,10 +1841,20 @@ function UiGrid({
                       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" : ""}`,
+                          className: `header-cell ui-grid-header-cell${sortingFeature && state.sortDirection(column) !== "none" ? " is-active" : ""}${pinned ? " is-pinned" : ""}${pinMenuOpen ? " is-pin-menu-open" : ""}${draggedColumnName === column.name ? " is-dragging" : ""}${dropTargetColumnName === column.name ? " is-drag-target" : ""}`,
                           "data-part": "header-cell",
                           role: "columnheader",
                           "aria-sort": sortingFeature ? state.sortAriaSort(column) : void 0,
+                          draggable: columnMovingFeature,
+                          onDragStart: (event) => handleHeaderDragStart(column, event),
+                          onDragOver: (event) => handleHeaderDragOver(column, event),
+                          onDrop: (event) => handleHeaderDrop(column, event),
+                          onDragEnd: handleHeaderDragEnd,
+                          onDragLeave: () => {
+                            if (dropTargetColumnName === column.name) {
+                              setDropTargetColumnName(null);
+                            }
+                          },
                           style: {
                             position: pinned ? "sticky" : void 0,
                             left: pinOffset?.side === "left" ? pinOffset.offset : void 0,
@@ -1782,71 +1894,78 @@ function UiGrid({
                                   ]
                                 }
                               ),
-                              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 })
-                                          ]
-                                        }
-                                      )
-                                    ]
-                                  }
-                                )
-                              ] })
+                              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 })
+                                              ]
+                                            }
+                                          )
+                                        ]
+                                      }
+                                    )
+                                  ]
+                                }
+                              )
                             ] })
                           ]
                         },
@@ -1861,7 +1980,10 @@ function UiGrid({
                     className: "filter-grid ui-grid-header",
                     "data-part": "filters",
                     ref: filterGridRef,
-                    style: { gridTemplateColumns, ["--ui-grid-header-sticky-top"]: `${headerStickyHeight}px` },
+                    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;
@@ -1900,21 +2022,28 @@ function UiGrid({
                     })
                   }
                 ),
-                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)(
+                displayItems.length > 0 ? virtualizationEnabled ? /* @__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: `${virtualScroll.offsetY}px`,
-                      left: 0
-                    },
-                    children: itemsToRender.map(renderDisplayItem)
+                    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: `${virtualScroll.offsetY}px`,
+                          left: 0
+                        },
+                        children: itemsToRender.map(renderDisplayItem)
+                      }
+                    )
                   }
-                ) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   "div",
                   {
                     className: "body-grid ui-grid-canvas",
@@ -2026,12 +2155,31 @@ function mountUiGrid(container, props) {
   return root;
 }
 
+// src/vanillaAdapter.ts
+async function mountUiGridCustomElement(container, mountOptions) {
+  const tagName = mountOptions.tagName ?? "ui-grid-element";
+  if (mountOptions.ensureDefined) {
+    await mountOptions.ensureDefined(tagName);
+  }
+  const element = document.createElement(tagName);
+  element.options = mountOptions.options;
+  container.replaceChildren(element);
+  return {
+    element,
+    unmount: () => {
+      if (container.firstElementChild === element) {
+        container.replaceChildren();
+      }
+    }
+  };
+}
+
 // src/rustWasmGridEngine.ts
-var import_ui_grid3 = require("@ornery/ui-grid");
+var import_ui_grid_core3 = require("@ornery/ui-grid-core");
 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_grid3.registerRustWasmGridEngine)({
+  (0, import_ui_grid_core3.registerRustWasmGridEngine)({
     buildPipeline(context) {
       return module2.build_pipeline_js(context);
     }
@@ -2047,7 +2195,7 @@ async function enableReactUiGridWasmEngine() {
 }
 
 // src/index.ts
-var import_ui_grid4 = require("@ornery/ui-grid");
+var import_ui_grid_core4 = require("@ornery/ui-grid-core");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DEFAULT_GRID_LABELS,
@@ -2058,6 +2206,7 @@ var import_ui_grid4 = require("@ornery/ui-grid");
   enableReactUiGridWasmEngine,
   formatPaginationSummary,
   mountUiGrid,
+  mountUiGridCustomElement,
   orderVisibleColumns,
   registerReactUiGridWasmEngineFromModule,
   resolveBenchmarkIterations,