More flexible editing options

index.html

@@ -507,7 +507,12 @@
 				wrapper: document.querySelector('section'),
 				addSerialNoColumn: true,
 				enableClusterize: true,
-				data
+				data,
+				editing: {
+					getInput() {
+						return $('<input type="text" style="background: yellow;" />').get(0)
+					}
+				}
 			});
 			performance.mark("ReGrid-end");
 

lib/ReGrid.js

@@ -120,6 +120,7 @@ var ReGrid = function () {
     var wrapper = _ref.wrapper,
         events = _ref.events,
         data = _ref.data,
+        editing = _ref.editing,
         addSerialNoColumn = _ref.addSerialNoColumn,
         enableClusterize = _ref.enableClusterize,
         enableLogs = _ref.enableLogs;
@@ -135,6 +136,7 @@ var ReGrid = function () {
     this.addSerialNoColumn = (0, _utils.getDefault)(addSerialNoColumn, false);
     this.enableClusterize = (0, _utils.getDefault)(enableClusterize, false);
     this.enableLogs = (0, _utils.getDefault)(enableLogs, true);
+    this.editing = (0, _utils.getDefault)(editing, {});
 
     if (data) {
       this.refresh(data);
@@ -290,6 +292,8 @@ var ReGrid = function () {
   }, {
     key: 'prepareData',
     value: function prepareData(data) {
+      // cache original data passed
+      this._data = data;
       var columns = data.columns,
           rows = data.rows;
 
@@ -317,18 +321,6 @@ var ReGrid = function () {
         rows: _rows
       };
     }
-  }, {
-    key: 'prepareColumns',
-    value: function prepareColumns(columns) {
-      return columns.map(function (col, i) {
-        col.colIndex = i;
-        col.isHeader = 1;
-        col.format = function (val) {
-          return '<span>' + val + '</span>';
-        };
-        return col;
-      });
-    }
   }, {
     key: 'bindEvents',
     value: function bindEvents() {
@@ -408,9 +400,7 @@ var ReGrid = function () {
       var _this2 = this;
 
       var self = this;
-      var $editPopup = this.wrapper.find('.edit-popup');
 
-      $editPopup.hide();
       this.$editingCell = null;
       // if (!self.events.onCellEdit) return;
 
@@ -433,15 +423,30 @@ var ReGrid = function () {
   }, {
     key: 'activateEditing',
     value: function activateEditing($cell) {
-      var rowIndex = $cell.attr('data-row-index');
+      var _getCellAttr = this.getCellAttr($cell),
-      var colIndex = $cell.attr('data-col-index');
+          rowIndex = _getCellAttr.rowIndex,
-      var $editCell = $cell.find('.edit-cell');
+          colIndex = _getCellAttr.colIndex;
-      var cell = this.getCell(rowIndex, colIndex);
+
+      if (this.$editingCell) {
+        var _getCellAttr2 = this.getCellAttr(this.$editingCell),
+            _rowIndex = _getCellAttr2._rowIndex,
+            _colIndex = _getCellAttr2._colIndex;
+
+        if (rowIndex === _rowIndex && colIndex === _colIndex) {
+          // editing the same cell
+          return;
+        }
+      }
 
       this.$editingCell = $cell;
-      $editCell.find('input').val(cell.content);
+      var $editCell = $cell.find('.edit-cell').empty();
-      $editCell.show();
+      var cell = this.getCell(rowIndex, colIndex);
-      $editCell.find('input').select();
+
+      var render = this.renderEditingInput(colIndex, cell.content, $editCell);
+
+      if (render) {
+        $editCell.show();
+      }
 
       // showing the popup is the responsibility of event handler
       // self.events.onCellEdit(
@@ -451,6 +456,20 @@ var ReGrid = function () {
       //   colIndex
       // );
     }
+  }, {
+    key: 'renderEditingInput',
+    value: function renderEditingInput(colIndex, value, parent) {
+      if (this.editing.renderInput) {
+        return this.editing.renderInput(colIndex, value, parent);
+      }
+      // render fallback
+      var $input = $('<input type="text" />');
+
+      parent.append($input);
+      $input.val(value);
+      $input.select();
+      return true;
+    }
   }, {
     key: 'bindResizeColumn',
     value: function bindResizeColumn() {
@@ -730,7 +749,7 @@ function makeDataAttributeString(props) {
 }
 
 function getEditCellHTML() {
-  return '\n    <div class="edit-cell">\n      <input type="text" />\n    </div>\n  ';
+  return '\n    <div class="edit-cell"></div>\n  ';
 }
 
 function getColumnHTML(column) {

src/regrid.js

@@ -19,6 +19,7 @@ export default class ReGrid {
     wrapper,
     events,
     data,
+    editing,
     addSerialNoColumn,
     enableClusterize,
     enableLogs
@@ -32,6 +33,7 @@ export default class ReGrid {
     this.addSerialNoColumn = getDefault(addSerialNoColumn, false);
     this.enableClusterize = getDefault(enableClusterize, false);
     this.enableLogs = getDefault(enableLogs, true);
+    this.editing = getDefault(editing, {});
 
     if (data) {
       this.refresh(data);
@@ -187,6 +189,8 @@ export default class ReGrid {
   }
 
   prepareData(data) {
+    // cache original data passed
+    this._data = data;
     let { columns, rows } = data;
 
     if (this.addSerialNoColumn) {
@@ -213,15 +217,6 @@ export default class ReGrid {
     };
   }
 
-  prepareColumns(columns) {
-    return columns.map((col, i) => {
-      col.colIndex = i;
-      col.isHeader = 1;
-      col.format = val => `<span>${val}</span>`;
-      return col;
-    });
-  }
-
   bindEvents() {
     this.bindFocusCell();
     this.bindEditCell();
@@ -292,9 +287,7 @@ export default class ReGrid {
 
   bindEditCell() {
     const self = this;
-    const $editPopup = this.wrapper.find('.edit-popup');
 
-    $editPopup.hide();
     this.$editingCell = null;
     // if (!self.events.onCellEdit) return;
 
@@ -316,15 +309,26 @@ export default class ReGrid {
   }
 
   activateEditing($cell) {
-    const rowIndex = $cell.attr('data-row-index');
+    const { rowIndex, colIndex } = this.getCellAttr($cell);
-    const colIndex = $cell.attr('data-col-index');
+
-    const $editCell = $cell.find('.edit-cell');
+    if (this.$editingCell) {
-    const cell = this.getCell(rowIndex, colIndex);
+      const { _rowIndex, _colIndex } = this.getCellAttr(this.$editingCell);
+
+      if (rowIndex === _rowIndex && colIndex === _colIndex) {
+        // editing the same cell
+        return;
+      }
+    }
 
     this.$editingCell = $cell;
-    $editCell.find('input').val(cell.content);
+    const $editCell = $cell.find('.edit-cell').empty();
-    $editCell.show();
+    const cell = this.getCell(rowIndex, colIndex);
-    $editCell.find('input').select();
+
+    const render = this.renderEditingInput(colIndex, cell.content, $editCell);
+
+    if (render) {
+      $editCell.show();
+    }
 
     // showing the popup is the responsibility of event handler
     // self.events.onCellEdit(
@@ -335,6 +339,19 @@ export default class ReGrid {
     // );
   }
 
+  renderEditingInput(colIndex, value, parent) {
+    if (this.editing.renderInput) {
+      return this.editing.renderInput(colIndex, value, parent);
+    }
+    // render fallback
+    const $input = $('<input type="text" />');
+
+    parent.append($input);
+    $input.val(value);
+    $input.select();
+    return true;
+  }
+
   bindResizeColumn() {
     const self = this;
     let isDragging = false;

src/utils.js

@@ -19,9 +19,7 @@ function makeDataAttributeString(props) {
 
 function getEditCellHTML() {
   return `
-    <div class="edit-cell">
+    <div class="edit-cell"></div>
-      <input type="text" />
-    </div>
   `;
 }