chore: fix simple reordering example with Row Move, fixes issue #1037 (…

…#1042)

fixes#1037 for  `example9-row-reordering-simple.html`, the drag column that was previously shown was actually a regular column, but the issue was that we need to use `moveRowsPlugin.getColumnDefinition()` to get the proper Row Move plugin column that we then need to add to the current column definitions (in other words, we cannot simply create a column and expect it to be draggable, we really need to get the said column by asking the plugin to dynamically return that correct drag column for us

examples/example9-row-reordering-simple.html

@@ -6,6 +6,7 @@
   <title>SlickGrid example 9: Row reordering</title>
   <link rel="stylesheet" href="../dist/styles/css/slick-icons.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-icons.css" type="text/css"/>
   <link rel="stylesheet" href="../dist/styles/css/slick-alpine-theme.css" type="text/css"/>
   <style>
     .slickgrid-cell-reorder {
@@ -59,16 +60,6 @@ <h2>View Source:</h2>
 var grid;
 var data = [];
 var columns = [
-  {
-    id: "#",
-    name: "",
-    width: 40,
-    behavior: "selectAndMove",
-    selectable: false,
-    resizable: false,
-    cssClass: "slickgrid-cell-reorder",
-    formatter: () => `<span class="sgi sgi-drag"></span>`
-  },
   {
     id: "name",
     name: "Name",
@@ -104,18 +95,21 @@ <h2>View Source:</h2>
     { name: "Find out who's naughty", complete: false},
     { name: "Find out who's nice", complete: false}
   ];
-  console.log(data);
+
+  var moveRowsPlugin = new Slick.RowMoveManager({
+    cssClass: 'sgi sgi-drag',
+    cancelEditOnDrag: true
+  });
+
+  // use unshift to make it the 1st column OR splice to position it where you wish
+  columns.unshift(moveRowsPlugin.getColumnDefinition());
 
   grid = new Slick.Grid("#myGrid", data, columns, options);
 
   grid.setSelectionModel(new Slick.RowSelectionModel({
     dragToSelect: true
   }));
 
-  var moveRowsPlugin = new Slick.RowMoveManager({
-    cancelEditOnDrag: true
-  });
-
   moveRowsPlugin.onBeforeMoveRows.subscribe(function (e, data) {
     for (var i = 0; i < data.rows.length; i++) {
       // no point in moving before or after itself