Restrict column navigation

lib/frappe-datatable.js

@@ -922,6 +922,19 @@ var DataTable = function () {
     value: function getTotalRows() {
       return this.datamanager.getRowCount();
     }
+  }, {
+    key: 'getFirstColumnIndex',
+    value: function getFirstColumnIndex() {
+      if (this.options.addCheckboxColumn && this.options.addSerialNoColumn) {
+        return 2;
+      }
+
+      if (this.options.addCheckboxColumn || this.options.addSerialNoColumn) {
+        return 1;
+      }
+
+      return 0;
+    }
   }, {
     key: 'getSerialColumnIndex',
     value: function getSerialColumnIndex() {
@@ -1289,18 +1302,26 @@ var CellManager = function () {
     key: 'focusCell',
     value: function focusCell($cell) {
       if (!$cell.length) return;
-      this.deactivateEditing();
-      this.clearSelection();
 
       var _getCellAttr = this.getCellAttr($cell),
           colIndex = _getCellAttr.colIndex;
 
+      if (colIndex < this.instance.getFirstColumnIndex()) {
+        return;
+      }
+
+      this.deactivateEditing();
+      this.clearSelection();
+
       if (this.options.addCheckboxColumn && colIndex === 0) {
         return;
       }
 
+      if (this.$focusedCell) {
+        this.$focusedCell.removeClass('selected');
+      }
+
       this.$focusedCell = $cell;
-      this.bodyScrollable.find('.data-table-col').removeClass('selected');
       $cell.addClass('selected');
 
       this.highlightRowColumnHeader($cell);
@@ -1493,7 +1514,7 @@ var CellManager = function () {
   }, {
     key: 'clearSelection',
     value: function clearSelection() {
-      this.bodyScrollable.find('.data-table-col').removeClass('highlight');
+      this.bodyScrollable.find('.data-table-col.highlight').removeClass('highlight');
       this.$selectionCursor = null;
     }
   }, {

src/cellmanager.js

@@ -34,17 +34,24 @@ export default class CellManager {
 
   focusCell($cell) {
     if (!$cell.length) return;
+    const { colIndex } = this.getCellAttr($cell);
+
+    if (colIndex < this.instance.getFirstColumnIndex()) {
+      return;
+    }
+
     this.deactivateEditing();
     this.clearSelection();
 
-    const { colIndex } = this.getCellAttr($cell);
-
     if (this.options.addCheckboxColumn && colIndex === 0) {
       return;
     }
 
+    if (this.$focusedCell) {
+      this.$focusedCell.removeClass('selected');
+    }
+
     this.$focusedCell = $cell;
-    this.bodyScrollable.find('.data-table-col').removeClass('selected');
     $cell.addClass('selected');
 
     this.highlightRowColumnHeader($cell);
@@ -208,7 +215,7 @@ export default class CellManager {
   }
 
   clearSelection() {
-    this.bodyScrollable.find('.data-table-col').removeClass('highlight');
+    this.bodyScrollable.find('.data-table-col.highlight').removeClass('highlight');
     this.$selectionCursor = null;
   }
 

src/datatable.js

@@ -558,6 +558,18 @@ export default class DataTable {
     return this.datamanager.getRowCount();
   }
 
+  getFirstColumnIndex() {
+    if (this.options.addCheckboxColumn && this.options.addSerialNoColumn) {
+      return 2;
+    }
+
+    if (this.options.addCheckboxColumn || this.options.addSerialNoColumn) {
+      return 1;
+    }
+
+    return 0;
+  }
+
   getSerialColumnIndex() {
     const columns = this.datamanager.getColumns();