@revolist/revogrid 4.23.7 → 4.23.9

package/dist/types/components.d.ts

@@ -5,7 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { AdditionalData, AfterEditEvent, AllDimensionType, ApplyFocusEvent, BeforeCellRenderEvent, BeforeEdit, BeforeRangeSaveDataDetails, BeforeRowRenderEvent, BeforeSaveDataDetails, Cell, CellTemplateProp, ChangedRange, ColumnDataSchemaModel, ColumnGrouping, ColumnProp, ColumnRegular, ColumnType, DataFormat, DataType, DimensionCols, DimensionRows, DimensionSettingsState, DimensionType, DimensionTypeCol, DragStartEvent, EditCell, EditorCtr, Editors, ElementScroll, ExtraNodeFuncConfig, FocusAfterRenderEvent, FocusRenderEvent, FocusTemplateFunc, InitialHeaderClick, MultiDimensionType, Nullable, PluginBaseComponent, PluginProviders, PositionItem, ProvidersColumns, RangeArea, RangeClipboardCopyEventProps, RangeClipboardPasteEvent, RowDefinition, RowDragStartDetails, RowHeaders, SaveDataDetails, SelectionStoreState, TempRange, Theme, ViewportData, ViewPortResizeEvent, ViewPortScrollEvent, ViewportState, ViewSettingSizeProp } from "./types/index";
+import { AdditionalData, AfterEditEvent, AllDimensionType, ApplyFocusEvent, BeforeCellRenderEvent, BeforeEdit, BeforeRangeSaveDataDetails, BeforeRowRenderEvent, BeforeSaveDataDetails, Cell, CellTemplateProp, ChangedRange, ClipboardConfig, ColumnDataSchemaModel, ColumnGrouping, ColumnProp, ColumnRegular, ColumnType, DataFormat, DataType, DimensionCols, DimensionRows, DimensionSettingsState, DimensionType, DimensionTypeCol, DragStartEvent, EditCell, EditorCtr, Editors, ElementScroll, ExtraNodeFuncConfig, FocusAfterRenderEvent, FocusRenderEvent, FocusTemplateFunc, InitialHeaderClick, MultiDimensionType, Nullable, PluginBaseComponent, PluginProviders, PositionItem, ProvidersColumns, RangeArea, RangeClipboardCopyEventProps, RangeClipboardPasteEvent, RowDefinition, RowDragStartDetails, RowHeaders, SaveDataDetails, SelectionStoreState, TempRange, Theme, ViewportData, ViewPortResizeEvent, ViewPortScrollEvent, ViewportState, ViewSettingSizeProp } from "./types/index";
 import { GridPlugin } from "./plugins/base.plugin";
 import { AutoSizeColumnConfig } from "./plugins/column.auto-size.plugin";
 import { ColumnFilterConfig, FilterCaptions, FilterCollectionItem, LogicFunction, MultiFilterItem, ShowData } from "./plugins/filter/filter.types";
@@ -21,7 +21,7 @@ import { ResizeProps } from "./components/header/resizable.directive";
 import { HeaderRenderProps } from "./components/header/header-renderer";
 import { HeaderGroupRendererProps } from "./components/header/header-group-renderer";
 import { EventData } from "./components/overlay/selection.utils";
-export { AdditionalData, AfterEditEvent, AllDimensionType, ApplyFocusEvent, BeforeCellRenderEvent, BeforeEdit, BeforeRangeSaveDataDetails, BeforeRowRenderEvent, BeforeSaveDataDetails, Cell, CellTemplateProp, ChangedRange, ColumnDataSchemaModel, ColumnGrouping, ColumnProp, ColumnRegular, ColumnType, DataFormat, DataType, DimensionCols, DimensionRows, DimensionSettingsState, DimensionType, DimensionTypeCol, DragStartEvent, EditCell, EditorCtr, Editors, ElementScroll, ExtraNodeFuncConfig, FocusAfterRenderEvent, FocusRenderEvent, FocusTemplateFunc, InitialHeaderClick, MultiDimensionType, Nullable, PluginBaseComponent, PluginProviders, PositionItem, ProvidersColumns, RangeArea, RangeClipboardCopyEventProps, RangeClipboardPasteEvent, RowDefinition, RowDragStartDetails, RowHeaders, SaveDataDetails, SelectionStoreState, TempRange, Theme, ViewportData, ViewPortResizeEvent, ViewPortScrollEvent, ViewportState, ViewSettingSizeProp } from "./types/index";
+export { AdditionalData, AfterEditEvent, AllDimensionType, ApplyFocusEvent, BeforeCellRenderEvent, BeforeEdit, BeforeRangeSaveDataDetails, BeforeRowRenderEvent, BeforeSaveDataDetails, Cell, CellTemplateProp, ChangedRange, ClipboardConfig, ColumnDataSchemaModel, ColumnGrouping, ColumnProp, ColumnRegular, ColumnType, DataFormat, DataType, DimensionCols, DimensionRows, DimensionSettingsState, DimensionType, DimensionTypeCol, DragStartEvent, EditCell, EditorCtr, Editors, ElementScroll, ExtraNodeFuncConfig, FocusAfterRenderEvent, FocusRenderEvent, FocusTemplateFunc, InitialHeaderClick, MultiDimensionType, Nullable, PluginBaseComponent, PluginProviders, PositionItem, ProvidersColumns, RangeArea, RangeClipboardCopyEventProps, RangeClipboardPasteEvent, RowDefinition, RowDragStartDetails, RowHeaders, SaveDataDetails, SelectionStoreState, TempRange, Theme, ViewportData, ViewPortResizeEvent, ViewPortScrollEvent, ViewportState, ViewSettingSizeProp } from "./types/index";
 export { GridPlugin } from "./plugins/base.plugin";
 export { AutoSizeColumnConfig } from "./plugins/column.auto-size.plugin";
 export { ColumnFilterConfig, FilterCaptions, FilterCollectionItem, LogicFunction, MultiFilterItem, ShowData } from "./plugins/filter/filter.types";
@@ -225,7 +225,7 @@ export namespace Components {
          */
         "plugins": GridPlugin[];
         /**
-          * When true, user can range selection.
+          * When true, user can select a cell range. Required for range-based clipboard fill.
           * @default false
          */
         "range": boolean;
@@ -344,10 +344,10 @@ export namespace Components {
          */
         "updateColumns": (cols: ColumnRegular[]) => Promise<void>;
         /**
-          * When true enable clipboard.
+          * When true enable clipboard. Can be boolean or clipboard config.
           * @default true
          */
-        "useClipboard": boolean;
+        "useClipboard": boolean | ClipboardConfig;
     }
     interface RevogrAttribution {
     }
@@ -685,9 +685,9 @@ export namespace Components {
          */
         "selectionStore": Observable<SelectionStoreState>;
         /**
-          * Enable revogr-clipboard component (read more in revogr-clipboard component). Allows copy/paste.
+          * Enable revogr-clipboard component (read more in revogr-clipboard component). Allows copy/paste. Can be boolean or clipboard config.
          */
-        "useClipboard": boolean;
+        "useClipboard": boolean | ClipboardConfig;
     }
     /**
      * Row headers component
@@ -1687,7 +1687,7 @@ declare namespace LocalJSX {
          */
         "plugins"?: GridPlugin[];
         /**
-          * When true, user can range selection.
+          * When true, user can select a cell range. Required for range-based clipboard fill.
           * @default false
          */
         "range"?: boolean;
@@ -1758,10 +1758,10 @@ declare namespace LocalJSX {
          */
         "trimmedRows"?: Record<number, boolean>;
         /**
-          * When true enable clipboard.
+          * When true enable clipboard. Can be boolean or clipboard config.
           * @default true
          */
-        "useClipboard"?: boolean;
+        "useClipboard"?: boolean | ClipboardConfig;
     }
     interface RevogrAttribution {
     }
@@ -2343,9 +2343,9 @@ declare namespace LocalJSX {
          */
         "selectionStore": Observable<SelectionStoreState>;
         /**
-          * Enable revogr-clipboard component (read more in revogr-clipboard component). Allows copy/paste.
+          * Enable revogr-clipboard component (read more in revogr-clipboard component). Allows copy/paste. Can be boolean or clipboard config.
          */
-        "useClipboard"?: boolean;
+        "useClipboard"?: boolean | ClipboardConfig;
     }
     /**
      * Row headers component
@@ -2498,7 +2498,7 @@ declare namespace LocalJSX {
         "resize": boolean;
         "noHorizontalScrollTransfer": boolean;
         "canFocus": boolean;
-        "useClipboard": boolean;
+        "useClipboard": boolean | ClipboardConfig;
         "applyOnClose": boolean;
         "theme": Theme;
         "rowClass": string;
@@ -2552,7 +2552,7 @@ declare namespace LocalJSX {
         "readonly": boolean;
         "range": boolean;
         "canDrag": boolean;
-        "useClipboard": boolean;
+        "useClipboard": boolean | ClipboardConfig;
         "applyChangesOnClose": boolean;
         "additionalData": string;
         "isMobileDevice": boolean;

package/dist/types/plugins/filter/filter.plugin.d.ts

@@ -47,6 +47,7 @@ export declare class FilterPlugin extends BasePlugin {
     filterFunctionsIndexedByType: Record<string, LogicFunction>;
     filterProp: string;
     extraHyperContent?: (data: ShowData) => VNode | VNode[];
+    extraBottomHyperContent?: (data: ShowData) => VNode | VNode[];
     constructor(revogrid: HTMLRevoGridElement, providers: PluginProviders, config?: ColumnFilterConfig | undefined);
     beforeshow(_: ShowData): void;
     extraContent(): any;

package/dist/types/plugins/filter/filter.types.d.ts

@@ -126,4 +126,5 @@ export interface ShowData extends FilterItem, Omit<ColumnRegular, 'filter'> {
     filterItems?: MultiFilterItem;
     hideDefaultFilters?: boolean;
     extraContent?: (data: ShowData) => any;
+    extraBottomContent?: (data: ShowData) => any;
 }

package/dist/types/plugins/moveColumn/column.drag.plugin.d.ts

@@ -53,8 +53,11 @@ declare global {
 }
 export declare class ColumnMovePlugin extends BasePlugin {
     protected moveFunc: import("lodash").DebouncedFunc<(e: MouseEvent) => void>;
+    protected preventHeaderClickAfterDrag: (event: Event) => void;
     protected staticDragData: StaticData | null;
     protected dragData: ColumnDragEventData | null;
+    protected columnDragMoved: boolean;
+    protected preventNextHeaderClick: boolean;
     readonly orderUi: ColumnOrderHandler;
     readonly localSubscriptions: LocalSubscriptions;
     constructor(revogrid: HTMLRevoGridElement, providers: PluginProviders);
@@ -73,4 +76,5 @@ export declare class ColumnMovePlugin extends BasePlugin {
     protected getDimension(type: MultiDimensionType): DimensionSettingsState;
 }
 export declare function getLeftRelative(absoluteX: number, gridPos: number, offset: number): number;
+export declare function getColumnDragPosition(targetItem: PositionItem, startItem: PositionItem, renderOffset: number, scrollOffset: number): number;
 export {};

package/dist/types/types/interfaces.d.ts

@@ -788,6 +788,14 @@ export interface RangeClipboardCopyEventProps<T = any> extends AllDimensionType
     range: RangeArea;
     mapping: OldNewRangeMapping;
 }
+/** Clipboard behavior configuration. */
+export interface ClipboardConfig {
+    /**
+     * When true, pasting a single clipboard cell fills the selected range.
+     * Requires range selection to be enabled on the grid.
+     */
+    rangeFill?: boolean;
+}
 export interface AdditionalData {
     /**
      * Additional data for grid and plugins

package/hydrate/index.js

@@ -7725,7 +7725,7 @@ class FilterPanel {
             } }));
     }
     render() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         if (!this.changes) {
             return hAsync(Host, { style: { display: 'none' } });
         }
@@ -7742,7 +7742,7 @@ class FilterPanel {
             hAsync("label", null, capts.title),
             hAsync("div", { class: "filter-holder" }, this.getFilterItemsList()),
             hAsync("div", { class: "add-filter" }, hAsync("select", { id: FILTER_ID, class: "select-css", onChange: e => this.onAddNewFilter(e) }, this.renderSelectOptions(this.currentFilterType)))
-        ]), hAsync("slot", null), hAsync("div", { class: "filter-actions" }, this.disableDynamicFiltering && [
+        ]), hAsync("slot", null), ((_e = (_d = this.changes).extraBottomContent) === null || _e === void 0 ? void 0 : _e.call(_d, this.changes)) || '', hAsync("div", { class: "filter-actions" }, this.disableDynamicFiltering && [
             hAsync("button", { id: "revo-button-save", "aria-label": "save", class: "revo-button green", onClick: () => this.onSave() }, capts.save),
             hAsync("button", { id: "revo-button-ok", "aria-label": "ok", class: "revo-button green", onClick: () => this.onCancel() }, capts.cancel),
         ], !this.disableDynamicFiltering && [
@@ -13048,43 +13048,82 @@ class ColumnService {
             mapping,
         };
     }
-    getTransformedDataToApply(start, data) {
+    getTransformedDataToApply({ start, data, targetRange, }) {
         const changed = {};
         const copyRowLength = data.length;
+        if (!copyRowLength) {
+            return {
+                changed,
+                range: null,
+            };
+        }
         const colLength = this.columns.length;
         const rowLength = this.dataStore.get('items').length;
+        const bounds = this.getDataApplyBounds(start, targetRange, copyRowLength, rowLength, colLength);
+        if (!bounds) {
+            return {
+                changed,
+                range: null,
+            };
+        }
+        const { startRow, startCol, endRow } = bounds;
+        let maxCol = startCol - 1;
+        let lastRow = startRow - 1;
         // rows
-        let rowIndex = start.y;
-        let maxCol = 0;
-        for (let i = 0; rowIndex < rowLength && i < copyRowLength; rowIndex++, i++) {
+        for (let rowIndex = startRow, i = 0; rowIndex <= endRow; rowIndex++, i++) {
             // copy original data link
             const copyRow = data[i % copyRowLength];
             const copyColLength = (copyRow === null || copyRow === void 0 ? void 0 : copyRow.length) || 0;
-            // columns
-            let colIndex = start.x;
-            for (let j = 0; colIndex < colLength && j < copyColLength; colIndex++, j++) {
-                const p = this.columns[colIndex].prop;
-                const currentCol = j % colLength;
-                /** if can write */
-                if (!this.isReadOnly(rowIndex, colIndex)) {
-                    /** to show before save */
-                    if (!changed[rowIndex]) {
-                        changed[rowIndex] = {};
-                    }
-                    changed[rowIndex][p] = copyRow[currentCol];
-                }
+            if (!copyColLength) {
+                continue;
             }
-            maxCol = Math.max(maxCol, colIndex - 1);
+            maxCol = Math.max(maxCol, this.applyClipboardRow(changed, {
+                bounds,
+                copyColLength,
+                copyRow,
+                rowIndex,
+                start,
+                targetRange,
+            }));
+            lastRow = rowIndex;
         }
-        const range = getRange(start, {
-            y: rowIndex - 1,
-            x: maxCol,
-        });
         return {
             changed,
-            range,
+            range: this.getAppliedRange(bounds, lastRow, maxCol),
         };
     }
+    getDataApplyBounds(start, targetRange, copyRowLength, rowLength, colLength) {
+        var _a, _b, _c;
+        const startRow = (_a = targetRange === null || targetRange === void 0 ? void 0 : targetRange.y) !== null && _a !== void 0 ? _a : start.y;
+        const startCol = (_b = targetRange === null || targetRange === void 0 ? void 0 : targetRange.x) !== null && _b !== void 0 ? _b : start.x;
+        const endRow = Math.min(rowLength - 1, (_c = targetRange === null || targetRange === void 0 ? void 0 : targetRange.y1) !== null && _c !== void 0 ? _c : start.y + copyRowLength - 1);
+        if (endRow < startRow || startCol >= colLength) {
+            return null;
+        }
+        return { startRow, startCol, endRow, colLength };
+    }
+    applyClipboardRow(changed, { bounds, copyColLength, copyRow, rowIndex, start, targetRange, }) {
+        var _a;
+        const endCol = Math.min(bounds.colLength - 1, (_a = targetRange === null || targetRange === void 0 ? void 0 : targetRange.x1) !== null && _a !== void 0 ? _a : start.x + copyColLength - 1);
+        for (let colIndex = bounds.startCol, j = 0; colIndex <= endCol; colIndex++, j++) {
+            if (this.isReadOnly(rowIndex, colIndex)) {
+                continue;
+            }
+            const prop = this.columns[colIndex].prop;
+            changed[rowIndex] = changed[rowIndex] || {};
+            changed[rowIndex][prop] = copyRow[j % copyColLength];
+        }
+        return endCol;
+    }
+    getAppliedRange({ startRow, startCol }, lastRow, maxCol) {
+        if (lastRow < startRow || maxCol < startCol) {
+            return null;
+        }
+        return getRange({ x: startCol, y: startRow }, {
+            y: lastRow,
+            x: maxCol,
+        });
+    }
     getRangeStaticData(d, value) {
         const changed = {};
         // rows
@@ -13751,6 +13790,30 @@ class AutoFillService {
     }
 }
 
+function getRangeFillClipboardData(data, useClipboard) {
+    var _a;
+    if (!isClipboardRangeFillEnabled(useClipboard)) {
+        return null;
+    }
+    const normalized = trimTrailingEmptyClipboardRows(data);
+    return normalized.length === 1 && ((_a = normalized[0]) === null || _a === void 0 ? void 0 : _a.length) === 1
+        ? normalized
+        : null;
+}
+function isClipboardRangeFillEnabled(useClipboard) {
+    return (typeof useClipboard === 'object' && useClipboard.rangeFill === true);
+}
+function trimTrailingEmptyClipboardRows(data) {
+    const rows = [...data];
+    while (rows.length > 1 && isEmptyClipboardRow(rows[rows.length - 1])) {
+        rows.pop();
+    }
+    return rows;
+}
+function isEmptyClipboardRow(row) {
+    return !row || row.every(cell => cell === '');
+}
+
 const revogrOverlayStyleCss = () => `revogr-overlay-selection{display:block;position:relative;width:100%}revogr-overlay-selection .autofill-handle{position:absolute;width:14px;height:14px;margin-left:-13px;margin-top:-13px;z-index:10;cursor:crosshair}revogr-overlay-selection .autofill-handle::before{content:"";position:absolute;right:0;bottom:0;width:10px;height:10px;background:#0d63e8;border:1px solid white;box-sizing:border-box}revogr-overlay-selection.mobile .autofill-handle{position:absolute;width:30px;height:30px;margin-left:-29px;margin-top:-29px;z-index:10;cursor:crosshair}revogr-overlay-selection.mobile .autofill-handle::before{content:"";position:absolute;right:0;bottom:0;width:12px;height:12px;background:#0d63e8;border:1px solid white;box-sizing:border-box}revogr-overlay-selection .selection-border-range{position:absolute;pointer-events:none;z-index:9;box-shadow:-1px 0 0 #0d63e8 inset, 1px 0 0 #0d63e8 inset, 0 -1px 0 #0d63e8 inset, 0 1px 0 #0d63e8 inset}revogr-overlay-selection .selection-border-range .range-handlers{height:100%;background-color:transparent;width:75%;max-width:50px;min-width:20px;left:50%;transform:translateX(-50%);position:absolute}revogr-overlay-selection .selection-border-range .range-handlers>span{pointer-events:auto;height:20px;width:20px;position:absolute;left:50%;transform:translateX(-50%)}revogr-overlay-selection .selection-border-range .range-handlers>span:before,revogr-overlay-selection .selection-border-range .range-handlers>span:after{position:absolute;border-radius:5px;width:15px;height:5px;left:50%;transform:translateX(-50%);background-color:rgba(0, 0, 0, 0.2)}revogr-overlay-selection .selection-border-range .range-handlers>span:first-child{top:-7px}revogr-overlay-selection .selection-border-range .range-handlers>span:first-child:before{content:"";top:0}revogr-overlay-selection .selection-border-range .range-handlers>span:last-child{bottom:-7px}revogr-overlay-selection .selection-border-range .range-handlers>span:last-child:after{content:"";bottom:0}revogr-overlay-selection revogr-edit{z-index:10}`;
 
 /**
@@ -14001,9 +14064,9 @@ class OverlaySelection {
                 nodes.push(hAsync("revogr-order-editor", { ref: e => (this.orderEditor = e), dataStore: this.dataStore, dimensionRow: this.dimensionRow, dimensionCol: this.dimensionCol, parent: this.element, rowType: this.types.rowType, onRowdragstartinit: e => this.rowDragStart(e) }));
             }
         }
-        return (hAsync(Host, { key: 'd936e8452e84c7a25ecd6502e929f1a5af69467f', class: { mobile: this.isMobileDevice }, onDblClick: (e) => this.onElementDblClick(e), onMouseDown: (e) => this.onElementMouseDown(e), onTouchStart: (e) => this.onElementMouseDown(e, true), onCloseedit: (e) => this.closeEdit(e),
+        return (hAsync(Host, { key: 'ff303c39d59e4ef217421fa11b9a80de07311b07', class: { mobile: this.isMobileDevice }, onDblClick: (e) => this.onElementDblClick(e), onMouseDown: (e) => this.onElementMouseDown(e), onTouchStart: (e) => this.onElementMouseDown(e, true), onCloseedit: (e) => this.closeEdit(e),
             // it's done to be able to throw events from different levels, not just from editor
-            onCelledit: (e) => this.onEditCell(e) }, nodes, hAsync("slot", { key: 'cd3525d404aa44fd8d06e7fc459777acb8a9d585', name: "data" })));
+            onCelledit: (e) => this.onEditCell(e) }, nodes, hAsync("slot", { key: '3cbe4c3ad7d447f779e9e20f73eec2e3107275e0', name: "data" })));
     }
     /**
      * Executes the focus operation on the specified range of cells.
@@ -14168,13 +14231,25 @@ class OverlaySelection {
         if (!focus || isEditing) {
             return;
         }
-        let { changed, range } = this.columnService.getTransformedDataToApply(focus, data);
+        const rangeFillData = getRangeFillClipboardData(data, this.useClipboard);
+        const targetRange = rangeFillData
+            ? this.getClipboardPasteTargetRange()
+            : null;
+        let { changed, range } = this.columnService.getTransformedDataToApply({
+            start: focus,
+            data: rangeFillData || data,
+            targetRange,
+        });
         const { defaultPrevented: canPaste } = this.rangeClipboardPaste.emit(Object.assign({ data: changed, models: collectModelsOfRange(changed, this.dataStore), range }, this.types));
         if (canPaste) {
             return;
         }
         (_a = this.autoFillService) === null || _a === void 0 ? void 0 : _a.onRangeApply(changed, range, range);
     }
+    getClipboardPasteTargetRange() {
+        const range = this.selectionStore.get('range');
+        return range && !isRangeSingleCell(range) ? range : null;
+    }
     async focusNext() {
         var _a;
         const canFocus = await ((_a = this.keyboardService) === null || _a === void 0 ? void 0 : _a.keyChangeSelection(new KeyboardEvent('keydown', {
@@ -15722,7 +15797,7 @@ class FilterPlugin extends BasePlugin {
         // filter button clicked, open filter dialog
         const gridPos = this.revogrid.getBoundingClientRect();
         const buttonPos = el.getBoundingClientRect();
-        const data = Object.assign(Object.assign(Object.assign({}, e.detail), this.filterCollection[prop]), { x: buttonPos.x - gridPos.x, y: buttonPos.y - gridPos.y + buttonPos.height, autoCorrect: true, filterTypes: this.getColumnFilter(e.detail.filter), filterItems: this.multiFilterItems, extraContent: this.extraHyperContent });
+        const data = Object.assign(Object.assign(Object.assign({}, e.detail), this.filterCollection[prop]), { x: buttonPos.x - gridPos.x, y: buttonPos.y - gridPos.y + buttonPos.height, autoCorrect: true, filterTypes: this.getColumnFilter(e.detail.filter), filterItems: this.multiFilterItems, extraContent: this.extraHyperContent, extraBottomContent: this.extraBottomHyperContent });
         (_b = this.beforeshow) === null || _b === void 0 ? void 0 : _b.call(this, data);
         this.pop.show(data);
     }
@@ -18487,8 +18562,17 @@ class ColumnMovePlugin extends BasePlugin {
     constructor(revogrid, providers) {
         super(revogrid, providers);
         this.moveFunc = debounce$1((e) => this.doMove(e), 5);
+        this.preventHeaderClickAfterDrag = (event) => {
+            if (!this.preventNextHeaderClick) {
+                return;
+            }
+            this.preventNextHeaderClick = false;
+            event.preventDefault();
+        };
         this.staticDragData = null;
         this.dragData = null;
+        this.columnDragMoved = false;
+        this.preventNextHeaderClick = false;
         this.localSubscriptions = {};
         this.orderUi = new ColumnOrderHandler();
         revogrid.appendChild(this.orderUi.render());
@@ -18507,11 +18591,13 @@ class ColumnMovePlugin extends BasePlugin {
             callback: (e) => this.move(e),
         };
         this.addEventListener(COLUMN_CLICK, ({ detail }) => this.dragStart(detail));
+        this.revogrid.addEventListener('beforeheaderclick', this.preventHeaderClickAfterDrag, { capture: true });
     }
     dragStart({ event, data }) {
         if (event.defaultPrevented) {
             return;
         }
+        this.preventNextHeaderClick = false;
         const { defaultPrevented } = dispatch(this.revogrid, COLUMN_DRAG_START_EVENT, data);
         // check if allowed to drag particulat column
         if (defaultPrevented) {
@@ -18533,7 +18619,8 @@ class ColumnMovePlugin extends BasePlugin {
         const cols = this.getDimension(data.pin || 'rgCol');
         const gridRect = this.revogrid.getBoundingClientRect();
         const elRect = dataEl.getBoundingClientRect();
-        const startItem = getItemByPosition(cols, getLeftRelative(event.x, gridRect.left, elRect.left - gridRect.left) + (cols.renderOffset || 0));
+        const startItem = getItemByPosition(cols, getLeftRelative(event.x, gridRect.left, elRect.left - gridRect.left) +
+            (cols.renderOffset || 0));
         this.staticDragData = {
             startPos: event.x,
             startItem,
@@ -18564,10 +18651,14 @@ class ColumnMovePlugin extends BasePlugin {
             if (rgCol.itemIndex >= this.staticDragData.cols.count) {
                 return;
             }
-            this.orderUi.showHandler(rgCol.end - (this.staticDragData.cols.renderOffset || 0) + dragData.scrollOffset, dragData.gridRect.width);
+            this.orderUi.showHandler(getColumnDragPosition(rgCol, this.staticDragData.startItem, this.staticDragData.cols.renderOffset || 0, dragData.scrollOffset), dragData.gridRect.width);
         }
     }
     move(e) {
+        if (this.staticDragData &&
+            Math.abs(this.staticDragData.startPos - e.x) > 10) {
+            this.columnDragMoved = true;
+        }
         dispatch(this.revogrid, COLUMN_DRAG_MOVE_EVENT, e);
         // then do move
         this.moveFunc(e);
@@ -18576,6 +18667,7 @@ class ColumnMovePlugin extends BasePlugin {
         this.clearOrder();
     }
     onMouseUp(e) {
+        const suppressClick = this.columnDragMoved;
         // apply new positions
         if (this.dragData && this.staticDragData) {
             let relativePos = getLeftRelative(e.x, this.dragData.gridRect.left, this.dragData.scrollOffset);
@@ -18598,6 +18690,9 @@ class ColumnMovePlugin extends BasePlugin {
             }
             dispatch(this.revogrid, COLUMN_DRAG_END_EVENT, this.getData(this.staticDragData, newItems, source));
         }
+        if (suppressClick) {
+            this.preventNextHeaderClick = !!e.target.closest('revogr-header');
+        }
         this.clearOrder();
     }
     clearLocalSubscriptions() {
@@ -18606,6 +18701,7 @@ class ColumnMovePlugin extends BasePlugin {
     clearOrder() {
         this.staticDragData = null;
         this.dragData = null;
+        this.columnDragMoved = false;
         this.clearLocalSubscriptions();
         this.orderUi.stop(this.revogrid);
     }
@@ -18615,6 +18711,7 @@ class ColumnMovePlugin extends BasePlugin {
     clearSubscriptions() {
         super.clearSubscriptions();
         this.clearLocalSubscriptions();
+        this.revogrid.removeEventListener('beforeheaderclick', this.preventHeaderClickAfterDrag, { capture: true });
     }
     getData({ gridEl, dataEl, pin }, order, source = []) {
         const gridRect = gridEl.getBoundingClientRect();
@@ -18636,6 +18733,12 @@ class ColumnMovePlugin extends BasePlugin {
 function getLeftRelative(absoluteX, gridPos, offset) {
     return absoluteX - gridPos - offset;
 }
+function getColumnDragPosition(targetItem, startItem, renderOffset, scrollOffset) {
+    const insertionEdge = startItem.itemIndex > targetItem.itemIndex
+        ? targetItem.start
+        : targetItem.end;
+    return insertionEdge - renderOffset + scrollOffset;
+}
 
 function isMobileDevice() {
     return /Mobi/i.test(navigator.userAgent) || /Android/i.test(navigator.userAgent) || navigator.maxTouchPoints > 0;
@@ -18985,7 +19088,7 @@ class RevoGridComponent {
         this.rowSize = 0;
         /** Indicates default column size. */
         this.colSize = 100;
-        /** When true, user can range selection. */
+        /** When true, user can select a cell range. Required for range-based clipboard fill. */
         this.range = false;
         /** When true, grid in read only mode. */
         this.readonly = false;
@@ -18997,7 +19100,7 @@ class RevoGridComponent {
         this.noHorizontalScrollTransfer = false;
         /** When true cell focus appear. */
         this.canFocus = true;
-        /** When true enable clipboard. */
+        /** When true enable clipboard. Can be boolean or clipboard config. */
         this.useClipboard = true;
         /**
          * Columns - defines an array of grid columns.