Merge pull request #11 from frappe/rmehta-minor-fixes

Rmehta minor fixes

lib/frappe-datatable.js

@@ -621,6 +621,10 @@ var RowManager = function () {
   }, {
     key: 'getCheckedRows',
     value: function getCheckedRows() {
+      if (!this.checkMap) {
+        return [];
+      }
+
       return this.checkMap.map(function (c, rowIndex) {
         if (c) {
           return rowIndex;
@@ -873,11 +877,6 @@ var CellManager = function () {
           _this.deactivateEditing();
         }
       });
-
-      // $.on(document.body, 'click', e => {
-      //   if (e.target.matches('.edit-cell, .edit-cell *')) return;
-      //   this.deactivateEditing();
-      // });
     }
   }, {
     key: 'bindKeyboardNav',
@@ -943,6 +942,8 @@ var CellManager = function () {
       });
 
       _keyboard2.default.on('esc', function () {
+        // keep focus on the cell so that keyboard navigation works
+        _this2.$editingCell.focus();
         _this2.deactivateEditing();
       });
     }
@@ -1052,7 +1053,7 @@ var CellManager = function () {
           colIndex = _$$data3.colIndex,
           rowIndex = _$$data3.rowIndex;
 
-      var _colIndex = this.columnmanager.getSerialColumnIndex();
+      var _colIndex = this.datamanager.getColumnIndexById('_rowIndex');
       var colHeaderSelector = '.data-table-header .data-table-col[data-col-index="' + colIndex + '"]';
       var rowHeaderSelector = '.data-table-col[data-row-index="' + rowIndex + '"][data-col-index="' + _colIndex + '"]';
 
@@ -1252,7 +1253,7 @@ var CellManager = function () {
       if (editing) {
         this.currentCellEditing = editing;
         // initialize editing input with cell value
-        editing.initValue(cell.content);
+        editing.initValue(cell.content, rowIndex, col);
       }
     }
   }, {
@@ -1300,12 +1301,14 @@ var CellManager = function () {
           rowIndex = _$$data8.rowIndex,
           colIndex = _$$data8.colIndex;
 
+      var col = this.datamanager.getColumn(colIndex);
+
       if ($cell) {
         var editing = this.currentCellEditing;
 
         if (editing) {
           var value = editing.getValue();
-          var done = editing.setValue(value);
+          var done = editing.setValue(value, rowIndex, col);
           var oldValue = this.getCell(colIndex, rowIndex).content;
 
           // update cell immediately
@@ -1508,7 +1511,7 @@ function getCellContent(column) {
   var hasDropdown = isHeader && column.dropdown !== false;
   var dropdown = hasDropdown ? '<div class="data-table-dropdown">' + (0, _columnmanager.getDropdownHTML)() + '</div>' : '';
 
-  return '\n    <div class="content ellipsis">\n      ' + (column.format ? column.format(column.content) : column.content) + '\n      ' + sortIndicator + '\n      ' + resizeColumn + '\n      ' + dropdown + '\n    </div>\n    ' + editCellHTML + '\n  ';
+  return '\n    <div class="content ellipsis">\n      ' + (!column.isHeader && column.format ? column.format(column.content) : column.content) + '\n      ' + sortIndicator + '\n      ' + resizeColumn + '\n      ' + dropdown + '\n    </div>\n    ' + editCellHTML + '\n  ';
 }
 
 function getEditCellHTML() {
@@ -1942,6 +1945,7 @@ var ColumnManager = function () {
       this.setupNaturalColumnWidth();
       this.distributeRemainingWidth();
       this.setColumnStyle();
+      this.setDefaultCellHeight();
     }
   }, {
     key: 'setHeaderStyle',
@@ -2044,10 +2048,21 @@ var ColumnManager = function () {
     }
   }, {
     key: 'setDefaultCellHeight',
-    value: function setDefaultCellHeight(height) {
+    value: function setDefaultCellHeight() {
+      if (this.__cellHeightSet) return;
+      var height = _dom2.default.style((0, _dom2.default)('.data-table-col', this.instance.datatableWrapper), 'height');
+      this.setCellHeight(height);
+      this.__cellHeightSet = true;
+    }
+  }, {
+    key: 'setCellHeight',
+    value: function setCellHeight(height) {
       this.style.setStyle('.data-table-col .content', {
         height: height + 'px'
       });
+      this.style.setStyle('.data-table-col .edit-cell', {
+        height: height + 'px'
+      });
     }
   }, {
     key: 'setColumnStyle',
@@ -2300,7 +2315,7 @@ var DataTable = function () {
     _keyboard2.default.init(this.wrapper);
 
     if (this.options.data) {
-      this.refresh(this.options.data);
+      this.refresh();
     }
   }
 
@@ -2325,6 +2340,7 @@ var DataTable = function () {
     value: function refresh(data) {
       this.datamanager.init(data);
       this.render();
+      this.setDimensions();
     }
   }, {
     key: 'destroy',
@@ -2526,17 +2542,14 @@ var DataManager = function () {
         data = this.options.data;
       }
 
-      var _data = data,
+      this.data = data;
-          columns = _data.columns,
-          rows = _data.rows;
-
 
       this.rowCount = 0;
       this.columns = [];
       this.rows = [];
 
-      this.columns = this.prepareColumns(columns);
+      this.prepareColumns();
-      this.rows = this.prepareRows(rows);
+      this.prepareRows();
 
       this.prepareNumericColumns();
     }
@@ -2545,12 +2558,14 @@ var DataManager = function () {
 
   }, {
     key: 'prepareColumns',
-    value: function prepareColumns(columns) {
+    value: function prepareColumns() {
+      var columns = this.options.columns;
       this.validateColumns(columns);
 
-      if (this.options.addSerialNoColumn && !this.hasColumn('Sr. No')) {
+      if (this.options.addSerialNoColumn && !this.hasColumnById('_rowIndex')) {
         var val = {
-          content: 'Sr. No',
+          id: '_rowIndex',
+          content: '',
           align: 'center',
           editable: false,
           resizable: false,
@@ -2561,28 +2576,27 @@ var DataManager = function () {
         columns = [val].concat(columns);
       }
 
-      if (this.options.addCheckboxColumn && !this.hasColumn('Checkbox')) {
+      if (this.options.addCheckboxColumn && !this.hasColumnById('_checkbox')) {
         var _val = {
-          content: 'Checkbox',
+          id: '_checkbox',
+          content: this.getCheckboxHTML(),
           editable: false,
           resizable: false,
           sortable: false,
           focusable: false,
-          dropdown: false,
+          dropdown: false
-          format: function format(val) {
-            return '<input type="checkbox" />';
-          }
         };
 
         columns = [_val].concat(columns);
       }
 
-      return _prepareColumns(columns);
+      this.columns = _prepareColumns(columns);
     }
   }, {
     key: 'prepareNumericColumns',
     value: function prepareNumericColumns() {
       var row0 = this.getRow(0);
+      if (!row0) return;
       this.columns = this.columns.map(function (column, i) {
 
         var cellValue = row0[i].content;
@@ -2595,32 +2609,61 @@ var DataManager = function () {
     }
   }, {
     key: 'prepareRows',
-    value: function prepareRows(rows) {
+    value: function prepareRows() {
       var _this = this;
 
-      this.validateRows(rows);
+      this.validateData(this.data);
 
-      rows = rows.map(function (row, i) {
+      this.rows = this.data.map(function (d, i) {
         var index = _this._getNextRowCount();
 
-        if (row.length < _this.columns.length) {
+        var row = [];
-          if (_this.hasColumn('Sr. No')) {
-            var val = index + 1 + '';
 
-            row = [val].concat(row);
+        if (Array.isArray(d)) {
+          // row is an array
+          if (_this.options.addCheckboxColumn) {
+            row.push(_this.getCheckboxHTML());
           }
+          if (_this.options.addSerialNoColumn) {
+            row.push(index + 1 + '');
+          }
+          row = row.concat(d);
+        } else {
+          // row is a dict
+          var _iteratorNormalCompletion = true;
+          var _didIteratorError = false;
+          var _iteratorError = undefined;
 
-          if (_this.hasColumn('Checkbox')) {
+          try {
-            var _val2 = '<input type="checkbox" />';
+            for (var _iterator = _this.columns[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+              var col = _step.value;
 
-            row = [_val2].concat(row);
+              if (col.id === '_checkbox') {
+                row.push(_this.getCheckboxHTML());
+              } else if (col.id === '_rowIndex') {
+                row.push(index + 1 + '');
+              } else {
+                row.push(col.format(d[col.id]));
+              }
+            }
+          } catch (err) {
+            _didIteratorError = true;
+            _iteratorError = err;
+          } finally {
+            try {
+              if (!_iteratorNormalCompletion && _iterator.return) {
+                _iterator.return();
+              }
+            } finally {
+              if (_didIteratorError) {
+                throw _iteratorError;
+              }
+            }
           }
         }
 
         return prepareRow(row, index);
       });
-
-      return rows;
     }
   }, {
     key: 'validateColumns',
@@ -2636,28 +2679,17 @@ var DataManager = function () {
       });
     }
   }, {
-    key: 'validateRows',
+    key: 'validateData',
-    value: function validateRows(rows) {
+    value: function validateData(data) {
-      var _this2 = this;
+      if (Array.isArray(data) && (Array.isArray(data[0]) || _typeof(data[0]) === 'object')) {
-
+        return true;
-      if (!Array.isArray(rows)) {
-        throw new DataError('`rows` must be an array');
       }
-
+      throw new DataError('`data` must be an array of arrays or objects');
-      rows.forEach(function (row, i) {
-        if (!Array.isArray(row)) {
-          throw new DataError('`row` must be an array');
-        }
-
-        if (row.length !== _this2.getColumnCount(true)) {
-          throw new DataError('Row index "' + i + '" doesn\'t match column length');
-        }
-      });
     }
   }, {
     key: 'appendRows',
     value: function appendRows(rows) {
-      this.validateRows(rows);
+      this.validateData(rows);
 
       this.rows = this.rows.concat(this.prepareRows(rows));
     }
@@ -2712,9 +2744,9 @@ var DataManager = function () {
         return 0;
       });
 
-      if (this.hasColumn('Sr. No')) {
+      if (this.hasColumnById('_rowIndex')) {
-        // update Sr. No indexes
+        // update row index
-        var srNoColIndex = this.getColumnIndex('Sr. No');
+        var srNoColIndex = this.getColumnIndexById('_rowIndex');
         this.rows = this.rows.map(function (row, index) {
           return row.map(function (cell) {
             if (cell.colIndex === srNoColIndex) {
@@ -2790,16 +2822,16 @@ var DataManager = function () {
     key: 'updateRow',
     value: function updateRow(row, rowIndex) {
       if (row.length < this.columns.length) {
-        if (this.hasColumn('Sr. No')) {
+        if (this.hasColumnById('_rowIndex')) {
           var val = rowIndex + 1 + '';
 
           row = [val].concat(row);
         }
 
-        if (this.hasColumn('Checkbox')) {
+        if (this.hasColumnById('_checkbox')) {
-          var _val3 = '<input type="checkbox" />';
+          var _val2 = '<input type="checkbox" />';
 
-          row = [_val3].concat(row);
+          row = [_val2].concat(row);
         }
       }
 
@@ -2813,7 +2845,7 @@ var DataManager = function () {
     }
   }, {
     key: 'updateCell',
-    value: function updateCell(colIndex, rowIndex, keyValPairs) {
+    value: function updateCell(colIndex, rowIndex, options) {
       var cell = void 0;
       if ((typeof colIndex === 'undefined' ? 'undefined' : _typeof(colIndex)) === 'object') {
         // cell object was passed,
@@ -2822,17 +2854,24 @@ var DataManager = function () {
         colIndex = cell.colIndex;
         rowIndex = cell.rowIndex;
         // the object passed must be merged with original cell
-        keyValPairs = cell;
+        options = cell;
       }
       cell = this.getCell(colIndex, rowIndex);
 
       // mutate object directly
-      for (var key in keyValPairs) {
+      for (var key in options) {
-        var newVal = keyValPairs[key];
+        var newVal = options[key];
         if (newVal !== undefined) {
           cell[key] = newVal;
         }
       }
+
+      // update model
+      if (!Array.isArray(this.data[rowIndex])) {
+        var col = this.getColumn(colIndex);
+        this.data[rowIndex][col.id] = options.content;
+      }
+
       return cell;
     }
   }, {
@@ -2940,6 +2979,13 @@ var DataManager = function () {
         return col.content === name;
       }));
     }
+  }, {
+    key: 'hasColumnById',
+    value: function hasColumnById(id) {
+      return Boolean(this.columns.find(function (col) {
+        return col.id === id;
+      }));
+    }
   }, {
     key: 'getColumnIndex',
     value: function getColumnIndex(name) {
@@ -2947,6 +2993,18 @@ var DataManager = function () {
         return col.content === name;
       });
     }
+  }, {
+    key: 'getColumnIndexById',
+    value: function getColumnIndexById(id) {
+      return this.columns.findIndex(function (col) {
+        return col.id === id;
+      });
+    }
+  }, {
+    key: 'getCheckboxHTML',
+    value: function getCheckboxHTML() {
+      return '<input type="checkbox" />';
+    }
   }, {
     key: 'currentSort',
     get: function get() {
@@ -2987,12 +3045,15 @@ function _prepareColumns(columns) {
     focusable: true,
     dropdown: true,
     format: function format(value) {
-      return '<span class="column-title">' + value + '</span>';
+      return value + '';
     }
   };
 
   return columns.map(prepareCell).map(function (col) {
     return Object.assign({}, baseColumn, col);
+  }).map(function (col) {
+    col.id = col.id || col.content;
+    return col;
   });
 }
 
@@ -3098,6 +3159,7 @@ var BodyRenderer = function () {
       var rows = this.datamanager.getRows();
 
       this.bodyScrollable.innerHTML = '\n      <table class="data-table-body">\n        ' + getBodyHTML(rows) + '\n      </table>\n    ';
+      this.instance.setDimensions();
     }
   }, {
     key: 'renderBodyWithClusterize',
@@ -3250,10 +3312,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = {
-  data: {
   columns: [],
-    rows: []
+  data: [],
-  },
   dropdownButton: '▼',
   headerDropdown: [{
     label: 'Sort Ascending',
@@ -3289,7 +3349,7 @@ exports.default = {
   freezeMessage: 'Loading...',
   editing: function editing() {},
   addSerialNoColumn: true,
-  addCheckboxColumn: true,
+  addCheckboxColumn: false,
   enableClusterize: true,
   enableLogs: false,
   takeAvailableSpace: false,
@@ -3332,12 +3392,12 @@ if(false) {
 /* 15 */
 /***/ (function(module, exports, __webpack_require__) {
 
-exports = module.exports = __webpack_require__(16)(undefined);
+exports = module.exports = __webpack_require__(16)(false);
 // imports
 
 
 // module
-exports.push([module.i, "/* variables */\n/* resets */\n*, *::after, *::before {\n  box-sizing: border-box; }\n\nbutton, input {\n  overflow: visible;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0; }\n\n/* styling */\n.data-table * {\n  outline: none; }\n\n.data-table {\n  width: 100%;\n  position: relative;\n  overflow: auto; }\n  .data-table table {\n    border-collapse: collapse; }\n  .data-table table td {\n    padding: 0;\n    border: 1px solid #d1d8dd; }\n  .data-table thead td {\n    border-bottom-width: 2px; }\n  .data-table .freeze-container {\n    display: flex;\n    justify-content: center;\n    align-content: center;\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    background-color: #f5f7fa;\n    opacity: 0.5;\n    font-size: 2em; }\n    .data-table .freeze-container span {\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%); }\n  .data-table .trash-container {\n    position: absolute;\n    bottom: 0;\n    left: 30%;\n    right: 30%;\n    height: 70px;\n    background: palevioletred;\n    opacity: 0.5; }\n\n.body-scrollable {\n  max-height: 500px;\n  overflow: auto;\n  border-bottom: 1px solid #d1d8dd; }\n  .body-scrollable.row-highlight-all .data-table-row:not(.row-unhighlight) {\n    background-color: #f5f7fa; }\n\n.data-table-header {\n  position: absolute;\n  top: 0;\n  left: 0;\n  background-color: white;\n  font-weight: bold; }\n  .data-table-header .content span:not(.column-resizer) {\n    cursor: pointer; }\n  .data-table-header .column-resizer {\n    display: none;\n    position: absolute;\n    right: 0;\n    top: 0;\n    width: 4px;\n    height: 100%;\n    background-color: #5292f7;\n    cursor: col-resize; }\n  .data-table-header .data-table-dropdown {\n    position: absolute;\n    right: 10px;\n    display: inline-flex;\n    vertical-align: top;\n    text-align: left; }\n    .data-table-header .data-table-dropdown.is-active .data-table-dropdown-list {\n      display: block; }\n    .data-table-header .data-table-dropdown.is-active .data-table-dropdown-toggle {\n      display: block; }\n  .data-table-header .data-table-dropdown-toggle {\n    display: none;\n    background-color: transparent;\n    border: none; }\n  .data-table-header .data-table-dropdown-list {\n    display: none;\n    font-weight: normal;\n    position: absolute;\n    min-width: 8rem;\n    top: 100%;\n    right: 0;\n    z-index: 1;\n    background-color: white;\n    border-radius: 3px;\n    box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);\n    padding-bottom: 0.5rem;\n    padding-top: 0.5rem; }\n    .data-table-header .data-table-dropdown-list > div {\n      padding: 5px 10px; }\n      .data-table-header .data-table-dropdown-list > div:hover {\n        background-color: #f5f7fa; }\n  .data-table-header .data-table-col.remove-column {\n    background-color: #FD8B8B;\n    transition: 300ms background-color ease-in-out; }\n  .data-table-header .data-table-col.sortable-chosen {\n    background-color: #f5f7fa; }\n\n.data-table-col {\n  position: relative; }\n  .data-table-col .content {\n    padding: 8px;\n    border: 2px solid transparent; }\n    .data-table-col .content.ellipsis {\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      overflow: hidden; }\n  .data-table-col .edit-cell {\n    display: none;\n    padding: 8px;\n    background: #fff;\n    z-index: 1;\n    height: 100%; }\n    .data-table-col .edit-cell input {\n      outline: none;\n      width: 100%;\n      border: none;\n      height: 1em; }\n  .data-table-col.selected .content {\n    border: 2px solid #5292f7; }\n  .data-table-col.editing .content {\n    display: none; }\n  .data-table-col.editing .edit-cell {\n    border: 2px solid #5292f7;\n    display: block; }\n  .data-table-col.highlight {\n    background-color: #f5f7fa; }\n  .data-table-col:hover .column-resizer {\n    display: inline-block; }\n  .data-table-col:hover .data-table-dropdown-toggle {\n    display: block; }\n\n.data-table-row.row-highlight {\n  background-color: #f5f7fa; }\n\n.noselect {\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  -khtml-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none; }\n\nbody.data-table-resize {\n  cursor: col-resize; }\n", ""]);
+exports.push([module.i, "/* variables */\n/* resets */\n*, *::after, *::before {\n  box-sizing: border-box; }\n\n.data-table button, .data-table input {\n  overflow: visible;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  padding: 0; }\n\n/* styling */\n.data-table * {\n  outline: none; }\n\n.data-table {\n  width: 100%;\n  position: relative;\n  overflow: auto; }\n  .data-table table {\n    border-collapse: collapse; }\n  .data-table table td {\n    padding: 0;\n    border: 1px solid #d1d8dd; }\n  .data-table thead td {\n    border-bottom-width: 1px; }\n  .data-table .freeze-container {\n    display: flex;\n    justify-content: center;\n    align-content: center;\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    background-color: #f5f7fa;\n    opacity: 0.5;\n    font-size: 2em; }\n    .data-table .freeze-container span {\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%); }\n  .data-table .trash-container {\n    position: absolute;\n    bottom: 0;\n    left: 30%;\n    right: 30%;\n    height: 70px;\n    background: palevioletred;\n    opacity: 0.5; }\n\n.body-scrollable {\n  max-height: 500px;\n  overflow: auto;\n  border-bottom: 1px solid #d1d8dd; }\n  .body-scrollable.row-highlight-all .data-table-row:not(.row-unhighlight) {\n    background-color: #f5f7fa; }\n\n.data-table-header {\n  position: absolute;\n  top: 0;\n  left: 0;\n  background-color: white;\n  font-weight: bold; }\n  .data-table-header .content span:not(.column-resizer) {\n    cursor: pointer; }\n  .data-table-header .column-resizer {\n    display: none;\n    position: absolute;\n    right: 0;\n    top: 0;\n    width: 0.25rem;\n    height: 100%;\n    background-color: #5292f7;\n    cursor: col-resize; }\n  .data-table-header .data-table-dropdown {\n    position: absolute;\n    right: 10px;\n    display: inline-flex;\n    vertical-align: top;\n    text-align: left; }\n    .data-table-header .data-table-dropdown.is-active .data-table-dropdown-list {\n      display: block; }\n    .data-table-header .data-table-dropdown.is-active .data-table-dropdown-toggle {\n      display: block; }\n  .data-table-header .data-table-dropdown-toggle {\n    display: none;\n    background-color: transparent;\n    border: none; }\n  .data-table-header .data-table-dropdown-list {\n    display: none;\n    font-weight: normal;\n    position: absolute;\n    min-width: 8rem;\n    top: 100%;\n    right: 0;\n    z-index: 1;\n    background-color: white;\n    border-radius: 3px;\n    box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);\n    padding-bottom: 0.5rem;\n    padding-top: 0.5rem; }\n    .data-table-header .data-table-dropdown-list > div {\n      padding: 0.5rem 1rem; }\n      .data-table-header .data-table-dropdown-list > div:hover {\n        background-color: #f5f7fa; }\n  .data-table-header .data-table-col.remove-column {\n    background-color: #FD8B8B;\n    transition: 300ms background-color ease-in-out; }\n  .data-table-header .data-table-col.sortable-chosen {\n    background-color: #f5f7fa; }\n\n.data-table-col {\n  position: relative; }\n  .data-table-col .content {\n    padding: 0.25rem;\n    border: 2px solid transparent; }\n    .data-table-col .content.ellipsis {\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      overflow: hidden; }\n  .data-table-col .edit-cell {\n    display: none;\n    padding: 0.25rem;\n    background: #fff;\n    z-index: 1;\n    height: 100%; }\n    .data-table-col .edit-cell input {\n      outline: none;\n      width: 100%;\n      border: none; }\n  .data-table-col.selected .content {\n    border: 2px solid #5292f7; }\n  .data-table-col.editing .content {\n    display: none; }\n  .data-table-col.editing .edit-cell {\n    border: 2px solid #FD8B8B;\n    display: block; }\n  .data-table-col.highlight {\n    background-color: #f5f7fa; }\n  .data-table-col:hover .column-resizer {\n    display: inline-block; }\n  .data-table-col:hover .data-table-dropdown-toggle {\n    display: block; }\n\n.data-table-row.row-highlight {\n  background-color: #f5f7fa; }\n\n.noselect {\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  -khtml-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none; }\n\nbody.data-table-resize {\n  cursor: col-resize; }\n", ""]);
 
 // exports
 

src/body-renderer.js

@@ -31,6 +31,7 @@ export default class BodyRenderer {
         ${getBodyHTML(rows)}
       </table>
     `;
+    this.instance.setDimensions();
   }
 
   renderBodyWithClusterize() {

src/cellmanager.js

@@ -50,11 +50,6 @@ export default class CellManager {
         this.deactivateEditing();
       }
     });
-
-    // $.on(document.body, 'click', e => {
-    //   if (e.target.matches('.edit-cell, .edit-cell *')) return;
-    //   this.deactivateEditing();
-    // });
   }
 
   bindKeyboardNav() {
@@ -110,6 +105,8 @@ export default class CellManager {
     );
 
     keyboard.on('esc', () => {
+      // keep focus on the cell so that keyboard navigation works
+      this.$editingCell.focus();
       this.deactivateEditing();
     });
   }
@@ -197,7 +194,7 @@ export default class CellManager {
 
   highlightRowColumnHeader($cell) {
     const { colIndex, rowIndex } = $.data($cell);
-    const _colIndex = this.columnmanager.getSerialColumnIndex();
+    const _colIndex = this.datamanager.getColumnIndexById('_rowIndex');
     const colHeaderSelector = `.data-table-header .data-table-col[data-col-index="${colIndex}"]`;
     const rowHeaderSelector = `.data-table-col[data-row-index="${rowIndex}"][data-col-index="${_colIndex}"]`;
 
@@ -360,7 +357,7 @@ export default class CellManager {
     if (editing) {
       this.currentCellEditing = editing;
       // initialize editing input with cell value
-      editing.initValue(cell.content);
+      editing.initValue(cell.content, rowIndex, col);
     }
   }
 
@@ -399,13 +396,14 @@ export default class CellManager {
     if (!this.$editingCell) return;
     const $cell = this.$editingCell;
     const { rowIndex, colIndex } = $.data($cell);
+    const col = this.datamanager.getColumn(colIndex);
 
     if ($cell) {
       const editing = this.currentCellEditing;
 
       if (editing) {
         const value = editing.getValue();
-        const done = editing.setValue(value);
+        const done = editing.setValue(value, rowIndex, col);
         const oldValue = this.getCell(colIndex, rowIndex).content;
 
         // update cell immediately
@@ -573,7 +571,7 @@ export function getCellContent(column) {
 
   return `
     <div class="content ellipsis">
-      ${column.format ? column.format(column.content) : column.content}
+      ${(!column.isHeader && column.format) ? column.format(column.content) : column.content}
       ${sortIndicator}
       ${resizeColumn}
       ${dropdown}

src/columnmanager.js

@@ -268,6 +268,7 @@ export default class ColumnManager {
     this.setupNaturalColumnWidth();
     this.distributeRemainingWidth();
     this.setColumnStyle();
+    this.setDefaultCellHeight();
   }
 
   setHeaderStyle() {
@@ -353,10 +354,20 @@ export default class ColumnManager {
     });
   }
 
-  setDefaultCellHeight(height) {
+  setDefaultCellHeight() {
+    if (this.__cellHeightSet) return;
+    const height = $.style($('.data-table-col', this.instance.datatableWrapper), 'height');
+    this.setCellHeight(height);
+    this.__cellHeightSet = true;
+  }
+
+  setCellHeight(height) {
     this.style.setStyle('.data-table-col .content', {
       height: height + 'px'
     });
+    this.style.setStyle('.data-table-col .edit-cell', {
+      height: height + 'px'
+    });
   }
 
   setColumnStyle() {
@@ -374,6 +385,7 @@ export default class ColumnManager {
         this.setColumnWidth(column.colIndex);
       });
     this.instance.setBodyWidth();
+
   }
 
   sortRows(colIndex, sortOrder) {

src/datamanager.js

@@ -13,14 +13,14 @@ export default class DataManager {
       data = this.options.data;
     }
 
-    let { columns, rows } = data;
+    this.data = data;
 
     this.rowCount = 0;
     this.columns = [];
     this.rows = [];
 
-    this.columns = this.prepareColumns(columns);
+    this.prepareColumns();
-    this.rows = this.prepareRows(rows);
+    this.prepareRows();
 
     this.prepareNumericColumns();
   }
@@ -34,12 +34,14 @@ export default class DataManager {
     };
   }
 
-  prepareColumns(columns) {
+  prepareColumns() {
+    let columns = this.options.columns;
     this.validateColumns(columns);
 
-    if (this.options.addSerialNoColumn && !this.hasColumn('Sr. No')) {
+    if (this.options.addSerialNoColumn && !this.hasColumnById('_rowIndex')) {
       let val = {
-        content: 'Sr. No',
+        id: '_rowIndex',
+        content: '',
         align: 'center',
         editable: false,
         resizable: false,
@@ -50,25 +52,26 @@ export default class DataManager {
       columns = [val].concat(columns);
     }
 
-    if (this.options.addCheckboxColumn && !this.hasColumn('Checkbox')) {
+    if (this.options.addCheckboxColumn && !this.hasColumnById('_checkbox')) {
       const val = {
-        content: 'Checkbox',
+        id: '_checkbox',
+        content: this.getCheckboxHTML(),
         editable: false,
         resizable: false,
         sortable: false,
         focusable: false,
-        dropdown: false,
+        dropdown: false
-        format: val => '<input type="checkbox" />'
       };
 
       columns = [val].concat(columns);
     }
 
-    return prepareColumns(columns);
+    this.columns = prepareColumns(columns);
   }
 
   prepareNumericColumns() {
     const row0 = this.getRow(0);
+    if (!row0) return;
     this.columns = this.columns.map((column, i) => {
 
       const cellValue = row0[i].content;
@@ -80,30 +83,39 @@ export default class DataManager {
     });
   }
 
-  prepareRows(rows) {
+  prepareRows() {
-    this.validateRows(rows);
+    this.validateData(this.data);
 
-    rows = rows.map((row, i) => {
+    this.rows = this.data.map((d, i) => {
       const index = this._getNextRowCount();
 
-      if (row.length < this.columns.length) {
+      let row = [];
-        if (this.hasColumn('Sr. No')) {
-          const val = (index + 1) + '';
 
-          row = [val].concat(row);
+      if (Array.isArray(d)) {
+        // row is an array
+        if (this.options.addCheckboxColumn) {
+          row.push(this.getCheckboxHTML());
         }
+        if (this.options.addSerialNoColumn) {
+          row.push((index + 1) + '');
+        }
+        row = row.concat(d);
 
-        if (this.hasColumn('Checkbox')) {
+      } else {
-          const val = '<input type="checkbox" />';
+        // row is a dict
-
+        for (let col of this.columns) {
-          row = [val].concat(row);
+          if (col.id === '_checkbox') {
+            row.push(this.getCheckboxHTML());
+          } else if (col.id === '_rowIndex') {
+            row.push((index + 1) + '');
+          } else {
+            row.push(col.format(d[col.id]));
+          }
         }
       }
 
       return prepareRow(row, index);
     });
-
-    return rows;
   }
 
   validateColumns(columns) {
@@ -118,24 +130,15 @@ export default class DataManager {
     });
   }
 
-  validateRows(rows) {
+  validateData(data) {
-    if (!Array.isArray(rows)) {
+    if (Array.isArray(data) && (Array.isArray(data[0]) || typeof data[0] === 'object')) {
-      throw new DataError('`rows` must be an array');
+      return true;
     }
-
+    throw new DataError('`data` must be an array of arrays or objects');
-    rows.forEach((row, i) => {
-      if (!Array.isArray(row)) {
-        throw new DataError('`row` must be an array');
-      }
-
-      if (row.length !== this.getColumnCount(true)) {
-        throw new DataError(`Row index "${i}" doesn't match column length`);
-      }
-    });
   }
 
   appendRows(rows) {
-    this.validateRows(rows);
+    this.validateData(rows);
 
     this.rows = this.rows.concat(this.prepareRows(rows));
   }
@@ -190,9 +193,9 @@ export default class DataManager {
       return 0;
     });
 
-    if (this.hasColumn('Sr. No')) {
+    if (this.hasColumnById('_rowIndex')) {
-      // update Sr. No indexes
+      // update row index
-      const srNoColIndex = this.getColumnIndex('Sr. No');
+      const srNoColIndex = this.getColumnIndexById('_rowIndex');
       this.rows = this.rows.map((row, index) => {
         return row.map(cell => {
           if (cell.colIndex === srNoColIndex) {
@@ -264,13 +267,13 @@ export default class DataManager {
 
   updateRow(row, rowIndex) {
     if (row.length < this.columns.length) {
-      if (this.hasColumn('Sr. No')) {
+      if (this.hasColumnById('_rowIndex')) {
         const val = (rowIndex + 1) + '';
 
         row = [val].concat(row);
       }
 
-      if (this.hasColumn('Checkbox')) {
+      if (this.hasColumnById('_checkbox')) {
         const val = '<input type="checkbox" />';
 
         row = [val].concat(row);
@@ -284,7 +287,7 @@ export default class DataManager {
     return _row;
   }
 
-  updateCell(colIndex, rowIndex, keyValPairs) {
+  updateCell(colIndex, rowIndex, options) {
     let cell;
     if (typeof colIndex === 'object') {
       // cell object was passed,
@@ -293,17 +296,24 @@ export default class DataManager {
       colIndex = cell.colIndex;
       rowIndex = cell.rowIndex;
       // the object passed must be merged with original cell
-      keyValPairs = cell;
+      options = cell;
     }
     cell = this.getCell(colIndex, rowIndex);
 
     // mutate object directly
-    for (let key in keyValPairs) {
+    for (let key in options) {
-      const newVal = keyValPairs[key];
+      const newVal = options[key];
       if (newVal !== undefined) {
         cell[key] = newVal;
       }
     }
+
+    // update model
+    if (!Array.isArray(this.data[rowIndex])) {
+      const col = this.getColumn(colIndex);
+      this.data[rowIndex][col.id] = options.content;
+    }
+
     return cell;
   }
 
@@ -392,9 +402,21 @@ export default class DataManager {
     return Boolean(this.columns.find(col => col.content === name));
   }
 
+  hasColumnById(id) {
+    return Boolean(this.columns.find(col => col.id === id));
+  }
+
   getColumnIndex(name) {
     return this.columns.findIndex(col => col.content === name);
   }
+
+  getColumnIndexById(id) {
+    return this.columns.findIndex(col => col.id === id);
+  }
+
+  getCheckboxHTML() {
+    return '<input type="checkbox" />';
+  }
 }
 
 function prepareRow(row, i) {
@@ -415,12 +437,16 @@ function prepareColumns(columns, props = {}) {
     resizable: true,
     focusable: true,
     dropdown: true,
-    format: value => `<span class="column-title">${value}</span>`
+    format: value => value + ''
   };
 
   return columns
     .map(prepareCell)
-    .map(col => Object.assign({}, baseColumn, col));
+    .map(col => Object.assign({}, baseColumn, col))
+    .map(col => {
+      col.id = col.id || col.content;
+      return col;
+    });
 }
 
 function prepareCell(col, i) {

src/datatable.js

@@ -44,7 +44,7 @@ class DataTable {
     keyboard.init(this.wrapper);
 
     if (this.options.data) {
-      this.refresh(this.options.data);
+      this.refresh();
     }
   }
 
@@ -77,6 +77,7 @@ class DataTable {
   refresh(data) {
     this.datamanager.init(data);
     this.render();
+    this.setDimensions();
   }
 
   destroy() {

src/defaults.js

@@ -1,8 +1,6 @@
 export default {
-  data: {
   columns: [],
-    rows: []
+  data: [],
-  },
   dropdownButton: '▼',
   headerDropdown: [
     {
@@ -43,7 +41,7 @@ export default {
   freezeMessage: 'Loading...',
   editing: () => {},
   addSerialNoColumn: true,
-  addCheckboxColumn: true,
+  addCheckboxColumn: false,
   enableClusterize: true,
   enableLogs: false,
   takeAvailableSpace: false,

src/rowmanager.js

@@ -58,6 +58,10 @@ export default class RowManager {
   }
 
   getCheckedRows() {
+    if (!this.checkMap) {
+      return [];
+    }
+
     return this.checkMap
       .map((c, rowIndex) => {
         if (c) {

src/style.scss

@@ -5,17 +5,22 @@ $primary-color: rgb(82, 146, 247);
 $light-bg: #f5f7fa;
 $light-red: #FD8B8B;
 
+$spacer-1: 0.25rem;
+$spacer-2: 0.5rem;
+$spacer-3: 1rem;
+
 /* resets */
 *, *::after, *::before {
 	box-sizing: border-box;
 }
 
-button, input {
+.data-table button, .data-table input {
 	overflow: visible;
 	font-family: inherit;
 	font-size: inherit;
 	line-height: inherit;
 	margin: 0;
+	padding: 0;
 }
 
 /* styling */
@@ -39,7 +44,7 @@ button, input {
 	}
 
 	thead td {
-		border-bottom-width: 2px;
+		border-bottom-width: 1px;
 	}
 
 	.freeze-container {
@@ -99,7 +104,7 @@ button, input {
 		position: absolute;
 		right: 0;
 		top: 0;
-		width: 4px;
+		width: $spacer-1;
 		height: 100%;
 		background-color: $primary-color;
 		cursor: col-resize;
@@ -141,11 +146,11 @@ button, input {
 		background-color: white;
 		border-radius: 3px;
 		box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
-		padding-bottom: 0.5rem;
+		padding-bottom: $spacer-2;
-		padding-top: 0.5rem;
+		padding-top: $spacer-2;
 
 		&> div {
-			padding: 5px 10px;
+			padding: $spacer-2 $spacer-3;
 
 			&:hover {
 				background-color: $light-bg;
@@ -167,7 +172,7 @@ button, input {
 	position: relative;
 
 	.content {
-		padding: 8px;
+		padding: $spacer-1;
 		border: 2px solid transparent;
 
 		&.ellipsis {
@@ -180,7 +185,7 @@ button, input {
 	.edit-cell {
 		display: none;
 		// position: absolute;
-		padding: 8px;
+		padding: $spacer-1;
 		background: #fff;
 		z-index: 1;
 		height: 100%;
@@ -189,7 +194,6 @@ button, input {
 			outline: none;
 			width: 100%;
 			border: none;
-			height: 1em;
 		}
 	}
 
@@ -203,7 +207,7 @@ button, input {
 		}
 
 		.edit-cell {
-			border: 2px solid $primary-color;
+			border: 2px solid $light-red;
 			display: block;
 		}
 	}

test/datamanager.spec.js

@@ -50,13 +50,6 @@ describe.only('DataManager instance', () => {
       })).to.throw(DataError, '`rows` must be an array');
     });
 
-    it('should throw when any of the row is not an Array', () => {
-      expect(() => datamanager.init({
-        columns: ['Name'],
-        rows: [2]
-      })).to.throw(DataError, '`row` must be an array');
-    });
-
     it('should throw when any of the row\'s length doesn\'t match column length', () => {
       expect(() => datamanager.init({
         columns: ['Name'],