wip

lib/frappe-datatable.js

@@ -1231,7 +1231,7 @@ var CellManager = function () {
           colIndex = _$$data6.colIndex;
 
       var col = this.columnmanager.getColumn(colIndex);
-      if (col && col.editable === false) {
+      if (col && (col.editable === false || col.focusable === false)) {
         return;
       }
 
@@ -1375,7 +1375,9 @@ var CellManager = function () {
   }, {
     key: 'updateCell',
     value: function updateCell(colIndex, rowIndex, value) {
-      var cell = this.datamanager.updateCell(colIndex, rowIndex, value);
+      var cell = this.datamanager.updateCell(colIndex, rowIndex, {
+        content: value
+      });
       this.refreshCell(cell);
     }
   }, {
@@ -1921,6 +1923,9 @@ var ColumnManager = function () {
         if (!_this9.minWidthMap[colIndex]) {
           // only set this once
           _this9.minWidthMap[colIndex] = width;
+          _this9.datamanager.updateColumn(colIndex, {
+            minWidth: width
+          });
         }
       });
     }
@@ -1943,6 +1948,7 @@ var ColumnManager = function () {
         if (width < minWidth) {
           width = minWidth;
         }
+        _this10.datamanager.updateColumn(colIndex, { width: width });
         _this10.setColumnWidth(colIndex, width);
         _this10.setDefaultCellHeight(height);
       });
@@ -1972,6 +1978,7 @@ var ColumnManager = function () {
         var width = _dom2.default.style(_this11.getColumnHeaderElement(col.colIndex), 'width');
         var finalWidth = Math.min(width + deltaWidth) - 2;
 
+        _this11.datamanager.updateColumn(col.colIndex, { width: finalWidth });
         _this11.setColumnHeaderWidth(col.colIndex, finalWidth);
         _this11.setColumnWidth(col.colIndex, finalWidth);
       });
@@ -2128,7 +2135,7 @@ var _datatable = __webpack_require__(6);
 
 var _datatable2 = _interopRequireDefault(_datatable);
 
-var _package = __webpack_require__(18);
+var _package = __webpack_require__(19);
 
 var _package2 = _interopRequireDefault(_package);
 
@@ -2180,58 +2187,16 @@ var _style = __webpack_require__(12);
 
 var _style2 = _interopRequireDefault(_style);
 
-__webpack_require__(13);
+var _defaults = __webpack_require__(13);
+
+var _defaults2 = _interopRequireDefault(_defaults);
+
+__webpack_require__(14);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-var DEFAULT_OPTIONS = {
-  data: {
-    columns: [],
-    rows: []
-  },
-  dropdownButton: '▼',
-  headerDropdown: [{
-    label: 'Sort Ascending',
-    action: function action(column) {
-      this.sortColumn(column.colIndex, 'asc');
-    }
-  }, {
-    label: 'Sort Descending',
-    action: function action(column) {
-      this.sortColumn(column.colIndex, 'desc');
-    }
-  }, {
-    label: 'Reset sorting',
-    action: function action(column) {
-      this.sortColumn(column.colIndex, 'none');
-    }
-  }, {
-    label: 'Remove column',
-    action: function action(column) {
-      this.removeColumn(column.colIndex);
-    }
-  }],
-  events: {
-    onRemoveColumn: function onRemoveColumn(column) {},
-    onSwitchColumn: function onSwitchColumn(column1, column2) {},
-    onSortColumn: function onSortColumn(column) {}
-  },
-  sortIndicator: {
-    asc: '↑',
-    desc: '↓',
-    none: ''
-  },
-  freezeMessage: 'Loading...',
-  editing: null,
-  addSerialNoColumn: true,
-  addCheckboxColumn: true,
-  enableClusterize: true,
-  enableLogs: false,
-  takeAvailableSpace: false
-};
-
 var DataTable = function () {
   function DataTable(wrapper, options) {
     _classCallCheck(this, DataTable);
@@ -2247,10 +2212,10 @@ var DataTable = function () {
       throw new Error('Invalid argument given for `wrapper`');
     }
 
-    this.options = Object.assign({}, DEFAULT_OPTIONS, options);
+    this.options = Object.assign({}, _defaults2.default, options);
-    this.options.headerDropdown = DEFAULT_OPTIONS.headerDropdown.concat(options.headerDropdown || []);
+    this.options.headerDropdown = _defaults2.default.headerDropdown.concat(options.headerDropdown || []);
     // custom user events
-    this.events = Object.assign({}, DEFAULT_OPTIONS.events, options.events || {});
+    this.events = Object.assign({}, _defaults2.default.events, options.events || {});
     this.fireEvent = this.fireEvent.bind(this);
 
     this.prepare();
@@ -2763,19 +2728,40 @@ var DataManager = function () {
     }
   }, {
     key: 'updateCell',
-    value: function updateCell(colIndex, rowIndex, value) {
+    value: function updateCell(colIndex, rowIndex, keyValPairs) {
       var cell = void 0;
       if ((typeof colIndex === 'undefined' ? 'undefined' : _typeof(colIndex)) === 'object') {
-        // cell object was passed
+        // cell object was passed,
+        // must have colIndex, rowIndex
         cell = colIndex;
         colIndex = cell.colIndex;
         rowIndex = cell.rowIndex;
-        value = cell.content;
+        // the object passed must be merged with original cell
+        keyValPairs = cell;
       }
       cell = this.getCell(colIndex, rowIndex);
-      cell.content = value;
+
+      // mutate object directly
+      for (var key in keyValPairs) {
+        var newVal = keyValPairs[key];
+        if (newVal !== undefined) {
+          cell[key] = newVal;
+        }
+      }
       return cell;
     }
+  }, {
+    key: 'updateColumn',
+    value: function updateColumn(colIndex, keyValPairs) {
+      var column = this.getColumn(colIndex);
+      for (var key in keyValPairs) {
+        var newVal = keyValPairs[key];
+        if (newVal !== undefined) {
+          column[key] = newVal;
+        }
+      }
+      return column;
+    }
   }, {
     key: 'getRowCount',
     value: function getRowCount() {
@@ -3121,11 +3107,12 @@ var BodyRenderer = function () {
           }
         }
       });
+
       this.appendRemainingData();
       // setDimensions will work only if there is atleast one row appended
       // so we call it as soon as the first Page is appended
       this.firstPagePromise.then(function () {
-        return _this.instance.setDimensions();
+        _this.instance.setDimensions();
       });
     }
   }, {
@@ -3267,10 +3254,67 @@ module.exports = exports['default'];
 /* 13 */
 /***/ (function(module, exports, __webpack_require__) {
 
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = {
+  data: {
+    columns: [],
+    rows: []
+  },
+  dropdownButton: '▼',
+  headerDropdown: [{
+    label: 'Sort Ascending',
+    action: function action(column) {
+      this.sortColumn(column.colIndex, 'asc');
+    }
+  }, {
+    label: 'Sort Descending',
+    action: function action(column) {
+      this.sortColumn(column.colIndex, 'desc');
+    }
+  }, {
+    label: 'Reset sorting',
+    action: function action(column) {
+      this.sortColumn(column.colIndex, 'none');
+    }
+  }, {
+    label: 'Remove column',
+    action: function action(column) {
+      this.removeColumn(column.colIndex);
+    }
+  }],
+  events: {
+    onRemoveColumn: function onRemoveColumn(column) {},
+    onSwitchColumn: function onSwitchColumn(column1, column2) {},
+    onSortColumn: function onSortColumn(column) {}
+  },
+  sortIndicator: {
+    asc: '↑',
+    desc: '↓',
+    none: ''
+  },
+  freezeMessage: 'Loading...',
+  editing: null,
+  addSerialNoColumn: true,
+  addCheckboxColumn: true,
+  enableClusterize: true,
+  enableLogs: false,
+  takeAvailableSpace: false
+};
+module.exports = exports['default'];
+
+/***/ }),
+/* 14 */
+/***/ (function(module, exports, __webpack_require__) {
+
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(14);
+var content = __webpack_require__(15);
 if(typeof content === 'string') content = [[module.i, content, '']];
 // Prepare cssTransformation
 var transform;
@@ -3278,7 +3322,7 @@ var transform;
 var options = {}
 options.transform = transform
 // add the styles to the DOM
-var update = __webpack_require__(16)(content, options);
+var update = __webpack_require__(17)(content, options);
 if(content.locals) module.exports = content.locals;
 // Hot Module Replacement
 if(false) {
@@ -3295,10 +3339,10 @@ if(false) {
 }
 
 /***/ }),
-/* 14 */
+/* 15 */
 /***/ (function(module, exports, __webpack_require__) {
 
-exports = module.exports = __webpack_require__(15)(undefined);
+exports = module.exports = __webpack_require__(16)(undefined);
 // imports
 
 
@@ -3309,7 +3353,7 @@ exports.push([module.i, "/* variables */\n/* resets */\n*, *::after, *::before {
 
 
 /***/ }),
-/* 15 */
+/* 16 */
 /***/ (function(module, exports) {
 
 /*
@@ -3391,7 +3435,7 @@ function toComment(sourceMap) {
 
 
 /***/ }),
-/* 16 */
+/* 17 */
 /***/ (function(module, exports, __webpack_require__) {
 
 /*
@@ -3437,7 +3481,7 @@ var singleton = null;
 var	singletonCounter = 0;
 var	stylesInsertedAtTop = [];
 
-var	fixUrls = __webpack_require__(17);
+var	fixUrls = __webpack_require__(18);
 
 module.exports = function(list, options) {
 	if (typeof DEBUG !== "undefined" && DEBUG) {
@@ -3750,7 +3794,7 @@ function updateLink (link, options, obj) {
 
 
 /***/ }),
-/* 17 */
+/* 18 */
 /***/ (function(module, exports) {
 
 
@@ -3845,7 +3889,7 @@ module.exports = function (css) {
 
 
 /***/ }),
-/* 18 */
+/* 19 */
 /***/ (function(module, exports) {
 
 module.exports = {"name":"frappe-datatable","version":"0.0.1","description":"A modern datatable library for the web","main":"lib/frappe-datatable.js","scripts":{"build":"webpack --env build","dev":"webpack --progress --colors --watch --env dev","test":"mocha --compilers js:babel-core/register --colors ./test/*.spec.js","test:watch":"mocha --compilers js:babel-core/register --colors -w ./test/*.spec.js"},"devDependencies":{"babel-cli":"6.24.1","babel-core":"6.24.1","babel-eslint":"7.2.3","babel-loader":"7.0.0","babel-plugin-add-module-exports":"0.2.1","babel-plugin-transform-builtin-extend":"^1.1.2","babel-preset-env":"^1.6.1","chai":"3.5.0","css-loader":"^0.28.7","eslint":"3.19.0","eslint-loader":"1.7.1","mocha":"3.3.0","node-sass":"^4.5.3","sass-loader":"^6.0.6","style-loader":"^0.18.2","webpack":"^3.1.0","yargs":"7.1.0"},"repository":{"type":"git","url":"https://github.com/frappe/datatable.git"},"keywords":["webpack","es6","starter","library","universal","umd","commonjs"],"author":"Faris Ansari","license":"MIT","bugs":{"url":"https://github.com/frappe/datatable/issues"},"homepage":"https://frappe.github.io/datatable","dependencies":{"clusterize.js":"^0.18.0","sortablejs":"^1.7.0"}}

src/body-renderer.js

@@ -56,10 +56,13 @@ export default class BodyRenderer {
         }
       }
     });
+
     this.appendRemainingData();
     // setDimensions will work only if there is atleast one row appended
     // so we call it as soon as the first Page is appended
-    this.firstPagePromise.then(() => this.instance.setDimensions());
+    this.firstPagePromise.then(() => {
+      this.instance.setDimensions();
+    });
   }
 
   appendRemainingData() {

src/cellmanager.js

@@ -334,7 +334,7 @@ export default class CellManager {
     const { rowIndex, colIndex } = $.data($cell);
 
     const col = this.columnmanager.getColumn(colIndex);
-    if (col && col.editable === false) {
+    if (col && (col.editable === false || col.focusable === false)) {
       return;
     }
 
@@ -458,7 +458,9 @@ export default class CellManager {
   }
 
   updateCell(colIndex, rowIndex, value) {
-    const cell = this.datamanager.updateCell(colIndex, rowIndex, value);
+    const cell = this.datamanager.updateCell(colIndex, rowIndex, {
+      content: value
+    });
     this.refreshCell(cell);
   }
 

src/columnmanager.js

@@ -318,6 +318,9 @@ export default class ColumnManager {
       if (!this.minWidthMap[colIndex]) {
         // only set this once
         this.minWidthMap[colIndex] = width;
+        this.datamanager.updateColumn(colIndex, {
+          minWidth: width
+        });
       }
     });
   }
@@ -334,6 +337,7 @@ export default class ColumnManager {
       if (width < minWidth) {
         width = minWidth;
       }
+      this.datamanager.updateColumn(colIndex, { width });
       this.setColumnWidth(colIndex, width);
       this.setDefaultCellHeight(height);
     });
@@ -360,6 +364,7 @@ export default class ColumnManager {
       const width = $.style(this.getColumnHeaderElement(col.colIndex), 'width');
       let finalWidth = Math.min(width + deltaWidth) - 2;
 
+      this.datamanager.updateColumn(col.colIndex, { width: finalWidth });
       this.setColumnHeaderWidth(col.colIndex, finalWidth);
       this.setColumnWidth(col.colIndex, finalWidth);
     });

src/datamanager.js

@@ -271,20 +271,40 @@ export default class DataManager {
     return _row;
   }
 
-  updateCell(colIndex, rowIndex, value) {
+  updateCell(colIndex, rowIndex, keyValPairs) {
     let cell;
     if (typeof colIndex === 'object') {
-      // cell object was passed
+      // cell object was passed,
+      // must have colIndex, rowIndex
       cell = colIndex;
       colIndex = cell.colIndex;
       rowIndex = cell.rowIndex;
-      value = cell.content;
+      // the object passed must be merged with original cell
+      keyValPairs = cell;
     }
     cell = this.getCell(colIndex, rowIndex);
-    cell.content = value;
+
+    // mutate object directly
+    for (let key in keyValPairs) {
+      const newVal = keyValPairs[key];
+      if (newVal !== undefined) {
+        cell[key] = newVal;
+      }
+    }
     return cell;
   }
 
+  updateColumn(colIndex, keyValPairs) {
+    const column = this.getColumn(colIndex);
+    for (let key in keyValPairs) {
+      const newVal = keyValPairs[key];
+      if (newVal !== undefined) {
+        column[key] = newVal;
+      }
+    }
+    return column;
+  }
+
   getRowCount() {
     return this.rowCount;
   }

src/datatable.js

@@ -5,59 +5,9 @@ import ColumnManager from './columnmanager';
 import RowManager from './rowmanager';
 import BodyRenderer from './body-renderer';
 import Style from './style';
+import DEFAULT_OPTIONS from './defaults';
 import './style.scss';
 
-const DEFAULT_OPTIONS = {
-  data: {
-    columns: [],
-    rows: []
-  },
-  dropdownButton: '▼',
-  headerDropdown: [
-    {
-      label: 'Sort Ascending',
-      action: function (column) {
-        this.sortColumn(column.colIndex, 'asc');
-      }
-    },
-    {
-      label: 'Sort Descending',
-      action: function (column) {
-        this.sortColumn(column.colIndex, 'desc');
-      }
-    },
-    {
-      label: 'Reset sorting',
-      action: function (column) {
-        this.sortColumn(column.colIndex, 'none');
-      }
-    },
-    {
-      label: 'Remove column',
-      action: function (column) {
-        this.removeColumn(column.colIndex);
-      }
-    }
-  ],
-  events: {
-    onRemoveColumn(column) {},
-    onSwitchColumn(column1, column2) {},
-    onSortColumn(column) {}
-  },
-  sortIndicator: {
-    asc: '↑',
-    desc: '↓',
-    none: ''
-  },
-  freezeMessage: 'Loading...',
-  editing: null,
-  addSerialNoColumn: true,
-  addCheckboxColumn: true,
-  enableClusterize: true,
-  enableLogs: false,
-  takeAvailableSpace: false
-};
-
 class DataTable {
   constructor(wrapper, options) {
     DataTable.instances++;

src/defaults.js

@@ -0,0 +1,50 @@
+export default {
+  data: {
+    columns: [],
+    rows: []
+  },
+  dropdownButton: '▼',
+  headerDropdown: [
+    {
+      label: 'Sort Ascending',
+      action: function (column) {
+        this.sortColumn(column.colIndex, 'asc');
+      }
+    },
+    {
+      label: 'Sort Descending',
+      action: function (column) {
+        this.sortColumn(column.colIndex, 'desc');
+      }
+    },
+    {
+      label: 'Reset sorting',
+      action: function (column) {
+        this.sortColumn(column.colIndex, 'none');
+      }
+    },
+    {
+      label: 'Remove column',
+      action: function (column) {
+        this.removeColumn(column.colIndex);
+      }
+    }
+  ],
+  events: {
+    onRemoveColumn(column) {},
+    onSwitchColumn(column1, column2) {},
+    onSortColumn(column) {}
+  },
+  sortIndicator: {
+    asc: '↑',
+    desc: '↓',
+    none: ''
+  },
+  freezeMessage: 'Loading...',
+  editing: null,
+  addSerialNoColumn: true,
+  addCheckboxColumn: true,
+  enableClusterize: true,
+  enableLogs: false,
+  takeAvailableSpace: false
+};