accept dict as data

lib/frappe-datatable.js

@@ -878,6 +878,14 @@ var CellManager = function () {
         }
       });
 
+      _dom2.default.on(this.bodyScrollable, 'blur', 'input', function (e, input) {
+        var cell = input.closest('.data-table-col');
+        if (_this.$editingCell === cell) {
+          _this.submitEditing();
+          _this.deactivateEditing();
+        }
+      });
+
       // $.on(document.body, 'click', e => {
       //   if (e.target.matches('.edit-cell, .edit-cell *')) return;
       //   this.deactivateEditing();
@@ -1256,7 +1264,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);
       }
     }
   }, {
@@ -1304,12 +1312,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
@@ -1512,7 +1522,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() {
@@ -2308,7 +2318,7 @@ var DataTable = function () {
     _keyboard2.default.init(this.wrapper);
 
     if (this.options.data) {
-      this.refresh(this.options.data);
+      this.refresh();
     }
   }
 
@@ -2535,17 +2545,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();
     }
@@ -2554,7 +2561,8 @@ 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.hasColumnById('_rowIndex')) {
@@ -2588,7 +2596,7 @@ var DataManager = function () {
         columns = [_val].concat(columns);
       }
 
-      return _prepareColumns(columns);
+      this.columns = _prepareColumns(columns);
     }
   }, {
     key: 'prepareNumericColumns',
@@ -2607,32 +2615,62 @@ var DataManager = function () {
     }
   }, {
     key: 'prepareRows',
-    value: function prepareRows(rows) {
+    value: function prepareRows() {
       var _this = this;
 
-      this.validateRows(rows);
+      this.validateRows(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.hasColumnById('_rowIndex')) {
-            var val = index + 1 + '';
 
-            row = [val].concat(row);
+        if (Array.isArray(d)) {
+          // row is an array
+          if (_this.options.addSerialNoColumn) {
+            row.push(index + 1 + '');
           }
 
-          if (_this.hasColumnById('_checkbox')) {
+          if (_this.options.addCheckboxColumn) {
-            var _val2 = '<input type="checkbox" />';
+            row.push(_this.getCheckboxHTML());
+          }
+          row = row.concat(d);
+        } else {
+          // row is a dict
+          var _iteratorNormalCompletion = true;
+          var _didIteratorError = false;
+          var _iteratorError = undefined;
 
-            row = [_val2].concat(row);
+          try {
+            for (var _iterator = _this.columns[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+              var col = _step.value;
+
+              if (col.id === '_rowIndex') {
+                row.push(index + 1 + '');
+              } else if (col.id === '_checkbox') {
+                row.push(_this.getCheckboxHTML());
+              } 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',
@@ -2650,21 +2688,9 @@ var DataManager = function () {
   }, {
     key: 'validateRows',
     value: function validateRows(rows) {
-      var _this2 = this;
-
       if (!Array.isArray(rows)) {
         throw new DataError('`rows` must be an array');
       }
-
-      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',
@@ -2809,9 +2835,9 @@ var DataManager = function () {
         }
 
         if (this.hasColumnById('_checkbox')) {
-          var _val3 = '<input type="checkbox" />';
+          var _val2 = '<input type="checkbox" />';
 
-          row = [_val3].concat(row);
+          row = [_val2].concat(row);
         }
       }
 
@@ -2825,7 +2851,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,
@@ -2834,17 +2860,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;
     }
   }, {
@@ -2973,6 +3006,11 @@ var DataManager = function () {
         return col.id === id;
       });
     }
+  }, {
+    key: 'getCheckboxHTML',
+    value: function getCheckboxHTML() {
+      return '<input type="checkbox" />';
+    }
   }, {
     key: 'currentSort',
     get: function get() {
@@ -3013,7 +3051,7 @@ function _prepareColumns(columns) {
     focusable: true,
     dropdown: true,
     format: function format(value) {
-      return '<span class="column-title">' + value + '</span>';
+      return value + '';
     }
   };
 
@@ -3277,10 +3315,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = {
-  data: {
+  columns: [],
-    columns: [],
+  data: [],
-    rows: []
-  },
   dropdownButton: '▼',
   headerDropdown: [{
     label: 'Sort Ascending',

src/cellmanager.js

@@ -51,6 +51,14 @@ export default class CellManager {
       }
     });
 
+    $.on(this.bodyScrollable, 'blur', 'input', (e, input) => {
+      const cell = input.closest('.data-table-col');
+      if (this.$editingCell === cell) {
+        this.submitEditing();
+        this.deactivateEditing();
+      }
+    });
+
     // $.on(document.body, 'click', e => {
     //   if (e.target.matches('.edit-cell, .edit-cell *')) return;
     //   this.deactivateEditing();
@@ -360,7 +368,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 +407,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 +582,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/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,7 +34,8 @@ export default class DataManager {
     };
   }
 
-  prepareColumns(columns) {
+  prepareColumns() {
+    let columns = this.options.columns;
     this.validateColumns(columns);
 
     if (this.options.addSerialNoColumn && !this.hasColumnById('_rowIndex')) {
@@ -66,7 +67,7 @@ export default class DataManager {
       columns = [val].concat(columns);
     }
 
-    return prepareColumns(columns);
+    this.columns = prepareColumns(columns);
   }
 
   prepareNumericColumns() {
@@ -83,30 +84,40 @@ export default class DataManager {
     });
   }
 
-  prepareRows(rows) {
+  prepareRows() {
-    this.validateRows(rows);
+    this.validateRows(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.hasColumnById('_rowIndex')) {
-          const val = (index + 1) + '';
 
-          row = [val].concat(row);
+      if (Array.isArray(d)) {
+        // row is an array
+        if (this.options.addSerialNoColumn) {
+          row.push((index + 1) + '');
         }
 
-        if (this.hasColumnById('_checkbox')) {
+        if (this.options.addCheckboxColumn) {
-          const val = '<input type="checkbox" />';
+          row.push(this.getCheckboxHTML());
+        }
+        row = row.concat(d);
 
-          row = [val].concat(row);
+      } else {
+        // row is a dict
+        for (let col of this.columns) {
+          if (col.id === '_rowIndex') {
+            row.push((index + 1) + '');
+          } else if (col.id === '_checkbox') {
+            row.push(this.getCheckboxHTML());
+          } else {
+            row.push(col.format(d[col.id]));
+          }
         }
       }
 
       return prepareRow(row, index);
     });
-
-    return rows;
   }
 
   validateColumns(columns) {
@@ -125,16 +136,6 @@ export default class DataManager {
     if (!Array.isArray(rows)) {
       throw new DataError('`rows` must be an array');
     }
-
-    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) {
@@ -287,7 +288,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,
@@ -296,17 +297,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;
   }
 
@@ -406,6 +414,10 @@ export default class DataManager {
   getColumnIndexById(id) {
     return this.columns.findIndex(col => col.id === id);
   }
+
+  getCheckboxHTML() {
+    return '<input type="checkbox" />';
+  }
 }
 
 function prepareRow(row, i) {
@@ -426,7 +438,7 @@ function prepareColumns(columns, props = {}) {
     resizable: true,
     focusable: true,
     dropdown: true,
-    format: value => `<span class="column-title">${value}</span>`
+    format: value => value + ''
   };
 
   return columns

src/datatable.js

@@ -44,7 +44,7 @@ class DataTable {
     keyboard.init(this.wrapper);
 
     if (this.options.data) {
-      this.refresh(this.options.data);
+      this.refresh();
     }
   }
 

src/defaults.js

@@ -1,8 +1,6 @@
 export default {
-  data: {
+  columns: [],
-    columns: [],
+  data: [],
-    rows: []
-  },
   dropdownButton: '▼',
   headerDropdown: [
     {

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'],