Cleanup styles for editing

src/datatable.js

@@ -259,10 +259,14 @@ export default class DataTable {
       'margin-top': (this.header.height() + 1) + 'px'
     });
 
-    // hide edit cells by default
+    // center align Sr. No column
-    this.setStyle('.data-table .body-scrollable .edit-cell', {
+    if (this.options.addSerialNoColumn) {
-      display: 'none'
+      const index = this.getSerialColumnIndex();
-    });
+
+      this.setStyle(`.data-table [data-col-index="${index}"]`, {
+        'text-align': 'center'
+      });
+    }
 
     this.bodyScrollable.find('.table').css('margin', 0);
   }
@@ -296,7 +300,6 @@ export default class DataTable {
     $(document.body).on('keypress', (e) => {
       // enter keypress on focused cell
       if (e.which === 13 && this.$focusedCell && !this.$editingCell) {
-        this.log('editingCell');
         this.activateEditing(this.$focusedCell);
         e.stopImmediatePropagation();
       }
@@ -313,7 +316,9 @@ export default class DataTable {
 
     $(document.body).on('click', e => {
       if ($(e.target).is('.edit-cell, .edit-cell *')) return;
-      self.bodyScrollable.find('.edit-cell').hide();
+      if (!this.$editingCell) return;
+
+      this.$editingCell.removeClass('editing');
       this.$editingCell = null;
     });
   }
@@ -336,6 +341,8 @@ export default class DataTable {
     }
 
     this.$editingCell = $cell;
+    $cell.addClass('editing');
+
     const $editCell = $cell.find('.edit-cell').empty();
     const cell = this.getCell(rowIndex, colIndex);
     const editing = this.getEditingObject(colIndex, rowIndex, cell.content, $editCell);
@@ -344,7 +351,6 @@ export default class DataTable {
       this.currentCellEditing = editing;
       // initialize editing input with cell value
       editing.initValue(cell.content);
-      $editCell.show();
     }
   }
 
@@ -677,6 +683,12 @@ export default class DataTable {
     return this.datamanager.getRowCount();
   }
 
+  getSerialColumnIndex() {
+    const columns = this.datamanager.getColumns();
+
+    return columns.findIndex(column => column.content.includes('Sr. No'));
+  }
+
   log() {
     if (this.options.enableLogs) {
       console.log.apply(console, arguments);

src/style.scss

@@ -1,8 +1,13 @@
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/mixins";
 @import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/reboot";
 @import "~bootstrap/scss/tables";
 
+.data-table * {
+	outline: none;
+}
+
 .data-table {
 	width: 100%;
 	position: relative;
@@ -48,16 +53,43 @@
 	.content {
 		padding: 8px;
 		border: 1px solid transparent;
+
+		&.ellipsis {
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			overflow: hidden;
+		}
+	}
+
+	.edit-cell {
+		display: none;
+		position: absolute;
+		padding: 8px;
+		background: #fff;
+		z-index: 1;
+		height: 100%;
+
+		input {
+			outline: none;
+			width: 100%;
+			border: none;
+			height: 1em;
+		}
 	}
 
 	&.selected .content {
 		border: 1px solid theme-color('primary');
 	}
 
-	.content.ellipsis {
+	&.editing {
-		text-overflow: ellipsis;
+		.content {
-		white-space: nowrap;
+			display: none;
-		overflow: hidden;
+		}
+
+		.edit-cell {
+			border: 2px solid theme-color('primary');
+			display: block;
+		}
 	}
 }
 
@@ -67,24 +99,6 @@
   }
 }
 
-.edit-cell {
-	position: absolute;
-	top: -1px;
-	left: -1px;
-    background: white;
-	z-index: 1;
-
-	input {
-		outline: none;
-		padding: 8px;
-		font-size: inherit;
-		font-family: inherit;
-		width: inherit;
-		height: inherit;
-		border: 2px solid theme-color('primary');
-	}
-}
-
 .noselect {
 	-webkit-touch-callout: none;
 	-webkit-user-select: none;