wip

lib/frappe-datatable.js

@@ -718,16 +718,16 @@ var CellManager = function () {
       // don't focus if already editing cell
       if ($cell === this.$editingCell) return;
 
-      // don't focus checkbox cell
-      if (this.options.addCheckboxColumn && colIndex === 0) {
-        return;
-      }
-
       var _$$data3 = _dom2.default.data($cell),
           colIndex = _$$data3.colIndex,
           isHeader = _$$data3.isHeader;
 
-      if (this.isStandardCell(colIndex) || isHeader) {
+      if (isHeader) {
+        return;
+      }
+
+      var column = this.columnmanager.getColumn(colIndex);
+      if (column.focusable === false) {
         return;
       }
 
@@ -920,7 +920,7 @@ var CellManager = function () {
           rowIndex = _$$data7.rowIndex,
           colIndex = _$$data7.colIndex;
 
-      var col = this.instance.columnmanager.getColumn(colIndex);
+      var col = this.columnmanager.getColumn(colIndex);
 
       if (col && col.editable === false) {
         return;
@@ -1528,6 +1528,12 @@ var DataTable = function () {
   function DataTable(wrapper, options) {
     _classCallCheck(this, DataTable);
 
+    DataTable.instances++;
+
+    if (typeof wrapper === 'string') {
+      // css selector
+      wrapper = document.querySelector(wrapper);
+    }
     this.wrapper = wrapper;
     if (!this.wrapper) {
       throw new Error('Invalid argument given for `wrapper`');
@@ -1539,7 +1545,7 @@ var DataTable = function () {
 
     this.prepare();
 
-    this.style = new _style2.default(this.wrapper);
+    this.style = new _style2.default(this);
     this.datamanager = new _datamanager2.default(this.options);
     this.rowmanager = new _rowmanager2.default(this);
     this.columnmanager = new _columnmanager2.default(this);
@@ -1570,6 +1576,12 @@ var DataTable = function () {
       this.datamanager.init(data);
       this.render();
     }
+  }, {
+    key: 'destroy',
+    value: function destroy() {
+      this.wrapper.innerHTML = '';
+      this.style.destroy();
+    }
   }, {
     key: 'appendRows',
     value: function appendRows(rows) {
@@ -1730,6 +1742,11 @@ var DataTable = function () {
 
       return this.viewportHeight;
     }
+  }, {
+    key: 'scrollToLastColumn',
+    value: function scrollToLastColumn() {
+      this.datatableWrapper.scrollLeft = 9999;
+    }
   }, {
     key: 'log',
     value: function log() {
@@ -1742,6 +1759,8 @@ var DataTable = function () {
   return DataTable;
 }();
 
+DataTable.instances = 0;
+
 exports.default = DataTable;
 function getBodyHTML(rows) {
   return '\n    <tbody>\n      ' + rows.map(function (row) {
@@ -1807,7 +1826,8 @@ var DataManager = function () {
           content: 'Sr. No',
           editable: false,
           resizable: false,
-          align: 'center'
+          align: 'center',
+          focusable: false
         };
 
         columns = [val].concat(columns);
@@ -1819,7 +1839,8 @@ var DataManager = function () {
           content: '<input type="checkbox" />',
           editable: false,
           resizable: false,
-          sortable: false
+          sortable: false,
+          focusable: false
         };
 
         columns = [_val].concat(columns);
@@ -2334,6 +2355,19 @@ var ColumnManager = function () {
       _dom2.default.style(this.header, {
         margin: 0
       });
+
+      // don't show resize cursor on nonResizable columns
+      var nonResizableColumnsSelector = this.datamanager.getColumns().filter(function (col) {
+        return col.resizable !== undefined && !col.resizable;
+      }).map(function (col) {
+        return col.colIndex;
+      }).map(function (i) {
+        return '.data-table-header [data-col-index="' + i + '"]';
+      }).join();
+
+      this.style.setStyle(nonResizableColumnsSelector, {
+        cursor: 'pointer'
+      });
     }
   }, {
     key: 'setupMinWidth',
@@ -2393,9 +2427,13 @@ var ColumnManager = function () {
         return;
       }
 
-      var deltaWidth = (wrapperWidth - headerWidth) / this.datamanager.getColumnCount(true);
+      var resizableColumns = this.datamanager.getColumns().filter(function (col) {
+        return col.resizable === undefined || col.resizable;
+      });
 
-      this.datamanager.getColumns(true).map(function (col) {
+      var deltaWidth = (wrapperWidth - headerWidth) / resizableColumns.length;
+
+      resizableColumns.map(function (col) {
         var width = _dom2.default.style(_this5.getColumnHeaderElement(col.colIndex), 'width');
         var finalWidth = Math.min(width + deltaWidth) - 2;
 
@@ -2534,16 +2572,25 @@ var _utils = __webpack_require__(1);
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 var Style = function () {
-  function Style(wrapper) {
+  function Style(datatable) {
     _classCallCheck(this, Style);
 
-    var styleEl = document.createElement('style');
+    this.datatable = datatable;
+    this.scopeClass = 'datatable-instance-' + datatable.constructor.instances;
+    datatable.datatableWrapper.classList.add(this.scopeClass);
 
-    document.head.appendChild(styleEl);
+    var styleEl = document.createElement('style');
+    datatable.wrapper.insertBefore(styleEl, datatable.datatableWrapper);
+    this.styleEl = styleEl;
     this.styleSheet = styleEl.sheet;
   }
 
   _createClass(Style, [{
+    key: 'destroy',
+    value: function destroy() {
+      this.datatable.wrapper.removeChild(this.styleEl);
+    }
+  }, {
     key: 'setStyle',
     value: function setStyle(rule, styleMap) {
       var index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : -1;
@@ -2554,7 +2601,7 @@ var Style = function () {
         }
         return prop + ':' + styleMap[prop] + ';';
       }).join('');
-      var ruleString = rule + ' { ' + styles + ' }';
+      var ruleString = '.' + this.scopeClass + ' ' + rule + ' { ' + styles + ' }';
 
       var _index = this.styleSheet.cssRules.length;
       if (index !== -1) {

src/cellmanager.js

@@ -184,14 +184,13 @@ export default class CellManager {
     // don't focus if already editing cell
     if ($cell === this.$editingCell) return;
 
-    // don't focus checkbox cell
+    const { colIndex, isHeader } = $.data($cell);
-    if (this.options.addCheckboxColumn && colIndex === 0) {
+    if (isHeader) {
       return;
     }
 
-    const { colIndex, isHeader } = $.data($cell);
+    const column = this.columnmanager.getColumn(colIndex);
-
+    if (column.focusable === false) {
-    if (this.isStandardCell(colIndex) || isHeader) {
       return;
     }
 
@@ -344,7 +343,7 @@ export default class CellManager {
 
   activateEditing($cell) {
     const { rowIndex, colIndex } = $.data($cell);
-    const col = this.instance.columnmanager.getColumn(colIndex);
+    const col = this.columnmanager.getColumn(colIndex);
 
     if (col && col.editable === false) {
       return;

src/columnmanager.js

@@ -140,6 +140,17 @@ export default class ColumnManager {
     $.style(this.header, {
       margin: 0
     });
+
+    // don't show resize cursor on nonResizable columns
+    const nonResizableColumnsSelector = this.datamanager.getColumns()
+      .filter(col => col.resizable !== undefined && !col.resizable)
+      .map(col => col.colIndex)
+      .map(i => `.data-table-header [data-col-index="${i}"]`)
+      .join();
+
+    this.style.setStyle(nonResizableColumnsSelector, {
+      cursor: 'pointer'
+    });
   }
 
   setupMinWidth() {
@@ -185,9 +196,13 @@ export default class ColumnManager {
       return;
     }
 
-    const deltaWidth = (wrapperWidth - headerWidth) / this.datamanager.getColumnCount(true);
+    const resizableColumns = this.datamanager.getColumns().filter(
+      col => col.resizable === undefined || col.resizable
+    );
 
-    this.datamanager.getColumns(true).map(col => {
+    const deltaWidth = (wrapperWidth - headerWidth) / resizableColumns.length;
+
+    resizableColumns.map(col => {
       const width = $.style(this.getColumnHeaderElement(col.colIndex), 'width');
       let finalWidth = Math.min(width + deltaWidth) - 2;
 

src/datamanager.js

@@ -32,7 +32,8 @@ export default class DataManager {
         content: 'Sr. No',
         editable: false,
         resizable: false,
-        align: 'center'
+        align: 'center',
+        focusable: false
       };
 
       columns = [val].concat(columns);
@@ -44,7 +45,8 @@ export default class DataManager {
         content: '<input type="checkbox" />',
         editable: false,
         resizable: false,
-        sortable: false
+        sortable: false,
+        focusable: false
       };
 
       columns = [val].concat(columns);

src/datatable.js

@@ -24,9 +24,14 @@ const DEFAULT_OPTIONS = {
   takeAvailableSpace: false
 };
 
-export default class DataTable {
+class DataTable {
   constructor(wrapper, options) {
+    DataTable.instances++;
 
+    if (typeof wrapper === 'string') {
+      // css selector
+      wrapper = document.querySelector(wrapper);
+    }
     this.wrapper = wrapper;
     if (!this.wrapper) {
       throw new Error('Invalid argument given for `wrapper`');
@@ -38,7 +43,7 @@ export default class DataTable {
 
     this.prepare();
 
-    this.style = new Style(this.wrapper);
+    this.style = new Style(this);
     this.datamanager = new DataManager(this.options);
     this.rowmanager = new RowManager(this);
     this.columnmanager = new ColumnManager(this);
@@ -79,6 +84,11 @@ export default class DataTable {
     this.render();
   }
 
+  destroy() {
+    this.wrapper.innerHTML = '';
+    this.style.destroy();
+  }
+
   appendRows(rows) {
     this.datamanager.appendRows(rows);
     this.rowmanager.refreshRows();
@@ -226,6 +236,10 @@ export default class DataTable {
     return this.viewportHeight;
   }
 
+  scrollToLastColumn() {
+    this.datatableWrapper.scrollLeft = 9999;
+  }
+
   log() {
     if (this.options.enableLogs) {
       console.log.apply(console, arguments);
@@ -233,6 +247,10 @@ export default class DataTable {
   }
 }
 
+DataTable.instances = 0;
+
+export default DataTable;
+
 export function getBodyHTML(rows) {
   return `
     <tbody>

src/style.js

@@ -2,13 +2,21 @@ import { camelCaseToDash } from './utils';
 
 export default class Style {
 
-  constructor(wrapper) {
+  constructor(datatable) {
-    const styleEl = document.createElement('style');
+    this.datatable = datatable;
+    this.scopeClass = 'datatable-instance-' + datatable.constructor.instances;
+    datatable.datatableWrapper.classList.add(this.scopeClass);
 
-    document.head.appendChild(styleEl);
+    const styleEl = document.createElement('style');
+    datatable.wrapper.insertBefore(styleEl, datatable.datatableWrapper);
+    this.styleEl = styleEl;
     this.styleSheet = styleEl.sheet;
   }
 
+  destroy() {
+    this.datatable.wrapper.removeChild(this.styleEl);
+  }
+
   setStyle(rule, styleMap, index = -1) {
     const styles = Object.keys(styleMap)
       .map(prop => {
@@ -18,7 +26,7 @@ export default class Style {
         return `${prop}:${styleMap[prop]};`;
       })
       .join('');
-    let ruleString = `${rule} { ${styles} }`;
+    let ruleString = `.${this.scopeClass} ${rule} { ${styles} }`;
 
     let _index = this.styleSheet.cssRules.length;
     if (index !== -1) {