diff --git a/examples/example-plugin-hybridselectionmodel.html b/examples/example-plugin-hybridselectionmodel.html
new file mode 100644
index 000000000..302b2053e
--- /dev/null
+++ b/examples/example-plugin-hybridselectionmodel.html
@@ -0,0 +1,390 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+  <link rel="shortcut icon" type="image/ico" href="favicon.ico" />
+  <title>SlickGrid example: Cell Menu & Context Menu</title>
+  <link rel="stylesheet" href="../dist/styles/css/slick.columnpicker.css" type="text/css"/>
+  <link rel="stylesheet" href="../dist/styles/css/slick.cellmenu.css" type="text/css" />
+  <link rel="stylesheet" href="../dist/styles/css/slick.contextmenu.css" type="text/css" />
+  <link rel="stylesheet" href="../dist/styles/css/example-demo.css" type="text/css"/>
+  <link rel="stylesheet" href="../dist/styles/css/slick-alpine-theme.css" type="text/css"/>
+  <link rel="stylesheet" href="../dist/styles/css/slick-icons.css" type="text/css"/>
+  <style>
+    .bold {
+      font-weight: bold;
+    }
+
+    .italic {
+      font-style: italic;
+    }
+
+    .green {
+      color: #40a840
+    }
+
+    .gray {
+      color: #c0c0c0;
+    }
+
+    .orange {
+      color: orange;
+    }
+
+    .pink {
+      color: pink;
+    }
+
+    .red {
+      color: red;
+    }
+
+    .pointer {
+      cursor: pointer;
+    }
+
+    .disabled {
+      color: #ccc;
+    }
+
+    .cell-menu-dropdown {
+      border: 1px solid #a3a3a3;
+      border-radius: 3px;
+      display: flex;
+      align-items: center;
+      height: 90%;
+      width: max-content;
+      padding: 0 6px;
+      cursor: pointer;
+    }
+    .cell-menu-dropdown.disabled {
+      border: 1px solid #c6c6c6;
+      color: #dddddd;
+    }
+    .cell-menu-dropdown:hover:not(.disabled) {
+      background-color: #9e9e9e;
+      color: white;
+    }
+
+    /**
+     * Style the drop-down menu here since the plugin stylesheet mostly contains structural CSS.
+     */
+    .slick-context-menu .title {
+      font-size: 17px;
+    }
+
+    .slick-context-menu {
+      border: 1px solid #718BB7;
+    }
+    .slick-cell-menu.slick-submenu,
+    .slick-context-menu.slick-submenu {
+      background-color: #fbfbfb;
+      /* border-width: 2px; */
+      box-shadow: 0 2px 4px 2px rgba(146, 152, 163, 0.4);
+      min-width: 150px;
+    }
+  </style>
+</head>
+
+<body>
+  <h2 class="title">Example - Context Menu Plugin</h2>
+  <table width="100%">
+    <tr>
+      <td valign="top" width="50%" style="padding-left: 0px">
+        <div id="myGrid" class="slick-container" style="width:650px;height:700px;"></div>
+      </td>
+      <td valign="top" style="display: block">
+        <h2>
+          Demonstrates:
+          <span style="margin-left: 15px; font-size: 12px">Slick.Plugins.HybridSelectionModel / Slick.Plugins.CellMenu</span>
+        </h2>
+        <ul>
+          <li><strong>Slick.Plugins.HybridSelectionModel</strong></li>
+          <li>This selectionmodel is a combination of the row and column selectionmodels.</li>
+          <li>for a given row, the selectionmodel that applies is selected by the following in priority order:</li>
+          <li> 1) if options.rowSelectOverride is defined, call rowSelectOverride(rowData, plugin, grid), return value is true to use rowSelectionModel</li>
+          <li> 2) if the RowMovweManager plugin is used, and rowMoveManager.isHandlerColumn is true, select RowSelectionModel</li>
+          <li> 3) if the column name is in options.rowSelectColumnIdArr[] then apply rowSelectionModel</li>
+          <p></p>
+          <li><strong>Slick.Plugins.ContextMenu - Context Menu (global from any columns right+click)</strong></li>
+          <li>This plugin subscribes internally to the "onContextMenu" event</li>
+          <li>Mouse Right-Click the row to open a Context Menu (global any columns)</li>
+          <li>The context menu showing on left columns will show only commands (from Title to EffortDriven)</li>
+          <li>
+            The context menu showing on Priority column will show list of options that will be applied to the Priority
+            cell
+          </li>
+        </ul>
+        <h2>View Source:</h2>
+        <ul>
+          <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-plugin-hybridselectionmodel.html"
+              target="_sourcewindow"> View the source for this example on Github</a></li>
+        </ul>
+      </td>
+    </tr>
+  </table>
+
+  <script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
+  <script src="sortable-cdn-fallback.js"></script>
+
+  <script src="../dist/browser/slick.core.js"></script>
+<script src="../dist/browser/slick.interactions.js"></script>
+<script src="../dist/browser/slick.grid.js"></script>
+  <script src="../dist/browser/slick.formatters.js"></script>
+  <script src="../dist/browser/slick.dataview.js"></script>
+  <script src="../dist/browser/slick.editors.js"></script>
+  <script src="../dist/browser/controls/slick.columnpicker.js"></script>
+  <script src="../dist/browser/plugins/slick.cellmenu.js"></script>
+  <script src="../dist/browser/plugins/slick.contextmenu.js"></script>
+  <script src="../dist/browser/plugins/slick.cellrangedecorator.js"></script>
+  <script src="../dist/browser/plugins/slick.cellrangeselector.js"></script>
+  <script src="../dist/browser/plugins/slick.cellselectionmodel.js"></script>
+  <script src="../dist/browser/plugins/slick.hybridselectionmodel.js"></script>
+
+  <script>
+    var contextMenuOptions = {
+      // subItemChevronClass: 'sgi sgi-chevron-right',
+
+      // optionally and conditionally define when the the menu is usable,
+      // this should be used with a custom formatter to show/hide/disable the menu
+      menuUsabilityOverride: function (args) {
+        return (args.dataContext.id < 21); // say we want to display the menu only from Task 0 to 20
+      },
+      commandTitle: "Commands",
+      // which column to show the command list? when not defined it will be shown over all columns
+      commandShownOverColumnIds: ["title", "complete", "start", "finish", "effortDriven" /*, "priority"*/],
+      commandItems: [
+        { command: "copy-text", title: "Copy Cell Value" },
+        { command: "delete-row", title: "Delete Row", iconCssClass: "sgi sgi-close red", cssClass: "bold", textCssClass: "red", },
+        { divider: true },
+        {
+          command: "help", title: "Help", iconCssClass: "sgi sgi-help-circle-outline",
+          // you can use the "action" callback and/or subscribe to the "onCallback" event, they both have the same arguments
+          action: function (e, args) {
+            // action callback.. do something
+          },
+          // only show command to "Help" when there's no Effort Driven
+          itemVisibilityOverride: function (args) {
+            return (!args.dataContext.effortDriven);
+          }
+        }
+      ],
+
+      // Options allows you to edit a column from an option chose a list
+      // for example, changing the Priority value
+      // you can also optionally define an array of column ids that you wish to display this option list (when not defined it will show over all columns)
+      optionTitle: "Change Priority",
+      optionShownOverColumnIds: ["id"], // optional, when defined it will only show over the columns (column id) defined in the array
+      optionItems: [
+        {
+          option: 0, title: "none", textCssClass: "italic",
+          // only enable this option when there's no Effort Driven
+          itemUsabilityOverride: function (args) {
+            return (!args.dataContext.effortDriven);
+          },
+          // you can use the "action" callback and/or subscribe to the "onCallback" event, they both have the same arguments
+          action: function (e, args) {
+            // action callback.. do something
+          },
+        },
+        { option: 1, iconCssClass: "sgi sgi-star-outline", title: "Low" },
+        { option: 2, iconCssClass: "sgi sgi-star orange", title: "Medium" },
+        { option: 3, iconCssClass: "sgi sgi-star red", title: "High" },
+        // you can pass divider as a string or an object with a boolean
+        // "divider",
+        { divider: true },
+        {
+          option: 4, title: "Extreme", disabled: true,
+          // only shown when there's no Effort Driven
+          itemVisibilityOverride: function (args) {
+            return (!args.dataContext.effortDriven);
+          }
+        }
+      ]
+    };
+
+    var grid;
+    var data = [];
+    var dataView;
+    var cellMenuPlugin;
+    var contextMenuPlugin;
+
+    function priorityFormatter(row, cell, value, columnDef, dataContext) {
+      if (!value) {
+        return "";
+      }
+      var count = +(value >= 3 ? 3 : value);
+      return count === 3 ? "High" : (count === 2 ? "Medium" : "Low");
+    }
+
+    function formattedRandomNum(maxVal) {
+      var numDigits = ("" + maxVal).length;
+      return ("0000" + (Math.floor(Math.random() * maxVal) + 1)).slice(-numDigits)
+    }
+
+    // Copy text to clipboard, on IE it's easy to copy a text, we can just call the clipboard
+    // but on other browsers this is insecure and we need to use the following trick to copy a cell,
+    // by creating a temp div and change the text value, we can then call the execCommand to copy which only works with dom element
+    function copyCellValue(textToCopy) {
+      try {
+        if (window.clipboardData) {
+          window.clipboardData.setData("Text", textToCopy);
+        } else {
+          var range = document.createRange();
+          var tmpElem = document.createElement('div');
+          tmpElem.style.position = 'absolute';
+          tmpElem.style.left = '-1000px';
+          tmpElem.style.top = '-1000px';
+          tmpElem.textContent = textToCopy;
+          document.body.appendChild(tmpElem);
+          range.selectNodeContents(tmpElem.get(0));
+          var selection = window.getSelection();
+          selection.removeAllRanges();
+          selection.addRange(range);
+          var success = document.execCommand("copy", false, null);
+          if (success) {
+            tmpElem.remove();
+          }
+        }
+      } catch (e) { }
+    }
+
+    function loadData(count) {
+      data = [];
+      for (var i = 0; i < 500; i++) {
+        data[i] = {
+          id: i,
+          title: "Task " + i,
+          duration: Math.floor(Math.random() * 25) + " days",
+          percentComplete: Math.floor(Math.random() * 100),
+          start: "" + formattedRandomNum(28) + "/03/2009",
+          finish: "" + formattedRandomNum(28) + "/05/2011",
+          priority: i % 3 ? 2 : (i % 5 ? 3 : 1),
+          effortDriven: (i % 4 === 0)
+        };
+      }
+      return data;
+    }
+
+    function executeCommand(e, args) {
+      var columnDef = args.column;
+      var command = args.command;
+      var dataContext = args.dataContext;
+
+      switch (command) {
+        case "command1":
+        case "command2":
+          alert(args.item.title);
+          break;
+        case "export-csv":
+        case "export-txt":
+        case "export-xls":
+          alert("Exporting as " + args.item.title);
+          break;
+        case "copy-text":
+          copyCellValue(args.value);
+          break;
+        case "help":
+          alert('Please help!');
+          break;
+        case "delete-row":
+          if (confirm("Do you really want to delete row " + (args.row + 1) + " with " + dataContext.title + "?")) {
+            dataView.deleteItem(dataContext.id);
+          }
+          break;
+        default:
+          alert("Command: " + args.command);
+          break;
+      }
+    }
+
+    var columns = [
+      { id: "id", name: "#", field: "id", width: 32 },
+      { id: "title", name: "Title", field: "title", width: 90, cssClass: "cell-title", editor: Slick.Editors.Text },
+      { id: "complete", name: "% Complete", field: "percentComplete", sortable: true, width: 90 },
+      { id: "start", name: "Start", field: "start", sortable: true },
+      { id: "finish", name: "Finish", field: "finish", sortable: true },
+      { id: "priority", name: "Priority", field: "priority", width: 80, resizable: false, formatter: priorityFormatter },
+      { id: "effortDriven", name: "Effort Driven", field: "effortDriven", width: 95, formatter: Slick.Formatters.Checkmark }
+    ];
+
+    var gridOptions = {
+      editable: true,
+      enableAddRow: false,
+      enableCellNavigation: true,
+      enableTextSelectionOnCells: true,
+      asyncEditorLoading: false,
+      autoEdit: true,
+      rowHeight: 30
+    };
+
+    document.addEventListener("DOMContentLoaded", function() {
+      dataView = new Slick.Data.DataView();
+      grid = new Slick.Grid("#myGrid", dataView, columns, gridOptions);
+      grid.setSelectionModel(new Slick.HybridSelectionModel({ selectActiveRow: true, rowSelectColumnIdArr: ['id'] }));
+      contextMenuPlugin = new Slick.Plugins.ContextMenu(contextMenuOptions);
+      var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, gridOptions);
+
+      grid.registerPlugin(contextMenuPlugin);
+
+      dataView.onRowCountChanged.subscribe(function (e, args) {
+        grid.updateRowCount();
+        grid.render();
+      });
+
+      dataView.onRowsChanged.subscribe(function (e, args) {
+        grid.invalidateRows(args.rows);
+        grid.render();
+      });
+
+      grid.init();
+      data = loadData(1000);
+      dataView.beginUpdate();
+      dataView.setItems(data);
+      dataView.endUpdate();
+
+      //
+      // -- subscribe to some Context Menu (from any columns) events
+      // --------------------------------------------------------------
+
+      // subscribe to Context Menu
+      contextMenuPlugin.onBeforeMenuShow.subscribe(function (e, args) {
+        // for example, you could select the row it was clicked with
+        // grid.setSelectedRows([args.row]); // select the entire row
+        grid.setActiveCell(args.row, args.cell, false); // select the cell that the click originated
+        console.log("Before the global Context Menu is shown", args);
+      });
+      contextMenuPlugin.onBeforeMenuClose.subscribe(function (e, args) {
+        console.log("Global Context Menu is closing", args);
+      });
+
+      contextMenuPlugin.onAfterMenuShow.subscribe(function (e, args) {
+        // for example, you could select the row it was clicked with
+        // grid.setSelectedRows([args.row]); // select the entire row
+        grid.setActiveCell(args.row, args.cell, false); // select the cell that the click originated
+        console.log("After the Context Menu is shown", args);
+      });
+
+      // subscribe to Context Menu onCommand event (or use the action callback on each command)
+      contextMenuPlugin.onCommand.subscribe(function (e, args) {
+        // e.preventDefault(); // you could do if you wish to keep the menu open
+        executeCommand(e, args);
+      });
+
+      // subscribe to Context Menu onOptionSelected event (or use the action callback on each option)
+      contextMenuPlugin.onOptionSelected.subscribe(function (e, args) {
+        // e.preventDefault(); // you could do if you wish to keep the menu open
+        var dataContext = args && args.dataContext;
+
+        // change Priority
+        if (dataContext && dataContext.hasOwnProperty("priority")) {
+          dataContext.priority = args.item.option;
+          grid.updateRow(args.row);
+        }
+      });
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/examples/example-spreadsheet-dragfill.html b/examples/example-spreadsheet-dragfill.html
new file mode 100644
index 000000000..13e2e02cb
--- /dev/null
+++ b/examples/example-spreadsheet-dragfill.html
@@ -0,0 +1,370 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+  <link rel="shortcut icon" type="image/ico" href="favicon.ico" />
+  <title>SlickGrid spreadsheet with Drag Fill - no formula Editor</title>
+  <link rel="stylesheet" href="../dist/styles/css/example-demo.css" type="text/css"/>
+  <link rel="stylesheet" href="../dist/styles/css/slick-alpine-theme.css" type="text/css"/>
+  <link rel="stylesheet" href="../dist/styles/css/slick.contextmenu.css" type="text/css" />
+  <style>
+    .slick-cell.copied {
+      background: blue;
+      background: rgba(0, 0, 255, 0.2);
+      transition: 0.5s background;
+    }
+    /** override slick-cell to make it look like Excel sheet */
+    .slick-container {
+      --alpine-header-column-height: 20px;
+      --alpine-header-font-weight: 500;
+      --alpine-cell-border-width: 0 1px 1px 0;
+      --alpine-cell-border-color: #d4d4d4;
+    }
+  </style>
+</head>
+<body>
+<h2 class="title">Example - Spreadsheet Drag-Fill</h2>
+<div style="position:relative">
+  <div style="width:600px;">
+    <div id="myGrid" class="slick-container" style="width:100%;height:500px;"></div>
+  </div>
+
+  <div class="options-panel">
+    <h2>Demonstrates:</h2>
+    <ul>
+      <li>Select a range of cells with a mouse</li>
+      <li>Drag from the handle at the bottom right of the selected range to fill the dragged-over area with the values from the selected range</li>
+      <li>Drag-fill can be done in any direction</li>
+      <li>Drag-fill selection border (css) is different to regular selection (uses <code>copyToSelectionCss</code> from CellRangeDecorator rather than the usual <code>selectionCss</code>)</li>
+      <li>By default uses <code>Slick.SelectionUtils.defaultCopyDraggedCellRange</code> to copy dragged cells by subscribing to <code>onDragReplaceCells</code>. 
+        Use this event to customise behaviour. The default function is ideal as a starting example.</li>
+      <li>Also uses hybrid selection model plugin to select a row if the left hand cell (containing row index) is selected, or select a cell otherwise.</li>
+      <li>Uses the context menu plugin to display different context menus for the left hand and all other columns.</li>
+    </ul>
+      <h2>View Source:</h2>
+      <ul>
+      <li>
+        <a href="https://github.com/6pac/SlickGrid/blob/master/examples/example-spreadsheet-dragfill.html" target="_sourcewindow">
+          View the source for this example on Github
+        </a>
+      </li>
+      </ul>
+  </div>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
+<script src="sortable-cdn-fallback.js"></script>
+
+<script src="../dist/browser/slick.core.js"></script>
+<script src="../dist/browser/slick.interactions.js"></script>
+<script src="../dist/browser/slick.grid.js"></script>
+<script src="../dist/browser/slick.editors.js"></script>
+<script src="../dist/browser/plugins/slick.contextmenu.js"></script>
+<script src="../dist/browser/plugins/slick.autotooltips.js"></script>
+<script src="../dist/browser/plugins/slick.cellrangedecorator.js"></script>
+<script src="../dist/browser/plugins/slick.cellrangeselector.js"></script>
+<script src="../dist/browser/plugins/slick.cellcopymanager.js"></script>
+<script src="../dist/browser/plugins/slick.hybridselectionmodel.js"></script>
+
+<script>
+  var grid;
+  var data = [];
+  let cellSelectionModel;
+  var options = {
+    editable: true,
+    enableAddRow: true,
+    enableCellNavigation: true,
+    asyncEditorLoading: false,
+    autoEdit: true
+  };
+  var contextMenuPlugin;
+  var allColIdArr = [];
+  /*
+   * Depending on the value of Grid option 'editorCellNavOnLRKeys', us
+   * Navigate to the cell on the left if the cursor is at the beginning of the input string
+   * and to the right cell if it's at the end. Otherwise, move the cursor within the text
+   */
+  function handleKeydownLRNav(e) {
+    var cursorPosition = this.selectionStart;
+    var textLength = this.value.length;
+    if ((e.keyCode === Slick.keyCode.LEFT && cursorPosition > 0) ||
+      e.keyCode === Slick.keyCode.RIGHT && cursorPosition < textLength - 1) {
+      e.stopImmediatePropagation();
+    }
+  }
+
+  function handleKeydownLRNoNav(e) {
+    if (e.keyCode === Slick.keyCode.LEFT || e.keyCode === Slick.keyCode.RIGHT) {
+      e.stopImmediatePropagation();
+    }
+  }
+
+  function TestValidator(value, grid, rowIndex, colIndex) {
+    if (value.toString().length > 4) {
+      return {
+        valid: false,
+        msg: "This field has more than 4 chars"
+      };
+    } else {
+      return {
+        valid: true,
+        msg: null
+      };
+    }
+  }
+ 
+  function TextEditor(args) {
+    var input;
+    var defaultValue;
+    var scope = this;
+    var navOnLR;
+    this.args = args;
+
+    this.init = function () {
+      navOnLR = args.grid.getOptions().editorCellNavOnLRKeys;
+      input = Slick.Utils.createDomElement('input', { type: 'text', className: 'editor-text' }, args.container);
+      input.addEventListener("keydown.nav", navOnLR ? handleKeydownLRNav : handleKeydownLRNoNav);
+      input.focus();
+      input.select();
+
+      // don't show Save/Cancel when it's a Composite Editor and also trigger a onCompositeEditorChange event when input changes
+      if (args.compositeEditorOptions) {
+        input.addEventListener("change", this.onChange);
+      }
+    };
+
+    this.onChange = function() {
+      var activeCell = args.grid.getActiveCell();
+
+      // when valid, we'll also apply the new value to the dataContext item object
+      if (scope.validate().valid) {
+        scope.applyValue(scope.args.item, scope.serializeValue());
+      }
+      scope.applyValue(scope.args.compositeEditorOptions.formValues, scope.serializeValue());
+      args.grid.onCompositeEditorChange.notify({ row: activeCell.row, cell: activeCell.cell, item: scope.args.item, column: scope.args.column, formValues: scope.args.compositeEditorOptions.formValues });
+    };
+
+    this.destroy = function () {
+      input.removeEventListener("keydown.nav", navOnLR ? handleKeydownLRNav : handleKeydownLRNoNav);
+      input.removeEventListener("change", this.onChange)
+      input.remove();
+    };
+
+    this.focus = function () {
+      input.focus();
+    };
+
+    this.getValue = function () {
+      return input.value;
+    };
+
+    this.setValue = function (val) {
+      input.value = val;
+    };
+
+    this.loadValue = function (item) {
+      defaultValue = item[args.column.field] || "";
+      input.value = defaultValue;
+      input.defaultValue = defaultValue;
+      input.select();
+    };
+
+    this.serializeValue = function () {
+      return input.value;
+    };
+
+    this.applyValue = function (item, state) {
+      item[args.column.field] = state;
+      console.log('TextEditor: applyValue col:' + args.column.name + ', val: '+ state);
+    };
+
+    this.isValueChanged = function () {
+      return (!(input.value === "" && defaultValue == null)) && (input.value != defaultValue);
+    };
+
+    this.validate = function (targetElm, options) {
+      if (args.column.validator) {
+        var validationResults = args.column.validator(input.value, args, options.rowIndex, options.cellIndex);
+        if (!validationResults.valid) {
+          return validationResults;
+        }
+      }
+
+      return {
+        valid: true,
+        msg: null,
+        noFocusOnEditorOnValidateFail: null
+      };
+    };
+
+    this.init();
+  }
+
+  var columns = [
+    {
+      id: "selector",
+      name: "",
+      field: "num",
+      width: 30
+    }
+  ];
+
+  for (var i = 0; i < 100; i++) {
+    columns.push({
+      id: i,
+      name: String.fromCharCode("A".charCodeAt(0) + (i / 26) | 0) +
+            String.fromCharCode("A".charCodeAt(0) + (i % 26)),
+      field: i,
+      width: 60,
+      editor: TextEditor,
+      validator: TestValidator
+    });
+    allColIdArr.push(i);
+  }
+
+  var contextMenuOptions = {
+    // subItemChevronClass: 'sgi sgi-chevron-right',
+
+    commandTitle: "Commands",
+    // which column to show the command list? when not defined it will be shown over all columns
+    commandShownOverColumnIds: allColIdArr,
+    commandItems: [
+      { command: "copy-text", title: "Copy Cell Value" },
+      { command: "delete-row", title: "Delete Row", iconCssClass: "sgi sgi-close red", cssClass: "bold", textCssClass: "red", },
+      { divider: true },
+      {
+        command: "help", title: "Help", iconCssClass: "sgi sgi-help-circle-outline",
+        // you can use the "action" callback and/or subscribe to the "onCallback" event, they both have the same arguments
+        action: function (e, args) {
+          // action callback.. do something
+        },
+        // only show command to "Help" when there's no Effort Driven
+        itemVisibilityOverride: function (args) {
+          return (!args.dataContext.effortDriven);
+        }
+      }
+    ],
+
+    // Options allows you to edit a column from an option chose a list
+    // for example, changing the Priority value
+    // you can also optionally define an array of column ids that you wish to display this option list (when not defined it will show over all columns)
+    optionTitle: "Change Priority",
+    optionShownOverColumnIds: ["selector"], // optional, when defined it will only show over the columns (column id) defined in the array
+    optionItems: [
+      {
+        // you can use the "action" callback and/or subscribe to the "onCallback" event, they both have the same arguments
+        action: function (e, args) {
+          // action callback.. do something
+        },
+      },
+      { option: 1, iconCssClass: "sgi sgi-star-outline", title: "Low" },
+      { option: 2, iconCssClass: "sgi sgi-star orange", title: "Medium" },
+      { option: 3, iconCssClass: "sgi sgi-star red", title: "High" },
+      // you can pass divider as a string or an object with a boolean
+      // "divider",
+      { divider: true },
+      {
+        option: 4, title: "Extreme", disabled: true,
+        // only shown when there's no Effort Driven
+        itemVisibilityOverride: function (args) {
+          return (!args.dataContext.effortDriven);
+        }
+      }
+    ]
+  };
+
+
+  document.addEventListener("DOMContentLoaded", function() {
+    for (var i = 0; i < 100; i++) {
+      var d = (data[i] = {});
+      d["num"] = i;
+    }
+
+    grid = new Slick.Grid("#myGrid", data, columns, options);
+
+    grid.setSelectionModel(new Slick.HybridSelectionModel({ selectActiveRow: true, rowSelectColumnIdArr: ['selector'] }));
+    grid.registerPlugin(new Slick.AutoTooltips());
+
+    contextMenuPlugin = new Slick.Plugins.ContextMenu(contextMenuOptions);
+    grid.registerPlugin(contextMenuPlugin);
+
+    grid.onDragReplaceCells.subscribe(Slick.SelectionUtils.defaultCopyDraggedCellRange);
+
+    // set keyboard focus on the grid
+    grid.getCanvasNode().focus();
+
+    var copyManager = new Slick.CellCopyManager();
+    //grid.registerPlugin(copyManager);
+ 
+    copyManager.onPasteCells.subscribe(function (e, args) {
+      if (args.from.length !== 1 || args.to.length !== 1) {
+        throw "This implementation only supports single range copy and paste operations";
+      }
+
+      var from = args.from[0];
+      var to = args.to[0];
+      var val;
+      for (var i = 0; i <= from.toRow - from.fromRow; i++) {
+        for (var j = 0; j <= from.toCell - from.fromCell; j++) {
+          if (i <= to.toRow - to.fromRow && j <= to.toCell - to.fromCell) {
+            val = data[from.fromRow + i][columns[from.fromCell + j].field];
+            data[to.fromRow + i][columns[to.fromCell + j].field] = val;
+            grid.invalidateRow(to.fromRow + i);
+          }
+        }
+      }
+      grid.render();
+    });
+
+    grid.onAddNewRow.subscribe(function (e, args) {
+      var item = args.item;
+      var column = args.column;
+      grid.invalidateRow(data.length);
+      data.push(item);
+      grid.updateRowCount();
+      grid.render();
+    });
+
+    //
+    // -- subscribe to some Context Menu (from any columns) events
+    // --------------------------------------------------------------
+
+    // subscribe to Context Menu
+    contextMenuPlugin.onBeforeMenuShow.subscribe(function (e, args) {
+      // for example, you could select the row it was clicked with
+      // grid.setSelectedRows([args.row]); // select the entire row
+      grid.setActiveCell(args.row, args.cell, false); // select the cell that the click originated
+      console.log("Before the global Context Menu is shown", args);
+    });
+    contextMenuPlugin.onBeforeMenuClose.subscribe(function (e, args) {
+      console.log("Global Context Menu is closing", args);
+    });
+
+    contextMenuPlugin.onAfterMenuShow.subscribe(function (e, args) {
+      // for example, you could select the row it was clicked with
+      // grid.setSelectedRows([args.row]); // select the entire row
+      grid.setActiveCell(args.row, args.cell, false); // select the cell that the click originated
+      console.log("After the Context Menu is shown", args);
+    });
+
+    // subscribe to Context Menu onCommand event (or use the action callback on each command)
+    contextMenuPlugin.onCommand.subscribe(function (e, args) {
+      // e.preventDefault(); // you could do if you wish to keep the menu open
+      executeCommand(e, args);
+    });
+
+    // subscribe to Context Menu onOptionSelected event (or use the action callback on each option)
+    contextMenuPlugin.onOptionSelected.subscribe(function (e, args) {
+      // e.preventDefault(); // you could do if you wish to keep the menu open
+      var dataContext = args && args.dataContext;
+
+      // change Priority
+      if (dataContext && dataContext.hasOwnProperty("priority")) {
+        dataContext.priority = args.item.option;
+        grid.updateRow(args.row);
+      }
+    });    
+  })
+</script>
+</body>
+</html>
diff --git a/examples/index.html b/examples/index.html
index 80f918b47..163659582 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -77,6 +77,7 @@ <h2>Layout</h2>
     <ul>
       <li><a href="./example8-alternative-display.html">Using pre-compiled micro-templates to render cells</a></li>
       <li><a href="./example-spreadsheet.html">Spreadsheet: cell range selection, copy’n’paste and Excel-style formula editor</a></li>
+      <li><a href="./example-spreadsheet-dragfill.html">Spreadsheet with drag-fill, hybrid selection model and context menu</a></li>
       <li><a href="./example-spreadsheet-dataview.html">Spreadsheet using a DataView: cell range selection</a></li>
       <li><a href="./example-excel-compatible-spreadsheet.html">Spreadsheet: features of the previous example plus Excel compatible copy and paste</a></li>
       <li><a href="./example-excel-compatible-spreadsheet-dataview.html">Spreadsheet: features of the previous example but using a DataView</a></li>
@@ -126,6 +127,7 @@ <h2>Other Features</h2>
     <ul>
       <li><a href="./example-explicit-initialization.html">Explicit initialization</a></li>
       <li><a href="./example9-row-reordering.html">Row selection &amp; reordering</a></li>
+      <li><a href="./example-plugin-hybridselectionmodel.html">Hybrid (row or column) SelectionModel</a></li>
       <li><a href="./example9-row-reordering-simple.html">Row reordering (simple example without delete)</a></li>
       <li><a href="./example10-async-post-render.html">Using background post-rendering to add graphs</a></li>
       <li><a href="./example10a-async-post-render-cleanup.html">Background post-rendering with async cleanup</a></li>
diff --git a/src/global.d.ts b/src/global.d.ts
index 4f2d56634..1f6e2518d 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -7,6 +7,7 @@ import type {
   keyCode,
   preClickClassName,
   RowSelectionMode,
+  CellSelectionMode,
   SlickEvent,
   SlickEventData,
   SlickEventHandler,
@@ -14,7 +15,9 @@ import type {
   SlickGroup,
   SlickGroupTotals,
   SlickRange,
+  SlickCopyRange,
   Utils,
+  SelectionUtils,
   ValueFilterMode,
   WidthEvalMode,
 } from './slick.core.js';
@@ -108,12 +111,16 @@ declare global {
     },
     preClickClassName: typeof preClickClassName,
     Range: typeof SlickRange,
+    CopyRange: typeof SlickCopyRange,
+    DragExtendHandle: typeof SlickDragExtendHandle,
     Resizable: typeof Resizable,
     RowMoveManager: typeof SlickRowMoveManager,
     RowSelectionMode: typeof RowSelectionMode,
+    CellSelectionMode: typeof CellSelectionMode,
     RowSelectionModel: typeof SlickRowSelectionModel,
     State: typeof SlickState,
     Utils: typeof Utils,
+    SelectionUtils: typeof SelectionUtils,
     ValueFilterMode: typeof ValueFilterMode,
     WidthEvalMode: typeof WidthEvalMode,
   };
diff --git a/src/models/drag.interface.ts b/src/models/drag.interface.ts
index 64a8cda73..713a49d80 100644
--- a/src/models/drag.interface.ts
+++ b/src/models/drag.interface.ts
@@ -15,6 +15,7 @@ export interface DragPosition {
   startX: number;
   startY: number;
   range: DragRange;
+  matchClassTag: string;
 }
 
 export interface DragRange {
@@ -26,6 +27,10 @@ export interface DragRange {
     row?: number;
     cell?: number;
   };
+  rowCount?: number;
+  cellCount?: number;
+  wasDraggedUp?: boolean;
+  wasDraggedLeft?: boolean;
 }
 
 export interface DragRowMove {
@@ -50,4 +55,5 @@ export interface DragRowMove {
   startX: number;
   startY: number;
   range: DragRange;
+  matchClassTag: string;
 }
\ No newline at end of file
diff --git a/src/models/gridEvents.interface.ts b/src/models/gridEvents.interface.ts
index 52efa35a2..e63d3d329 100644
--- a/src/models/gridEvents.interface.ts
+++ b/src/models/gridEvents.interface.ts
@@ -1,6 +1,6 @@
 import type { Column, CompositeEditorOption, CssStyleHash, Editor, EditorValidationResult, GridOption } from './index.js';
 import type { SlickGrid } from '../slick.grid.js';
-
+import type { SlickRange, SlickCopyRange } from '../slick.core.js';
 export interface SlickGridArg { grid: SlickGrid; }
 export interface OnActiveCellChangedEventArgs extends SlickGridArg { cell: number; row: number; }
 export interface OnAddNewRowEventArgs extends SlickGridArg { item: any; column: Column; }
@@ -46,4 +46,5 @@ export interface OnDragEventArgs extends SlickGridArg {
   available: HTMLDivElement | HTMLDivElement[]; drag: HTMLDivElement; drop: HTMLDivElement | HTMLDivElement[]; helper: HTMLDivElement;
   proxy: HTMLDivElement; target: HTMLDivElement; mode: string;
   row: number; rows: number[]; startX: number; startY: number;
-}
\ No newline at end of file
+}
+export interface OnDragReplaceCellsEventArgs extends SlickGridArg { prevSelectedRange: SlickRange; selectedRange: SlickRange; copyToRange: SlickCopyRange; }
diff --git a/src/models/interactions.interface.ts b/src/models/interactions.interface.ts
index 4ecdc96d0..53b37cbe0 100644
--- a/src/models/interactions.interface.ts
+++ b/src/models/interactions.interface.ts
@@ -6,6 +6,18 @@ import type { DragPosition } from './drag.interface.js';
 export interface InteractionBase {
   destroy: () => void;
 }
+export interface ClassDetectElement {
+  /** tag to be returned on match */
+  tag: string
+
+  /** element id to match */
+  id?: string;
+
+  /** element cssSelector to match */
+  cssSelector?: string;
+}
+
+
 export interface DraggableOption {
   /** container DOM element, defaults to "document" */
   containerElement?: HTMLElement | Document;
@@ -30,6 +42,8 @@ export interface DraggableOption {
 
   /** drag ended callback */
   onDragEnd?: (e: DragEvent, dd: DragPosition) => boolean | void;
+
+  dragFromClassDetectArr?: Array<ClassDetectElement>
 }
 
 export interface MouseWheelOption {
diff --git a/src/plugins/slick.cellrangeselector.ts b/src/plugins/slick.cellrangeselector.ts
index d10b87f22..5abfc07c1 100644
--- a/src/plugins/slick.cellrangeselector.ts
+++ b/src/plugins/slick.cellrangeselector.ts
@@ -1,4 +1,4 @@
-import { SlickEvent as SlickEvent_, type SlickEventData, SlickEventHandler as SlickEventHandler_, SlickRange as SlickRange_, Utils as Utils_ } from '../slick.core.js';
+import { CellSelectionMode as CellSelectionMode_, SlickEvent as SlickEvent_, type SlickEventData, SlickEventHandler as SlickEventHandler_, SlickRange as SlickRange_, Utils as Utils_, SelectionUtils as SelectionUtils_ } from '../slick.core.js';
 import { Draggable as Draggable_ } from '../slick.interactions.js';
 import { SlickCellRangeDecorator as SlickCellRangeDecorator_ } from './slick.cellrangedecorator.js';
 import type { CellRangeSelectorOption, DragPosition, DragRange, DragRowMove, GridOption, MouseOffsetViewport, OnScrollEventArgs, SlickPlugin } from '../models/index.js';
@@ -11,19 +11,22 @@ const SlickRange = IIFE_ONLY ? Slick.Range : SlickRange_;
 const Draggable = IIFE_ONLY ? Slick.Draggable : Draggable_;
 const SlickCellRangeDecorator = IIFE_ONLY ? Slick.CellRangeDecorator : SlickCellRangeDecorator_;
 const Utils = IIFE_ONLY ? Slick.Utils : Utils_;
+const SelectionUtils = IIFE_ONLY ? Slick.SelectionUtils : SelectionUtils_;
+const CellSelectionMode = IIFE_ONLY ? Slick.CellSelectionMode : CellSelectionMode_;
 
 export class SlickCellRangeSelector implements SlickPlugin {
   // --
   // public API
   pluginName = 'CellRangeSelector' as const;
   onBeforeCellRangeSelected = new SlickEvent<{ row: number; cell: number; }>('onBeforeCellRangeSelected');
-  onCellRangeSelected = new SlickEvent<{ range: SlickRange_; }>('onCellRangeSelected');
-  onCellRangeSelecting = new SlickEvent<{ range: SlickRange_; }>('onCellRangeSelecting');
+  onCellRangeSelected = new SlickEvent<{ range: SlickRange_; selectionMode: string; allowAutoEdit: boolean; }>('onCellRangeSelected');
+  onCellRangeSelecting = new SlickEvent<{ range: SlickRange_; selectionMode: string; allowAutoEdit: boolean; }>('onCellRangeSelecting');
 
   // --
   // protected props
   protected _grid!: SlickGrid;
   protected _currentlySelectedRange: DragRange | null = null;
+  protected _previousSelectedRange: DragRange | null = null;
   protected _canvas: HTMLElement | null = null;
   protected _decorator!: SlickCellRangeDecorator_;
   protected _gridOptions!: GridOption;
@@ -31,6 +34,9 @@ export class SlickCellRangeSelector implements SlickPlugin {
   protected _dragging = false;
   protected _handler = new SlickEventHandler();
   protected _options: CellRangeSelectorOption;
+  protected _selectionMode: string = CellSelectionMode.Select;
+  protected _dragReplaceHandleActive = false;
+  protected _dragReplaceHandleCell:  { row : number, cell: number } | null = null;
   protected _defaults = {
     autoScroll: true,
     minIntervalToShowNextCell: 30,
@@ -96,12 +102,20 @@ export class SlickCellRangeSelector implements SlickPlugin {
     return this._decorator;
   }
 
+  getSelectionMode() {
+    return this._selectionMode;
+  }
+
+  setSelectionMode(mode: string) {
+    this._selectionMode = mode;
+  }
+
   protected handleScroll(_e: SlickEventData, args: OnScrollEventArgs) {
     this._scrollTop = args.scrollTop;
     this._scrollLeft = args.scrollLeft;
   }
 
-  protected handleDragInit(e: SlickEventData) {
+  protected handleDragInit(e: SlickEventData, dd: DragRowMove) {
     // Set the active canvas node because the decorator needs to append its
     // box to the correct canvas
     this._activeCanvas = this._grid.getActiveCanvasNode(e);
@@ -138,13 +152,21 @@ export class SlickCellRangeSelector implements SlickPlugin {
       }
     }
 
+      this._dragReplaceHandleActive = (dd.matchClassTag === 'dragReplaceHandle');
+      if (this._dragReplaceHandleActive) { 
+        this._dragReplaceHandleCell = this._grid.getCellFromEvent(e);
+      } else {
+        this._previousSelectedRange = null;
+      }
+
     // prevent the grid from cancelling drag'n'drop by default
     e.stopImmediatePropagation();
     e.preventDefault();
   }
 
   protected handleDragStart(e: SlickEventData, dd: DragRowMove) {
-    const cell = this._grid.getCellFromEvent(e);
+    let cell = this._grid.getCellFromEvent(e);
+    if (this._dragReplaceHandleActive) { cell = this._dragReplaceHandleCell; }
     if (cell && this.onBeforeCellRangeSelected.notify(cell).getReturnValue() !== false && this._grid.canCellBeSelected(cell.row, cell.cell)) {
       this._dragging = true;
       e.stopImmediatePropagation();
@@ -167,11 +189,17 @@ export class SlickCellRangeSelector implements SlickPlugin {
       startY += this._scrollTop;
     }
 
-    const start = this._grid.getCellFromPoint(startX, startY);
+    let start: { row: number | undefined, cell: number | undefined; } | null;
+    this._selectionMode = this._dragReplaceHandleActive ? Slick.CellSelectionMode.Replace : Slick.CellSelectionMode.Select;      
+    if (!this._dragReplaceHandleActive) {
+      start = this._grid.getCellFromPoint(startX, startY);
+    } else {
+      start = this._grid.getActiveCell() || { row: undefined, cell: undefined };
+    }
 
     dd.range = { start, end: {} };
     this._currentlySelectedRange = dd.range;
-    return this._decorator.show(new SlickRange(start.row, start.cell));
+    return this._decorator.show(new SlickRange(start.row ?? 0, start.cell ?? 0), this._dragReplaceHandleActive);
   }
 
   protected handleDrag(evt: SlickEventData, dd: DragRowMove) {
@@ -353,10 +381,15 @@ export class SlickCellRangeSelector implements SlickPlugin {
     if (dd?.range) {
       dd.range.end = end;
 
-      const range = new SlickRange(dd.range.start.row ?? 0, dd.range.start.cell ?? 0, end.row, end.cell);
-      this._decorator.show(range);
+      const cornerCell = !this._previousSelectedRange ? dd.range.start : SelectionUtils.normalRangeOppositeCellFromCopy(this._previousSelectedRange, end);
+      this._currentlySelectedRange = dd.range;
+
+      const range = new Slick.Range(cornerCell.row, cornerCell.cell, end.row, end.cell);
+
+      this._decorator.show(range, this._dragReplaceHandleActive);
       this.onCellRangeSelecting.notify({
-        range
+        range, selectionMode: '', 
+        allowAutoEdit: false
       });
     }
   }
@@ -368,27 +401,35 @@ export class SlickCellRangeSelector implements SlickPlugin {
   protected handleDragEnd(e: SlickEventData, dd: DragPosition) {
     this._decorator.hide();
 
-    if (this._dragging && dd.range) {
-      this._dragging = false;
-      e.stopImmediatePropagation();
-
-      this.stopIntervalTimer();
-      this.onCellRangeSelected.notify({
-        range: new SlickRange(
-          dd.range.start.row ?? 0,
-          dd.range.start.cell ?? 0,
-          dd.range.end.row,
-          dd.range.end.cell
-        )
-      });
-    } else if (this._autoScrollTimerId) {
-      this.stopIntervalTimer(); // stop the auto-scroll timer if it was running
+    if (!this._dragging || !dd.range) {
+      if (this._autoScrollTimerId) {
+        this.stopIntervalTimer(); // stop the auto-scroll timer if it was running
+      }
+      return;
     }
+
+    this._dragging = false;
+    e.stopImmediatePropagation();
+
+    this.stopIntervalTimer();
+    const r = new SlickRange(
+        dd.range.start.row ?? 0,
+        dd.range.start.cell ?? 0,
+        dd.range.end.row,
+        dd.range.end.cell
+      );
+
+    this.onCellRangeSelected.notify({ range: r, selectionMode: this._selectionMode, allowAutoEdit: (this._selectionMode === "SEL" && r.isSingleCell()) });
+    this._previousSelectedRange = SelectionUtils.normaliseDragRange(dd.range);
   }
 
   getCurrentRange() {
     return this._currentlySelectedRange;
   }
+
+  getPreviousRange() {
+    return this._previousSelectedRange;
+  } 
 }
 
 // extend Slick namespace on window object when building as iife
diff --git a/src/plugins/slick.cellselectionmodel.ts b/src/plugins/slick.cellselectionmodel.ts
index 9528b5fb6..51b1ab756 100644
--- a/src/plugins/slick.cellselectionmodel.ts
+++ b/src/plugins/slick.cellselectionmodel.ts
@@ -38,7 +38,10 @@ export class SlickCellSelectionModel {
 
   constructor(options?: { selectActiveCell: boolean; cellRangeSelector: SlickCellRangeSelector_; }) {
     if (options === undefined || options.cellRangeSelector === undefined) {
-      this._selector = new SlickCellRangeSelector({ selectionCss: { border: '2px solid black' } as CSSStyleDeclaration });
+      this._selector = new SlickCellRangeSelector({ 
+        selectionCss: { border: '2px solid black' } as CSSStyleDeclaration,
+        copyToSelectionCss: { border: '2px solid purple' } as CSSStyleDeclaration 
+      });
     } else {
       this._selector = options.cellRangeSelector;
     }
@@ -102,7 +105,7 @@ export class SlickCellSelectionModel {
     this._cachedPageRowCount = 0;
   }
 
-  setSelectedRanges(ranges: SlickRange_[], caller = 'SlickCellSelectionModel.setSelectedRanges') {
+  setSelectedRanges(ranges: SlickRange_[], caller = 'SlickCellSelectionModel.setSelectedRanges', selectionMode: string) {
     // simple check for: empty selection didn't change, prevent firing onSelectedRangesChanged
     if ((!this._ranges || this._ranges.length === 0) && (!ranges || ranges.length === 0)) { return; }
 
@@ -113,7 +116,7 @@ export class SlickCellSelectionModel {
     if (rangeHasChanged) {
       // provide extra "caller" argument through SlickEventData event to avoid breaking the previous pubsub event structure
       // that only accepts an array of selected range `SlickRange[]`, the SlickEventData args will be merged and used later by `onSelectedRowsChanged`
-      const eventData = new SlickEventData(new CustomEvent('click', { detail: { caller } }), this._ranges);
+      const eventData = new SlickEventData(new CustomEvent('click', { detail: { caller, selectionMode, addDragHandle: true } }), this._ranges);
       this.onSelectedRangesChanged.notify(this._ranges, eventData);
     }
   }
@@ -123,7 +126,7 @@ export class SlickCellSelectionModel {
   }
 
   refreshSelections() {
-    this.setSelectedRanges(this.getSelectedRanges());
+    this.setSelectedRanges(this.getSelectedRanges(), undefined, '');
   }
 
   protected handleBeforeCellRangeSelected(e: SlickEventData_): boolean | void {
@@ -133,9 +136,9 @@ export class SlickCellSelectionModel {
     }
   }
 
-  protected handleCellRangeSelected(_e: SlickEventData_, args: { range: SlickRange_; }) {
+  protected handleCellRangeSelected(_e: SlickEventData_, args: { range: SlickRange_; selectionMode: string; }) {
     this._grid.setActiveCell(args.range.fromRow, args.range.fromCell, false, false, true);
-    this.setSelectedRanges([args.range]);
+    this.setSelectedRanges([args.range], undefined, args.selectionMode);
   }
 
   protected handleActiveCellChange(_e: SlickEventData_, args: OnActiveCellChangedEventArgs) {
@@ -144,10 +147,10 @@ export class SlickCellSelectionModel {
     const isRowDefined = Utils.isDefined(args.row);
 
     if (this._options?.selectActiveCell && isRowDefined && isCellDefined) {
-      this.setSelectedRanges([new SlickRange(args.row, args.cell)]);
+      this.setSelectedRanges([new SlickRange(args.row, args.cell)], undefined, '');
     } else if (!this._options?.selectActiveCell || (!isRowDefined && !isCellDefined)) {
       // clear the previous selection once the cell changes
-      this.setSelectedRanges([]);
+      this.setSelectedRanges([], undefined, '');
     }
   }
 
@@ -282,7 +285,7 @@ export class SlickCellSelectionModel {
         ranges.push(last);
       }
 
-      this.setSelectedRanges(ranges);
+      this.setSelectedRanges(ranges, undefined, '');
 
       e.preventDefault();
       e.stopPropagation();
diff --git a/src/plugins/slick.hybridselectionmodel.ts b/src/plugins/slick.hybridselectionmodel.ts
new file mode 100644
index 000000000..6e02a9ed4
--- /dev/null
+++ b/src/plugins/slick.hybridselectionmodel.ts
@@ -0,0 +1,520 @@
+import { keyCode as keyCode_, SlickEvent as SlickEvent_, SlickEventData as SlickEventData_, SlickRange as SlickRange_, Utils as Utils_ } from '../slick.core.js';
+import { Draggable as Draggable_ } from '../slick.interactions.js';
+import { SlickCellRangeDecorator as SlickCellRangeDecorator_ } from './slick.cellrangedecorator.js';
+import { SlickCellRangeSelector as SlickCellRangeSelector_ } from './slick.cellrangeselector.js';
+import type { CustomDataView, OnActiveCellChangedEventArgs } from '../models/index.js';
+import type { SlickDataView } from '../slick.dataview.js';
+import type { SlickCrossGridRowMoveManager as SlickCrossGridRowMoveManager_ } from './slick.crossgridrowmovemanager.js';
+import type { SlickRowMoveManager as SlickRowMoveManager_ } from './slick.rowmovemanager.js';
+import type { SlickGrid } from '../slick.grid.js';
+
+// for (iife) load Slick methods from global Slick object, or use imports for (esm)
+const Draggable = IIFE_ONLY ? Slick.Draggable : Draggable_;
+const keyCode = IIFE_ONLY ? Slick.keyCode : keyCode_;
+const SlickEvent = IIFE_ONLY ? Slick.Event : SlickEvent_;
+const SlickEventData = IIFE_ONLY ? Slick.EventData : SlickEventData_;
+const SlickRange = IIFE_ONLY ? Slick.Range : SlickRange_;
+const SlickCellRangeDecorator = IIFE_ONLY ? Slick.CellRangeDecorator : SlickCellRangeDecorator_;
+const SlickCellRangeSelector = IIFE_ONLY ? Slick.CellRangeSelector : SlickCellRangeSelector_;
+const Utils = IIFE_ONLY ? Slick.Utils : Utils_;
+
+export declare type RowSelectOverride = (data: OnActiveCellChangedEventArgs, selectionModel: SlickHybridSelectionModel, grid: SlickGrid) => boolean;
+
+export interface HybridSelectionModelOption {
+  selectActiveCell: boolean;
+  selectActiveRow: boolean;
+  cellRangeSelector?: SlickCellRangeSelector_;
+  dragToSelect: boolean;
+  autoScrollWhenDrag: boolean;
+  handleRowMoveManagerColumn: boolean;  // Row Selection on RowMoveManage column
+  rowSelectColumnIdArr: string[];        // Row Selection on these columns
+  rowSelectOverride: RowSelectOverride | undefined;          // function to toggle Row Selection Models
+}
+
+export class SlickHybridSelectionModel {
+  // hybrid selection model is CellSelectionModel except when selecting
+  // specific columns, which behave as RowSelectionModel
+
+  // --
+  // public API
+  pluginName = 'HybridSelectionModel' as const;
+  onSelectedRangesChanged = new SlickEvent<SlickRange_[]>('onSelectedRangesChanged');
+
+  // --
+  // protected props
+  protected _cachedPageRowCount = 0;
+  protected _dataView?: CustomDataView | SlickDataView;
+  protected _grid!: SlickGrid;
+  protected _prevSelectedRow?: number;
+  protected _prevKeyDown = '';
+  protected _ranges: SlickRange_[] = [];
+  protected _selector: SlickCellRangeSelector_;
+  protected _isRowMoveManagerHandler: any;
+  protected _activeSelectionIsRow = false;
+  protected _options?: HybridSelectionModelOption;
+  protected _defaults: HybridSelectionModelOption = {
+    selectActiveCell: true,
+    selectActiveRow: true,
+    dragToSelect: false,
+    autoScrollWhenDrag: true,
+    handleRowMoveManagerColumn: true, // Row Selection on RowMoveManage column
+    rowSelectColumnIdArr: [],         // Row Selection on these columns
+    rowSelectOverride: undefined,     // function to toggle Row Selection Models
+    cellRangeSelector: undefined
+
+  };
+
+  constructor(options?: HybridSelectionModelOption) {
+    this._options = Utils.extend(true, {}, this._defaults, options);
+
+    if (options === undefined || options.cellRangeSelector === undefined) {
+     this._selector = new SlickCellRangeSelector({ 
+        selectionCss: { border: '2px solid black' } as CSSStyleDeclaration,
+        copyToSelectionCss: { border: '2px solid purple' } as CSSStyleDeclaration 
+      });
+    } else {
+      this._selector = options.cellRangeSelector;
+    }
+  }
+
+  // Region: Setup
+  // -----------------------------------------------------------------------------
+
+  init(grid: SlickGrid) {
+    if (Draggable === undefined) {
+      throw new Error('Slick.Draggable is undefined, make sure to import "slick.interactions.js"');
+    }
+    
+    this._grid = grid;
+    Utils.addSlickEventPubSubWhenDefined(grid.getPubSubService(), this);
+  
+    if (!this._selector && this._options?.dragToSelect) {
+      if (!SlickCellRangeDecorator) {
+        throw new Error('Slick.CellRangeDecorator is required when option dragToSelect set to true');
+      }
+      this._selector = new SlickCellRangeSelector({
+        selectionCss: { border: 'none' } as CSSStyleDeclaration,
+        autoScroll: this._options?.autoScrollWhenDrag
+      });
+    }
+
+    if (grid.hasDataView()) {
+      this._dataView = grid.getData<CustomDataView | SlickDataView>();
+    }
+    this._grid.onActiveCellChanged.subscribe(this.handleActiveCellChange.bind(this));
+    this._grid.onKeyDown.subscribe(this.handleKeyDown.bind(this));
+    this._grid.onClick.subscribe(this.handleClick.bind(this));
+    if (this._selector) {
+      grid.registerPlugin(this._selector);
+      this._selector.onCellRangeSelected.subscribe(this.handleCellRangeSelected.bind(this));
+      this._selector.onBeforeCellRangeSelected.subscribe(this.handleBeforeCellRangeSelected.bind(this));
+    }
+  }
+
+  destroy() {
+    this._grid.onActiveCellChanged.unsubscribe(this.handleActiveCellChange.bind(this));
+    this._grid.onKeyDown.unsubscribe(this.handleKeyDown.bind(this));
+    this._grid.onClick.unsubscribe(this.handleClick.bind(this));
+     this._selector.onCellRangeSelected.unsubscribe(this.handleCellRangeSelected.bind(this));
+    this._selector.onBeforeCellRangeSelected.unsubscribe(this.handleBeforeCellRangeSelected.bind(this));
+    this._grid.unregisterPlugin(this._selector);
+    this._selector?.destroy();
+  }
+
+  // Region: CellSelectionModel Members
+  // -----------------------------------------------------------------------------
+
+  protected removeInvalidRanges(ranges: SlickRange_[]) {
+    const result: SlickRange_[] = [];
+
+    for (let i = 0; i < ranges.length; i++) {
+      const r = ranges[i];
+      if (this._grid.canCellBeSelected(r.fromRow, r.fromCell) && this._grid.canCellBeSelected(r.toRow, r.toCell)) {
+        result.push(r);
+      }
+    }
+
+    return result;
+  }
+
+  protected rangesAreEqual(range1: SlickRange_[], range2: SlickRange_[]) {
+    let areDifferent = (range1.length !== range2.length);
+    if (!areDifferent) {
+      for (let i = 0; i < range1.length; i++) {
+        if (
+          range1[i].fromCell !== range2[i].fromCell
+          || range1[i].fromRow !== range2[i].fromRow
+          || range1[i].toCell !== range2[i].toCell
+          || range1[i].toRow !== range2[i].toRow
+        ) {
+          areDifferent = true;
+          break;
+        }
+      }
+    }
+    return !areDifferent;
+  }
+
+  // Region: RowSelectionModel Members
+  // -----------------------------------------------------------------------------
+
+  protected rangesToRows(ranges: SlickRange_[]): number[] {
+    const rows: number[] = [];
+    for (let i = 0; i < ranges.length; i++) {
+      for (let j = ranges[i].fromRow; j <= ranges[i].toRow; j++) {
+        rows.push(j);
+      }
+    }
+    return rows;
+  }
+
+  protected rowsToRanges(rows: number[]) {
+    const ranges: SlickRange_[] = [];
+    const lastCell = this._grid.getColumns().length - 1;
+    rows.forEach(row => ranges.push(new SlickRange(row, 0, row, lastCell)));
+    return ranges;
+  }
+
+  protected getRowsRange(from: number, to: number) {
+    let i;
+    const rows: number[] = [];
+    for (i = from; i <= to; i++) {
+      rows.push(i);
+    }
+    for (i = to; i < from; i++) {
+      rows.push(i);
+    }
+    return rows;
+  }
+
+  getSelectedRows() {
+    return this.rangesToRows(this._ranges);
+  }
+
+  setSelectedRows(rows: number[]) {
+    this.setSelectedRanges(this.rowsToRanges(rows), 'SlickRowSelectionModel.setSelectedRows', '');
+  }
+
+  // Region: Shared Members
+  // -----------------------------------------------------------------------------
+
+  /** Provide a way to force a recalculation of page row count (for example on grid resize) */
+  resetPageRowCount() {
+    this._cachedPageRowCount = 0;
+  }
+
+  setSelectedRanges(ranges: SlickRange_[], caller = 'SlickHybridSelectionModel.setSelectedRanges', selectionMode: string) {
+    // simple check for: empty selection didn't change, prevent firing onSelectedRangesChanged
+    if ((!this._ranges || this._ranges.length === 0) && (!ranges || ranges.length === 0)) { return; }
+
+    // if range has not changed, don't fire onSelectedRangesChanged
+    const rangeHasChanged = !this.rangesAreEqual(this._ranges, ranges);
+
+    if (this._activeSelectionIsRow) {
+      this._ranges = ranges;
+
+      // provide extra "caller" argument through SlickEventData event to avoid breaking the previous pubsub event structure
+      // that only accepts an array of selected range `SlickRange[]`, the SlickEventData args will be merged and used later by `onSelectedRowsChanged`
+      const eventData = new SlickEventData(new CustomEvent('click', { detail: { caller, selectionMode } }), this._ranges);
+      this.onSelectedRangesChanged.notify(this._ranges, eventData);
+    } else {
+      this._ranges = this.removeInvalidRanges(ranges);
+      if (rangeHasChanged) {
+        // provide extra "caller" argument through SlickEventData event to avoid breaking the previous pubsub event structure
+        // that only accepts an array of selected range `SlickRange[]`, the SlickEventData args will be merged and used later by `onSelectedRowsChanged`
+        const eventData = new SlickEventData(new CustomEvent('click', { detail: { caller, selectionMode, addDragHandle: true } }), this._ranges);
+        this.onSelectedRangesChanged.notify(this._ranges, eventData);
+      }
+    }
+  }
+
+  currentSelectionModeIsRow() {
+    return this._activeSelectionIsRow;
+  }
+
+  getSelectedRanges() {
+    return this._ranges;
+  }
+
+  refreshSelections() {
+    if (this._activeSelectionIsRow) {
+      this.setSelectedRows(this.getSelectedRows());
+    } else {
+      this.setSelectedRanges(this.getSelectedRanges(), undefined, '');
+    }
+  }
+
+  getRowMoveManagerPlugin(): SlickRowMoveManager_ | SlickCrossGridRowMoveManager_ | undefined {
+    return this._grid.getPluginByName('RowMoveManager') || this._grid.getPluginByName('CrossGridRowMoveManager');
+  }
+
+  rowSelectionModelIsActive(data: OnActiveCellChangedEventArgs): boolean {
+    // work out required selection mode
+    if (this._options?.rowSelectOverride) {
+      return this._options?.rowSelectOverride(data, this, this._grid);
+    }
+
+    if (this._options?.handleRowMoveManagerColumn) {
+      const rowMoveManager = this.getRowMoveManagerPlugin();
+      if (rowMoveManager?.isHandlerColumn(data.cell)) { return true; }
+    }
+    
+    const targetColumn = this._grid.getVisibleColumns()[data.cell];
+    return this._options?.rowSelectColumnIdArr.includes('' + targetColumn.id) || false;
+  }
+
+  protected handleActiveCellChange(_e: SlickEventData_, args: OnActiveCellChangedEventArgs) {
+    this._prevSelectedRow = undefined;
+    const isCellDefined = Utils.isDefined(args.cell);
+    const isRowDefined = Utils.isDefined(args.row);
+    this._activeSelectionIsRow = this.rowSelectionModelIsActive(args);
+
+    if (this._activeSelectionIsRow) {
+      if (this._options?.selectActiveRow && args.row !== null) {
+        this.setSelectedRanges([new Slick.Range(args.row, 0, args.row, this._grid.getColumns().length - 1)], undefined, '');
+      }
+    } else {
+      if (this._options?.selectActiveCell && isRowDefined && isCellDefined) {
+        this.setSelectedRanges([new SlickRange(args.row, args.cell)], undefined, '');
+      } else if (!this._options?.selectActiveCell || (!isRowDefined && !isCellDefined)) {
+        // clear the previous selection once the cell changes
+        this.setSelectedRanges([], undefined, '');
+      }
+    }
+  }
+
+  protected isKeyAllowed(key: string) {
+    return ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'PageDown', 'PageUp', 'Home', 'End'].some(k => k === key);
+  }
+
+  protected handleKeyDown(e: SlickEventData_) {
+    if (!this._activeSelectionIsRow) {
+      let ranges: SlickRange_[], last: SlickRange_;
+      const colLn = this._grid.getColumns().length;
+      const active = this._grid.getActiveCell();
+      let dataLn = 0;
+      if (this._dataView && 'getPagingInfo' in this._dataView) {
+        dataLn = this._dataView?.getPagingInfo().pageSize || this._dataView.getLength();
+      } else {
+        dataLn = this._grid.getDataLength();
+      }
+
+      if (active && (e.shiftKey || e.ctrlKey) && !e.altKey && this.isKeyAllowed(e.key as string)) {
+        ranges = this.getSelectedRanges().slice();
+        if (!ranges.length) {
+          ranges.push(new SlickRange(active.row, active.cell));
+        }
+        // keyboard can work with last range only
+        last = ranges.pop() as SlickRange_;
+
+        // can't handle selection out of active cell
+        if (!last.contains(active.row, active.cell)) {
+          last = new SlickRange(active.row, active.cell);
+        }
+
+        let dRow = last.toRow - last.fromRow;
+        let dCell = last.toCell - last.fromCell;
+
+        // walking direction
+        const dirRow = active.row === last.fromRow ? 1 : -1;
+        const dirCell = active.cell === last.fromCell ? 1 : -1;
+        const isSingleKeyMove = e.key!.startsWith('Arrow');
+        let toCell: undefined | number = undefined;
+        let toRow = 0;
+
+        if (isSingleKeyMove && !e.ctrlKey) {
+          // single cell move: (Arrow{Up/ArrowDown/ArrowLeft/ArrowRight})
+          if (e.key === 'ArrowLeft') {
+            dCell -= dirCell;
+          } else if (e.key === 'ArrowRight') {
+            dCell += dirCell;
+          } else if (e.key === 'ArrowUp') {
+            dRow -= dirRow;
+          } else if (e.key === 'ArrowDown') {
+            dRow += dirRow;
+          }
+          toRow = active.row + dirRow * dRow;
+        } else {
+          // multiple cell moves: (Home, End, Page{Up/Down})
+          if (this._cachedPageRowCount < 1) {
+            this._cachedPageRowCount = this._grid.getViewportRowCount();
+          }
+          if (this._prevSelectedRow === undefined) {
+            this._prevSelectedRow = active.row;
+          }
+
+          if (e.shiftKey && !e.ctrlKey && e.key === 'Home') {
+            toCell = 0;
+            toRow = active.row;
+          } else if (e.shiftKey && !e.ctrlKey && e.key === 'End') {
+            toCell = colLn - 1;
+            toRow = active.row;
+          } else if (e.ctrlKey && e.shiftKey && e.key === 'Home') {
+            toCell = 0;
+            toRow = 0;
+          } else if (e.ctrlKey && e.shiftKey && e.key === 'End') {
+            toCell = colLn - 1;
+            toRow = dataLn - 1;
+          } else if (e.key === 'PageUp') {
+            if (this._prevSelectedRow >= 0) {
+              toRow = this._prevSelectedRow - this._cachedPageRowCount;
+            }
+            if (toRow < 0) {
+              toRow = 0;
+            }
+          } else if (e.key === 'PageDown') {
+            if (this._prevSelectedRow <= dataLn - 1) {
+              toRow = this._prevSelectedRow + this._cachedPageRowCount;
+            }
+            if (toRow > dataLn - 1) {
+              toRow = dataLn - 1;
+            }
+          }
+          this._prevSelectedRow = toRow;
+        }
+
+        // define new selection range
+        toCell ??= active.cell + dirCell * dCell;
+        const new_last = new SlickRange(active.row, active.cell, toRow, toCell);
+        if (this.removeInvalidRanges([new_last]).length) {
+          ranges.push(new_last);
+          const viewRow = dirRow > 0 ? new_last.toRow : new_last.fromRow;
+          const viewCell = dirCell > 0 ? new_last.toCell : new_last.fromCell;
+
+          if (isSingleKeyMove) {
+            this._grid.scrollRowIntoView(viewRow);
+            this._grid.scrollCellIntoView(viewRow, viewCell);
+          } else {
+            this._grid.scrollRowIntoView(toRow);
+            this._grid.scrollCellIntoView(toRow, viewCell);
+          }
+        } else {
+          ranges.push(last);
+        }
+
+        this.setSelectedRanges(ranges, undefined, '');
+
+        e.preventDefault();
+        e.stopPropagation();
+        this._prevKeyDown = e.key as string;
+      }
+    } else {
+      const activeRow = this._grid.getActiveCell();
+      if (this._grid.getOptions().multiSelect && activeRow
+        && e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey
+        && (e.which === keyCode.UP || e.which === keyCode.DOWN)) {
+        let selectedRows = this.getSelectedRows();
+        selectedRows.sort(function (x, y) {
+          return x - y;
+        });
+
+        if (!selectedRows.length) {
+          selectedRows = [activeRow.row];
+        }
+
+        let top = selectedRows[0];
+        let bottom = selectedRows[selectedRows.length - 1];
+        let active: number;
+
+        if (e.which === keyCode.DOWN) {
+          active = activeRow.row < bottom || top === bottom ? ++bottom : ++top;
+        } else {
+          active = activeRow.row < bottom ? --bottom : --top;
+        }
+
+        if (active >= 0 && active < this._grid.getDataLength()) {
+          this._grid.scrollRowIntoView(active);
+          const tempRanges = this.rowsToRanges(this.getRowsRange(top, bottom));
+          this.setSelectedRanges(tempRanges, undefined, '');
+        }
+
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    }
+  }
+
+  protected handleClick(e: SlickEventData_): boolean | void {
+    if (!this._activeSelectionIsRow) { return; }
+
+    const cell = this._grid.getCellFromEvent(e);
+    if (!cell || !this._grid.canCellBeActive(cell.row, cell.cell)) {
+      return false;
+    }
+
+    if (!this._grid.getOptions().multiSelect || (
+      !e.ctrlKey && !e.shiftKey && !e.metaKey)) {
+      return false;
+    }
+
+    let selection = this.rangesToRows(this._ranges);
+    const idx = selection.indexOf(cell.row);
+
+    if (idx === -1 && (e.ctrlKey || e.metaKey)) {
+      selection.push(cell.row);
+      this._grid.setActiveCell(cell.row, cell.cell);
+    } else if (idx !== -1 && (e.ctrlKey || e.metaKey)) {
+      selection = selection.filter((o) => o !== cell.row);
+      this._grid.setActiveCell(cell.row, cell.cell);
+    } else if (selection.length && e.shiftKey) {
+      const last = selection.pop() as number;
+      const from = Math.min(cell.row, last);
+      const to = Math.max(cell.row, last);
+      selection = [];
+      for (let i = from; i <= to; i++) {
+        if (i !== last) {
+          selection.push(i);
+        }
+      }
+      selection.push(last);
+      this._grid.setActiveCell(cell.row, cell.cell);
+    }
+
+    const tempRanges = this.rowsToRanges(selection);
+    this.setSelectedRanges(tempRanges, undefined, '');
+    e.stopImmediatePropagation();
+
+    return true;
+  }
+
+  protected handleBeforeCellRangeSelected(e: SlickEventData_, cell: { row: number; cell: number; }): boolean | void {
+    if (this._activeSelectionIsRow) {
+      if (!this._isRowMoveManagerHandler) {
+        const rowMoveManager = this._grid.getPluginByName<SlickRowMoveManager_>('RowMoveManager') || this._grid.getPluginByName<SlickCrossGridRowMoveManager_>('CrossGridRowMoveManager');
+        this._isRowMoveManagerHandler = rowMoveManager ? rowMoveManager.isHandlerColumn : Utils.noop;
+      }
+      if (this._grid.getEditorLock().isActive() || this._isRowMoveManagerHandler(cell.cell)) {
+        e.stopPropagation();
+        return false;
+      }
+      this._grid.setActiveCell(cell.row, cell.cell);
+    } else {
+      if (this._grid.getEditorLock().isActive()) {
+        e.stopPropagation();
+        return false;
+      }
+    }
+  }
+
+  protected handleCellRangeSelected(_e: SlickEventData_, args: { range: SlickRange_; selectionMode: string; allowAutoEdit?: boolean; }) {
+    if (this._activeSelectionIsRow) { 
+      if (!this._grid.getOptions().multiSelect || !this._options?.selectActiveRow) {
+        return false;
+      }
+      this.setSelectedRanges([new SlickRange(args.range.fromRow, 0, args.range.toRow, this._grid.getColumns().length - 1)], undefined, args.selectionMode);
+    } else {
+      this._grid.setActiveCell(args.range.fromRow, args.range.fromCell, (args.allowAutoEdit ? undefined : false), false, true);
+      this.setSelectedRanges([args.range], undefined, args.selectionMode);
+    }
+    return true;
+  }
+}
+
+// extend Slick namespace on window object when building as iife
+if (IIFE_ONLY && window.Slick) {
+  Utils.extend(true, window, {
+    Slick: {
+      HybridSelectionModel: SlickHybridSelectionModel
+    }
+  });
+}
diff --git a/src/plugins/slick.rowselectionmodel.ts b/src/plugins/slick.rowselectionmodel.ts
index 80ecaff75..8f0583bc2 100644
--- a/src/plugins/slick.rowselectionmodel.ts
+++ b/src/plugins/slick.rowselectionmodel.ts
@@ -141,7 +141,7 @@ export class SlickRowSelectionModel {
     this.setSelectedRanges(this.rowsToRanges(rows), 'SlickRowSelectionModel.setSelectedRows');
   }
 
-  setSelectedRanges(ranges: SlickRange_[], caller = 'SlickRowSelectionModel.setSelectedRanges') {
+  setSelectedRanges(ranges: SlickRange_[], caller = 'SlickRowSelectionModel.setSelectedRanges', selectionMode?: string) {
     // simple check for: empty selection didn't change, prevent firing onSelectedRangesChanged
     if ((!this._ranges || this._ranges.length === 0) && (!ranges || ranges.length === 0)) {
       return;
@@ -150,7 +150,7 @@ export class SlickRowSelectionModel {
 
     // provide extra "caller" argument through SlickEventData event to avoid breaking the previous pubsub event structure
     // that only accepts an array of selected range `SlickRange[]`, the SlickEventData args will be merged and used later by `onSelectedRowsChanged`
-    const eventData = new SlickEventData(new CustomEvent('click', { detail: { caller } }), this._ranges);
+    const eventData = new SlickEventData(new CustomEvent('click', { detail: { caller, selectionMode } }), this._ranges);
     this.onSelectedRangesChanged.notify(this._ranges, eventData);
   }
 
@@ -256,11 +256,11 @@ export class SlickRowSelectionModel {
     this._grid.setActiveCell(cell.row, cell.cell);
   }
 
-  protected handleCellRangeSelected(_e: SlickEventData_, args: { range: SlickRange_; }): boolean | void {
+  protected handleCellRangeSelected(_e: SlickEventData_, args: { range: SlickRange_; selectionMode: string; }): boolean | void {
     if (!this._grid.getOptions().multiSelect || !this._options.selectActiveRow) {
       return false;
     }
-    this.setSelectedRanges([new SlickRange(args.range.fromRow, 0, args.range.toRow, this._grid.getColumns().length - 1)]);
+    this.setSelectedRanges([new SlickRange(args.range.fromRow, 0, args.range.toRow, this._grid.getColumns().length - 1)], undefined, args.selectionMode);
   }
 }
 
diff --git a/src/slick.core.ts b/src/slick.core.ts
index 85ef6aa3c..aa1497076 100644
--- a/src/slick.core.ts
+++ b/src/slick.core.ts
@@ -11,8 +11,10 @@ import type {
   ElementEventListener,
   Handler,
   InferDOMType,
-  MergeTypes
+  MergeTypes,
+  DragRange
 } from './models/index.js';
+import type { SlickGrid } from './slick.grid.js';
 
 export interface BasePubSub {
   publish<ArgType = any>(_eventName: string | any, _data?: ArgType): any;
@@ -327,6 +329,24 @@ export class SlickRange {
     return this.fromRow === this.toRow && this.fromCell === this.toCell;
   }
 
+  /**
+   * Row Count.
+   * @method rowCount
+   * @return {Number}
+   */
+  rowCount() {
+    return this.toRow - this.fromRow + 1;
+  }
+
+  /**
+   * Cell Count.
+   * @method cellCount
+   * @return {Number}
+   */
+  cellCount() {
+     return this.toCell - this.fromCell + 1;
+  }
+
   /**
    * Returns whether a range contains a given cell.
    * @method contains
@@ -354,6 +374,64 @@ export class SlickRange {
   };
 }
 
+/**
+ * A structure containing a range of cells to copy to.
+ * @class SlickCopyRange
+ * @constructor
+ * @param fromRow {Integer} Starting row.
+ * @param fromCell {Integer} Starting cell.
+ * @param rowCount {Integer} Row Count.
+ * @param cellCount {Integer} Cell Count.
+ */
+export class SlickCopyRange {
+  fromRow: number;
+  fromCell: number;
+  rowCount: number;
+  cellCount: number;
+
+  constructor(fromRow: number, fromCell: number, rowCount: number, cellCount: number) {
+    this.fromRow = fromRow;
+    this.fromCell = fromCell;
+    this.rowCount = rowCount;
+    this.cellCount = cellCount;
+  }
+
+}
+
+/**
+ * Create a handle element for Excel style drag-replace
+ * @class DragExtendHandle
+ * @constructor
+ * @param gridUid {String} string UID of parent grid
+ */
+export class SlickDragExtendHandle {
+  id: string;
+  cssClass = 'slick-drag-replace-handle';
+
+  constructor(gridUid: string) {
+    this.id = gridUid + "_drag_replace_handle";
+  }
+
+  getHandleHtml() {
+    return '<div id="' + this.id + '" class="slick-drag-replace-handle"></div>';
+    //console.log('DragReplaceEl.getStringEl');
+  }
+
+  removeEl() {
+    const dragReplaceEl = document.getElementById(this.id);
+    if (dragReplaceEl) { dragReplaceEl.remove(); }
+    //console.log('DragReplaceEl.removeEl');
+  }
+
+  createEl(activeCellNode: any) {
+    if (activeCellNode) {
+      const dragReplaceEl = document.createElement("div");
+      dragReplaceEl.classList.add("slick-drag-replace-handle");
+      dragReplaceEl.setAttribute("id", this.id);
+      activeCellNode.appendChild(dragReplaceEl);
+    }
+  }
+}
 
 /**
  * A base class that all special / non-data rows (like Group and GroupTotals) derive from.
@@ -1086,6 +1164,145 @@ export class Utils {
   }
 }
 
+export class SelectionUtils {
+
+    //   |---0----|---1----|---2----|---3----|---4----|---5----|
+    // 0 |        |        |        |     ^  |        |        | 
+    //   |--------|--------|--------|--------|--------|--------|
+    // 1 |        |        |        |        |        |        | 
+    //   |--------|--------|--------|--------|--------|--------|
+    // 2 |        |        |   1    |   2    |    > h |        | 
+    //   |--------|--------|--------|--------|--------|--------|
+    // 3 |   <    |        |   4    |   5   x|    > h |    >   | 
+    //   |--------|--------|--------|--------|--------|--------|
+    // 4 |        |        |    > v |    > v |    > v |        | 
+    //   |--------|--------|--------|--------|--------|--------|
+    // 5 |        |        |        |    v   |        |        | 
+    //   |--------|--------|--------|--------|--------|--------|
+    //
+    // original range (1,2,4,5) expanded one cell to right and down
+    //  '> h' indicates horizontal target copy area
+    //  '> v' indicates vertical target copy area
+    // note bottom right (corner) cell is considered part of vertical copy area
+
+   public static normaliseDragRange(rawRange: DragRange) {
+      // depending how the range is created (drag up/down) the start row/cell may be
+      // greater or less thatn the end row/cell. Create a guaranteed left/down 
+      // progressive range (ie. start row/cell < end row/cell) 
+
+      const rtn : DragRange = {
+        start : {
+          row: (rawRange.end.row ?? 0) > (rawRange.start.row ?? 0) ? rawRange.start.row : rawRange.end.row,
+          cell: (rawRange.end.cell ?? 0) > (rawRange.start.cell ?? 0) ? rawRange.start.cell : rawRange.end.cell
+        },
+        end : {
+          row: (rawRange.end.row ?? 0) > (rawRange.start.row ?? 0) ? rawRange.end.row : rawRange.start.row,
+          cell: (rawRange.end.cell ?? 0) > (rawRange.start.cell ?? 0) ? rawRange.end.cell : rawRange.start.cell
+        }
+      };
+      rtn.rowCount = (rtn.end.row ?? 0) - (rtn.start.row ?? 0) + 1;
+      rtn.cellCount = (rtn.end.cell ?? 0) - (rtn.start.cell ?? 0) + 1;
+ 
+      rtn.wasDraggedUp = (rawRange.end.row ?? 0) < (rawRange.start.row ?? 0);
+      rtn.wasDraggedLeft = (rawRange.end.row ?? 0) < (rawRange.start.row ?? 0);
+     
+      return rtn;
+    }
+
+    public static copyRangeIsLarger(baseRange: SlickRange, copyToRange : SlickRange) : boolean {
+      return copyToRange.fromRow < baseRange.fromRow
+         || copyToRange.fromCell < baseRange.fromCell
+         || copyToRange.toRow > baseRange.toRow
+         || copyToRange.toCell > baseRange.toCell
+      ;  
+    }
+
+   public static normalRangeOppositeCellFromCopy(normalisedDragRange : DragRange, targetCell : { row: number, cell: number }) : { row: number, cell: number } {
+      const row = targetCell.row < (normalisedDragRange.end.row || 0)
+        ? (normalisedDragRange.end.row || 0)
+        : (normalisedDragRange.start.row || 0)
+      ;
+      const cell = targetCell.cell < (normalisedDragRange.end.cell  || 0)
+        ? (normalisedDragRange.end.cell || 0)
+        : (normalisedDragRange.start.cell || 0)
+      ;
+      return { row, cell };
+    } 
+
+    // copy to range above or below - includes corner space target range
+    public static verticalTargetRange(baseRange: SlickRange, copyToRange : SlickRange) {
+      const copyUp = copyToRange.fromRow < baseRange.fromRow;
+      const copyDown = copyToRange.toRow > baseRange.toRow;
+      if (!copyUp && !copyDown) {
+        return null;
+      }
+      let rtn;
+      if (copyUp) {
+        rtn = new Slick.Range(copyToRange.fromRow, copyToRange.fromCell, baseRange.fromRow - 1, copyToRange.toCell);
+      } else {
+        rtn = new Slick.Range(baseRange.toRow + 1, copyToRange.fromCell, copyToRange.toRow, copyToRange.toCell);
+      }
+      return rtn;
+    }
+
+    // copy to range left or right - excludes corner space target range
+    public static horizontalTargetRange(baseRange: SlickRange, copyToRange : SlickRange) {
+      const copyLeft = copyToRange.fromCell < baseRange.fromCell;
+      const copyRight = copyToRange.toCell > baseRange.toCell;
+      if (!copyLeft && !copyRight) {
+        return null;
+      }
+      let rtn;
+      if (copyLeft) {
+        rtn = new Slick.Range(baseRange.fromRow, copyToRange.fromCell, baseRange.toRow, baseRange.fromCell - 1);
+      } else {
+        rtn = new Slick.Range(baseRange.fromRow, baseRange.toCell + 1, baseRange.toRow, copyToRange.toCell);
+      }
+      return rtn;
+    }
+
+ 
+    public static defaultCopyDraggedCellRange(e , args) {
+      const verticalTargetRange = Slick.SelectionUtils.verticalTargetRange(args.prevSelectedRange, args.selectedRange);
+      const horizontalTargetRange = Slick.SelectionUtils.horizontalTargetRange(args.prevSelectedRange, args.selectedRange);
+
+      if (verticalTargetRange) { Slick.SelectionUtils.copyCellsToTargetRange(args.prevSelectedRange, verticalTargetRange, args.grid); }
+      if (horizontalTargetRange) { Slick.SelectionUtils.copyCellsToTargetRange(args.prevSelectedRange, horizontalTargetRange, args.grid); }
+    }  
+
+
+    public static copyCellsToTargetRange(baseRange : SlickRange, targetRange: SlickRange, grid : SlickGrid) {
+      let fromRowOffset = 0, fromCellOffset = 0;
+      const columns = grid.getVisibleColumns();
+      const options = grid.getOptions();
+
+      for (let i=0; i < targetRange.rowCount() ; i++) {
+        const toRow = grid.getDataItem(targetRange.fromRow + i);
+        const fromRow = grid.getDataItem(baseRange.fromRow + fromRowOffset);
+        fromCellOffset = 0;
+        
+        for (let j=0; j < targetRange.cellCount(); j++) {
+          const toColDef = columns[targetRange.fromCell + j];
+          const fromColDef = columns[baseRange.fromCell + fromCellOffset];
+          
+          if (!toColDef.hidden && !fromColDef.hidden) {
+            let val = fromRow[fromColDef.field];
+            if (options.dataItemColumnValueExtractor) {
+              val = options.dataItemColumnValueExtractor(fromRow, fromColDef);
+            }
+            toRow[toColDef.field] = val;
+          }
+          
+          fromCellOffset++;
+          if (fromCellOffset >= baseRange.cellCount()) { fromCellOffset = 0; }
+        }
+        
+        fromRowOffset++;
+        if (fromRowOffset >= baseRange.rowCount()) { fromRowOffset = 0; }
+      }
+    }
+}
+
 export const SlickGlobalEditorLock = new SlickEditorLock();
 
 // export Slick namespace on both global & window objects
@@ -1094,6 +1311,8 @@ const SlickCore = {
   EventData: SlickEventData,
   EventHandler: SlickEventHandler,
   Range: SlickRange,
+  CopyRange: SlickCopyRange,
+  DragExtendHandle: SlickDragExtendHandle,
   NonDataRow: SlickNonDataItem,
   Group: SlickGroup,
   GroupTotals: SlickGroupTotals,
@@ -1152,6 +1371,11 @@ const SlickCore = {
     LastRow: 'LS1'
   },
 
+  'CellSelectionMode': {
+    Select: "SEL",
+    Replace: "REP"
+  },
+
   'ValueFilterMode': {
     None: 'NONE',
     DeDuplicate: 'DEDP',
@@ -1168,9 +1392,9 @@ const SlickCore = {
 };
 
 export const {
-  EditorLock, Event, EventData, EventHandler, Group, GroupTotals, NonDataRow, Range,
+  EditorLock, Event, EventData, EventHandler, Group, GroupTotals, NonDataRow, Range, CopyRange, DragExtendHandle,
   RegexSanitizer, GlobalEditorLock, keyCode, preClickClassName, GridAutosizeColsMode, ColAutosizeMode,
-  RowSelectionMode, ValueFilterMode, WidthEvalMode
+  RowSelectionMode, CellSelectionMode,ValueFilterMode, WidthEvalMode
 } = SlickCore;
 
 // also add to global object when exist
diff --git a/src/slick.grid.ts b/src/slick.grid.ts
index b6f212d87..c9ce3ab57 100644
--- a/src/slick.grid.ts
+++ b/src/slick.grid.ts
@@ -67,6 +67,7 @@ import type {
   OnSetOptionsEventArgs,
   OnScrollEventArgs,
   OnValidationErrorEventArgs,
+  OnDragReplaceCellsEventArgs,
   PagingInfo,
   RowInfo,
   SelectionModel,
@@ -83,13 +84,16 @@ import {
   keyCode as keyCode_,
   preClickClassName as preClickClassName_,
   RowSelectionMode as RowSelectionMode_,
+  CellSelectionMode as CellSelectionMode_,
   type SlickEditorLock,
   SlickEvent as SlickEvent_,
   SlickEventData as SlickEventData_,
   SlickRange as SlickRange_,
   Utils as Utils_,
+  SelectionUtils as SelectionUtils_,
   ValueFilterMode as ValueFilterMode_,
   WidthEvalMode as WidthEvalMode_,
+  DragExtendHandle as DragExtendHandle_,
 } from './slick.core.js';
 import { Draggable as Draggable_, MouseWheel as MouseWheel_, Resizable as Resizable_ } from './slick.interactions.js';
 
@@ -104,12 +108,15 @@ const keyCode = IIFE_ONLY ? Slick.keyCode : keyCode_;
 const preClickClassName = IIFE_ONLY ? Slick.preClickClassName : preClickClassName_;
 const SlickRange = IIFE_ONLY ? Slick.Range : SlickRange_;
 const RowSelectionMode = IIFE_ONLY ? Slick.RowSelectionMode : RowSelectionMode_;
+const CellSelectionMode = IIFE_ONLY ? Slick.CellSelectionMode : CellSelectionMode_;
 const ValueFilterMode = IIFE_ONLY ? Slick.ValueFilterMode : ValueFilterMode_;
 const Utils = IIFE_ONLY ? Slick.Utils : Utils_;
+const SelectionUtils = IIFE_ONLY ? Slick.SelectionUtils : SelectionUtils_;
 const WidthEvalMode = IIFE_ONLY ? Slick.WidthEvalMode : WidthEvalMode_;
 const Draggable = IIFE_ONLY ? Slick.Draggable : Draggable_;
 const MouseWheel = IIFE_ONLY ? Slick.MouseWheel : MouseWheel_;
 const Resizable = IIFE_ONLY ? Slick.Resizable : Resizable_;
+const DragExtendHandle = IIFE_ONLY ? Slick.DragExtendHandle : DragExtendHandle_;
 
 /**
  * @license
@@ -203,6 +210,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
   onSort: SlickEvent_<SingleColumnSort | MultiColumnSort>;
   onValidationError: SlickEvent_<OnValidationErrorEventArgs>;
   onViewportChanged: SlickEvent_<{ grid: SlickGrid; }>;
+  onDragReplaceCells: SlickEvent_<OnDragReplaceCellsEventArgs>;
 
   // ---
   // protected variables
@@ -362,6 +370,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
   protected initialized = false;
   protected _container!: HTMLElement;
   protected uid = `slickgrid_${Math.round(1000000 * Math.random())}`;
+  protected dragReplaceEl = new DragExtendHandle(this.uid);
   protected _focusSink!: HTMLDivElement;
   protected _focusSink2!: HTMLDivElement;
   protected _groupHeaders: HTMLDivElement[] = [];
@@ -427,6 +436,8 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
   protected activePosY!: number;
   protected activeRow!: number;
   protected activeCell!: number;
+  protected selectionBottomRow!: number;
+  protected selectionRightCell!: number;
   protected activeCellNode: HTMLDivElement | null = null;
   protected currentEditor: Editor | null = null;
   protected serializedEditorValue: any;
@@ -448,6 +459,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
 
   protected selectionModel?: SelectionModel;
   protected selectedRows: number[] = [];
+  protected selectedRanges: SlickRange_[] = [];
 
   protected plugins: SlickPlugin[] = [];
   protected cellCssClasses: CssStyleHash = {};
@@ -610,6 +622,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     this.onSort = new SlickEvent<SingleColumnSort | MultiColumnSort>('onSort', externalPubSub);
     this.onValidationError = new SlickEvent<OnValidationErrorEventArgs>('onValidationError', externalPubSub);
     this.onViewportChanged = new SlickEvent<{ grid: SlickGrid; }>('onViewportChanged', externalPubSub);
+    this.onDragReplaceCells = new SlickEvent<OnDragReplaceCellsEventArgs>('onDragReplaceCells', externalPubSub);
 
     this.initialize(options);
   }
@@ -962,7 +975,8 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
       if (Draggable) {
         this.slickDraggableInstance = Draggable({
           containerElement: this._container,
-          allowDragFrom: 'div.slick-cell',
+          allowDragFrom: 'div.slick-cell, div.' + this.dragReplaceEl.cssClass,
+          dragFromClassDetectArr: [{ tag: 'dragReplaceHandle', id: this.dragReplaceEl.id }],
           // the slick cell parent must always contain `.dnd` and/or `.cell-reorder` class to be identified as draggable
           allowDragFromClosest: 'div.slick-cell.dnd, div.slick-cell.cell-reorder',
           preventDragFromKeys: this._options.preventDragFromKeys,
@@ -3725,7 +3739,12 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
 
     if (self.currentEditor) {
       if (self.currentEditor.isValueChanged()) {
-        const validationResults = self.currentEditor.validate();
+        const validationResults = self.currentEditor.validate(
+          undefined, {
+            rowIndex: self.activeRow,
+            cellIndex: self.activeCell
+          }
+        );
 
         if (validationResults.valid) {
           const row = self.activeRow;
@@ -3891,7 +3910,32 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
    */
   protected handleSelectedRangesChanged(e: SlickEventData_, ranges: SlickRange_[]) {
     const ne = e.getNativeEvent<CustomEvent>();
+    const selectionMode = ne?.detail?.selectionMode ?? '';
+    const addDragHandle = !!ne?.detail?.addDragHandle;
+
+    // drag and replace functionality
+    const prevSelectedRanges = this.selectedRanges.slice(0);
+    this.selectedRanges = ranges;
+
+    if (selectionMode === CellSelectionMode.Replace
+      && prevSelectedRanges && prevSelectedRanges.length === 1
+      && this.selectedRanges && this.selectedRanges.length === 1) {
+      const prevSelectedRange = prevSelectedRanges[0];
+      const selectedRange = this.selectedRanges[0];
+
+      // check range has expanded
+      if (SelectionUtils.copyRangeIsLarger(prevSelectedRange, selectedRange)) {      
+          this.trigger(this.onDragReplaceCells, { prevSelectedRange, selectedRange });
+          this.invalidate();
+      }
+    }
+
     const previousSelectedRows = this.selectedRows.slice(0); // shallow copy previously selected rows for later comparison
+
+    this.selectionBottomRow = -1;
+    this.selectionRightCell = -1;
+    this.dragReplaceEl.removeEl();
+
     this.selectedRows = [];
     const hash: CssStyleHash = {};
     for (let i = 0; i < ranges.length; i++) {
@@ -3906,10 +3950,17 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
           }
         }
       }
+      if (this.selectionBottomRow < ranges[i].toRow) { this.selectionBottomRow = ranges[i].toRow; }
+      if (this.selectionRightCell < ranges[i].toCell) { this.selectionRightCell = ranges[i].toCell; }
     }
 
     this.setCellCssStyles(this._options.selectedCellCssClass || '', hash);
 
+    if (this.selectionBottomRow >= 0 && this.selectionRightCell >= 0 && addDragHandle) {
+      const lowerRightCell = this.getCellNode(this.selectionBottomRow, this.selectionRightCell)
+      this.dragReplaceEl.createEl(lowerRightCell);
+    }
+
     // check if the selected rows have changed (index order isn't important, so we'll sort them both before comparing them)
     if (!this.arrayEquals(previousSelectedRows.sort(), this.selectedRows.sort())) {
       const caller = ne?.detail?.caller ?? 'click';
@@ -3994,6 +4045,11 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
       return false;
     }
 
+    if (this.currentEditor) { 
+      const commitSuccess =  this.getEditorLock().commitCurrentEdit(); 
+      if (!commitSuccess) { return false; }
+    }
+
     const retval = this.trigger(this.onDragStart, dd, e);
     if (retval.isImmediatePropagationStopped()) {
       return retval.getReturnValue();
@@ -5288,6 +5344,11 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     if (item) {
       const cellResult = (Object.prototype.toString.call(formatterResult) !== '[object Object]' ? formatterResult : (formatterResult as FormatterResultWithHtml).html || (formatterResult as FormatterResultWithText).text);
       this.applyHtmlCode(cellDiv, cellResult as string | HTMLElement);
+
+      // add drag-to-replace handle
+      if (row === this.selectionBottomRow && cell === this.selectionRightCell && this._options.showCellSelection) {
+        this.dragReplaceEl.createEl(cellDiv);
+      }
     }
     divRow.appendChild(cellDiv);
 
diff --git a/src/slick.interactions.ts b/src/slick.interactions.ts
index a2c6d63f1..4cbec06a2 100644
--- a/src/slick.interactions.ts
+++ b/src/slick.interactions.ts
@@ -1,4 +1,4 @@
-import type { DragItem, DragPosition, DraggableOption, MouseWheelOption, ResizableOption } from './models/index.js';
+import type { DragItem, DragPosition, ClassDetectElement, DraggableOption, MouseWheelOption, ResizableOption } from './models/index.js';
 import { Utils as Utils_ } from './slick.core.js';
 
 // for (iife) load Slick methods from global Slick object, or use imports for (esm)
@@ -18,6 +18,8 @@ const Utils = IIFE_ONLY ? Slick.Utils : Utils_;
  *   https://betterprogramming.pub/perfecting-drag-and-drop-in-pure-vanilla-javascript-a761184b797a
  * available optional options:
  *   - containerElement: container DOM element, defaults to "document"
+ *   - dragFromClassDetectArr: array of tags and query selectors/ids to match on dragstart, used to determine
+ *     drag source element. eg:  [ { tag: 'B', id: 'myElement' }, { tag: 'A', cssSelector: 'div.myClass' } ]
  *   - allowDragFrom: when defined, only allow dragging from an element that matches a specific query selector
  *   - allowDragFromClosest: when defined, only allow dragging from an element or its parent matching a specific .closest() query selector
  *   - onDragInit: drag initialized callback
@@ -37,6 +39,7 @@ export function Draggable(options: DraggableOption) {
   let deltaX: number;
   let deltaY: number;
   let dragStarted: boolean;
+  let matchClassTag: string;
 
   if (!containerElement) {
     containerElement = document.body;
@@ -88,12 +91,25 @@ export function Draggable(options: DraggableOption) {
 
       if (!options.allowDragFrom || (options.allowDragFrom && (element.matches(options.allowDragFrom)) || (options.allowDragFromClosest && element.closest(options.allowDragFromClosest)))) {
         originaldd.dragHandle = element as HTMLElement;
+
+        matchClassTag = '';
+        if (options.dragFromClassDetectArr) {
+          for (let o: ClassDetectElement, i = 0; i < options.dragFromClassDetectArr.length; i++) {
+            o = options.dragFromClassDetectArr[i];
+
+            if ((o.id && element.id === o.id) || (o.cssSelector && element.matches(o.cssSelector))) {
+              matchClassTag = o.tag;
+              break;
+            }
+          }
+        }
+
         const winScrollPos = Utils.windowScrollPosition();
         startX = winScrollPos.left + targetEvent.clientX;
         startY = winScrollPos.top + targetEvent.clientY;
         deltaX = targetEvent.clientX - targetEvent.clientX;
         deltaY = targetEvent.clientY - targetEvent.clientY;
-        originaldd = Object.assign(originaldd, { deltaX, deltaY, startX, startY, target });
+        originaldd = Object.assign(originaldd, { deltaX, deltaY, startX, startY, target, matchClassTag });
         const result = executeDragCallbackWhenDefined(onDragInit as (e: DragEvent, dd: DragPosition) => boolean | void, event, originaldd as DragItem);
 
         if (result !== false) {
@@ -116,12 +132,12 @@ export function Draggable(options: DraggableOption) {
       const { target } = targetEvent;
 
       if (!dragStarted) {
-        originaldd = Object.assign(originaldd, { deltaX, deltaY, startX, startY, target });
+        originaldd = Object.assign(originaldd, { deltaX, deltaY, startX, startY, target, matchClassTag });
         executeDragCallbackWhenDefined(onDragStart, event, originaldd as DragItem);
         dragStarted = true;
       }
 
-      originaldd = Object.assign(originaldd, { deltaX, deltaY, startX, startY, target });
+      originaldd = Object.assign(originaldd, { deltaX, deltaY, startX, startY, target, matchClassTag });
       executeDragCallbackWhenDefined(onDrag, event, originaldd as DragItem);
     }
   }
diff --git a/src/styles/slick-alpine-theme.scss b/src/styles/slick-alpine-theme.scss
index 3fc660ea7..3427af041 100644
--- a/src/styles/slick-alpine-theme.scss
+++ b/src/styles/slick-alpine-theme.scss
@@ -857,4 +857,12 @@ button.slick-btn {
       background-color: var(--alpine-button-primary-hover-color, v.$alpine-button-primary-hover-color);
     }
   }
-}
\ No newline at end of file
+}
+.slick-drag-replace-handle {
+  height: 7px;
+  width: 7px;
+  background: gray;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
diff --git a/src/styles/slick-default-theme.scss b/src/styles/slick-default-theme.scss
index d3d61f609..c3ef11b36 100644
--- a/src/styles/slick-default-theme.scss
+++ b/src/styles/slick-default-theme.scss
@@ -159,6 +159,15 @@ classes should alter those!
   -webkit-animation-name: slickgrid-invalid-hilite;
 }
 
+.slick-drag-replace-handle {
+  height: 7px;
+  width: 7px;
+  background: gray;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+
 @-moz-keyframes slickgrid-invalid-hilite {
   from { box-shadow: 0 0 6px red; }
   to { box-shadow: none; }
