canvas-datagrid 0.3.14 → 0.3.18

package/lib/draw.js

@@ -122,15 +122,15 @@ export default function (self) {
     x = x + ml;
     y = y + mt;
     if (self.orderDirection === 'asc') {
-      self.ctx.moveTo(x, y);
-      self.ctx.lineTo(x + aw, y);
-      self.ctx.lineTo(x + aw * 0.5, y + ah);
-      self.ctx.moveTo(x, y);
-    } else {
       self.ctx.lineTo(x, y + ah);
       self.ctx.lineTo(x + aw, y + ah);
       self.ctx.lineTo(x + aw * 0.5, y);
       self.ctx.lineTo(x, y + ah);
+    } else {
+      self.ctx.moveTo(x, y);
+      self.ctx.lineTo(x + aw, y);
+      self.ctx.lineTo(x + aw * 0.5, y + ah);
+      self.ctx.moveTo(x, y);
     }
     self.ctx.stroke();
     self.ctx.fill();
@@ -1102,11 +1102,17 @@ export default function (self) {
 
         // Gaps may occur in row numbers between consecutively rendered rows
         // when we are filtering. We draw attention to this by drawing a thick
-        // border overlapping the two consecutive row headers.
+        // border overlapping the two consecutive row headers. If sorting, visible
+        // row numbers stay the same (i.e. they don't correspond to the underlying
+        // data's row number), so we do not show row gaps in that case.
+        const isSorting =
+          self.orderings.columns && self.orderings.columns.length > 0;
+
         if (
           isRowHeader &&
           self.attributes.showRowNumbers &&
-          self.attributes.showRowNumberGaps
+          self.attributes.showRowNumberGaps &&
+          isSorting === false
         ) {
           const previousRowNumber = self.getBoundRowIndexFromViewRowIndex(
             rowOrderIndex - 1,

package/lib/events/index.js

@@ -899,6 +899,7 @@ export default function (self) {
   self.stopDragReorder = function (e) {
     var oIndex,
       tIndex,
+      odata,
       cr = {
         'row-reorder': self.orders.rows,
         'column-reorder': self.orders.columns,
@@ -929,12 +930,15 @@ export default function (self) {
       self.ignoreNextClick = true;
       oIndex = cr[self.dragMode].indexOf(self.reorderObject[i]);
       tIndex = cr[self.dragMode].indexOf(self.reorderTarget[i]);
-      cr[self.dragMode].splice(oIndex, 1);
-      cr[self.dragMode].splice(tIndex, 0, self.reorderObject[i]);
       if (self.dragMode === 'column-reorder') {
+        cr[self.dragMode].splice(oIndex, 1);
+        cr[self.dragMode].splice(tIndex, 0, self.reorderObject[i]);
         self.orders.columns = cr[self.dragMode];
       } else {
-        self.orders.rows = cr[self.dragMode];
+        // self.orders.rows = cr[self.dragMode];
+        odata = self.viewData[oIndex];
+        self.viewData[oIndex] = self.viewData[tIndex];
+        self.viewData[tIndex] = odata;
       }
       self.resize();
       self.setStorageData();
@@ -1169,6 +1173,13 @@ export default function (self) {
     }
     if (['row-reorder', 'column-reorder'].indexOf(self.dragMode) !== -1) {
       self.draggingItem = self.dragStartObject;
+      if (
+        self.dragMode === 'column-reorder' &&
+        self.attributes.columnHeaderClickBehavior === 'select'
+      ) {
+        self.selectColumn(self.currentCell.header.index, ctrl, e.shiftKey);
+        self.draw();
+      }
       document.body.addEventListener('mousemove', self.dragReorder, false);
       document.body.addEventListener('mouseup', self.stopDragReorder, false);
       return;
@@ -1176,9 +1187,14 @@ export default function (self) {
   };
   self.mouseup = function (e) {
     clearTimeout(self.scrollTimer);
+    var ctrl = e.ctrlKey || e.metaKey;
     self.cellBoundaryCrossed = true;
     self.rowBoundaryCrossed = true;
     self.columnBoundaryCrossed = true;
+    if (self.draggingItem) {
+      self.selectColumn(self.currentCell.header.index, ctrl, e.shiftKey);
+      self.draw();
+    }
     self.selecting = undefined;
     self.draggingItem = undefined;
     self.dragStartObject = undefined;

package/lib/publicMethods.js

@@ -1367,22 +1367,18 @@ export default function (self) {
   self.sorters.string = function (columnName, direction) {
     var asc = direction === 'asc';
     return function (a, b) {
-      if (a[columnName] === undefined || a[columnName] === null) {
-        return 1;
-      }
-      if (b[columnName] === undefined || b[columnName] === null) {
-        return 0;
-      }
+      const aValue = a[columnName] || '';
+      const bValue = b[columnName] || '';
       if (asc) {
-        if (!a[columnName].localeCompare) {
+        if (!aValue.localeCompare) {
           return 1;
         }
-        return a[columnName].localeCompare(b[columnName]);
+        return aValue.localeCompare(bValue);
       }
-      if (!b[columnName].localeCompare) {
+      if (!bValue.localeCompare) {
         return 1;
       }
-      return b[columnName].localeCompare(a[columnName]);
+      return bValue.localeCompare(aValue);
     };
   };
   self.sorters.number = function (columnName, direction) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvas-datagrid",
-  "version": "0.3.14",
+  "version": "0.3.18",
   "description": "Canvas based data grid web component. Capable of displaying millions of contiguous hierarchical rows and columns without paging or loading, on a single canvas element.",
   "main": "./dist/canvas-datagrid.js",
   "module": "./dist/canvas-datagrid.module.js",