v0.0.6

dist/frappe-datatable.cjs.js

@@ -242,10 +242,12 @@ var isObject_1 = isObject;
 
 var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
+/** Detect free variable `global` from Node.js. */
 var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
 
 var _freeGlobal = freeGlobal;
 
+/** Detect free variable `self`. */
 var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
 
 /** Used as a reference to the global object. */
@@ -253,16 +255,34 @@ var root = _freeGlobal || freeSelf || Function('return this')();
 
 var _root = root;
 
+/**
+ * Gets the timestamp of the number of milliseconds that have elapsed since
+ * the Unix epoch (1 January 1970 00:00:00 UTC).
+ *
+ * @static
+ * @memberOf _
+ * @since 2.4.0
+ * @category Date
+ * @returns {number} Returns the timestamp.
+ * @example
+ *
+ * _.defer(function(stamp) {
+ *   console.log(_.now() - stamp);
+ * }, _.now());
+ * // => Logs the number of milliseconds it took for the deferred invocation.
+ */
 var now = function() {
   return _root.Date.now();
 };
 
 var now_1 = now;
 
+/** Built-in value references. */
 var Symbol = _root.Symbol;
 
 var _Symbol = Symbol;
 
+/** Used for built-in method references. */
 var objectProto = Object.prototype;
 
 /** Used to check objects for own properties. */
@@ -291,11 +311,10 @@ function getRawTag(value) {
 
   try {
     value[symToStringTag] = undefined;
-    var unmasked = true;
   } catch (e) {}
 
   var result = nativeObjectToString.call(value);
-  if (unmasked) {
+  {
     if (isOwn) {
       value[symToStringTag] = tag;
     } else {
@@ -330,8 +349,9 @@ function objectToString(value) {
 
 var _objectToString = objectToString;
 
-var nullTag = '[object Null]';
+/** `Object#toString` result references. */
-var undefinedTag = '[object Undefined]';
+var nullTag = '[object Null]',
+    undefinedTag = '[object Undefined]';
 
 /** Built-in value references. */
 var symToStringTag$1 = _Symbol ? _Symbol.toStringTag : undefined;
@@ -384,6 +404,7 @@ function isObjectLike(value) {
 
 var isObjectLike_1 = isObjectLike;
 
+/** `Object#toString` result references. */
 var symbolTag = '[object Symbol]';
 
 /**
@@ -410,6 +431,7 @@ function isSymbol(value) {
 
 var isSymbol_1 = isSymbol;
 
+/** Used as references for various `Number` constants. */
 var NAN = 0 / 0;
 
 /** Used to match leading and trailing whitespace. */
@@ -473,11 +495,12 @@ function toNumber(value) {
 
 var toNumber_1 = toNumber;
 
+/** Error message constants. */
 var FUNC_ERROR_TEXT = 'Expected a function';
 
 /* Built-in method references for those with the same name as other `lodash` methods. */
-var nativeMax = Math.max;
+var nativeMax = Math.max,
-var nativeMin = Math.min;
+    nativeMin = Math.min;
 
 /**
  * Creates a debounced function that delays invoking `func` until after `wait`
@@ -659,6 +682,7 @@ function debounce(func, wait, options) {
 
 var debounce_1 = debounce;
 
+/** Error message constants. */
 var FUNC_ERROR_TEXT$1 = 'Expected a function';
 
 /**
@@ -805,7 +829,7 @@ function isNumeric(val) {
 
 let throttle$1 = throttle_1;
 
-let debounce$2 = debounce_1;
+let debounce$1 = debounce_1;
 
 function nextTick(fn, context = null) {
     return (...args) => {
@@ -818,7 +842,6 @@ function nextTick(fn, context = null) {
         });
     };
 }
-
 function linkProperties(target, source, properties) {
     const props = properties.reduce((acc, prop) => {
         acc[prop] = {
@@ -830,7 +853,6 @@ function linkProperties(target, source, properties) {
     }, {});
     Object.defineProperties(target, props);
 }
-
 function isSet(val) {
     return val !== undefined || val !== null;
 }
@@ -1226,7 +1248,7 @@ class DataManager {
             }
         }
 
-        const _row = this.prepareRow(row, rowIndex);
+        const _row = this.prepareRow(row, {rowIndex});
         const index = this.rows.findIndex(row => row[0].rowIndex === rowIndex);
         this.rows[index] = _row;
 
@@ -1606,6 +1628,22 @@ class CellManager {
                 this.instance.showToastMessage(message, 2);
             }
         });
+
+        if (this.options.pasteFromClipboard) {
+            this.keyboard.on('ctrl+v', (e) => {
+                // hack
+                // https://stackoverflow.com/a/2177059/5353542
+                this.instance.pasteTarget.focus();
+
+                setTimeout(() => {
+                    const data = this.instance.pasteTarget.value;
+                    this.instance.pasteTarget.value = '';
+                    this.pasteContentInCell(data);
+                }, 10);
+
+                return false;
+            });
+        }
     }
 
     bindMouseEvents() {
@@ -1994,6 +2032,30 @@ class CellManager {
         return rows.reduce((total, row) => total + row.length, 0);
     }
 
+    pasteContentInCell(data) {
+        if (!this.$focusedCell) return;
+
+        const matrix = data
+            .split('\n')
+            .map(row => row.split('\t'))
+            .filter(row => row.length && row.every(it => it));
+
+        let { colIndex, rowIndex } = $.data(this.$focusedCell);
+
+        let focusedCell = {
+            colIndex: +colIndex,
+            rowIndex: +rowIndex
+        };
+
+        matrix.forEach((row, i) => {
+            let rowIndex = i + focusedCell.rowIndex;
+            row.forEach((cell, j) => {
+                let colIndex = j + focusedCell.colIndex;
+                this.updateCell(colIndex, rowIndex, cell);
+            });
+        });
+    }
+
     activateFilter(colIndex) {
         this.columnmanager.toggleFilter();
         this.columnmanager.focusFilter(colIndex);
@@ -2513,7 +2575,7 @@ class ColumnManager {
                     this.rowmanager.showRows(rowsToShow);
                 });
         };
-        $.on(this.header, 'keydown', '.dt-filter', debounce$2(handler, 300));
+        $.on(this.header, 'keydown', '.dt-filter', debounce$1(handler, 300));
     }
 
     sortRows(colIndex, sortOrder) {
@@ -3299,7 +3361,8 @@ const KEYCODES = {
     9: 'tab',
     27: 'esc',
     67: 'c',
-    70: 'f'
+    70: 'f',
+    86: 'v'
 };
 
 class Keyboard {
@@ -3394,7 +3457,8 @@ var DEFAULT_OPTIONS = {
     inlineFilters: false,
     treeView: false,
     checkedRowStatus: true,
-    dynamicRowHeight: false
+    dynamicRowHeight: false,
+    pasteFromClipboard: false
 };
 
 class DataTable {
@@ -3434,8 +3498,11 @@ class DataTable {
             this.options || {}, options
         );
 
-        this.options.headerDropdown
+        options.headerDropdown = options.headerDropdown || [];
-            .push(...(options.headerDropdown || []));
+        this.options.headerDropdown = [
+            ...DEFAULT_OPTIONS.headerDropdown,
+            ...options.headerDropdown
+        ];
 
         // custom user events
         this.events = Object.assign(
@@ -3464,6 +3531,7 @@ class DataTable {
                     </span>
                 </div>
                 <div class="dt-toast"></div>
+                <textarea class="dt-paste-target"></textarea>
             </div>
         `;
 
@@ -3472,6 +3540,7 @@ class DataTable {
         this.bodyScrollable = $('.dt-scrollable', this.wrapper);
         this.freezeContainer = $('.dt-freeze', this.wrapper);
         this.toastMessage = $('.dt-toast', this.wrapper);
+        this.pasteTarget = $('.dt-paste-target', this.wrapper);
     }
 
     refresh(data, columns) {
@@ -3589,7 +3658,7 @@ class DataTable {
 DataTable.instances = 0;
 
 var name = "frappe-datatable";
-var version = "0.0.4";
+var version = "0.0.5";
 var description = "A modern datatable library for the web";
 var main = "dist/frappe-datatable.cjs.js";
 var scripts = {"start":"yarn run dev","build":"rollup -c","production":"rollup -c --production","build:docs":"rollup -c --docs","dev":"rollup -c -w","test":"mocha --compilers js:babel-core/register --colors ./test/*.spec.js"};

dist/frappe-datatable.css

@@ -247,6 +247,11 @@
 		        transform: translateY(-50%);
 	}
 
+.dt-paste-target {
+	position: fixed;
+	left: -999em;
+}
+
 body.dt-resize {
 	cursor: col-resize;
 }

dist/frappe-datatable.js

@@ -1,22 +1,22 @@
 var DataTable = (function (Sortable,Clusterize) {
-'use strict';
+    'use strict';
 
-Sortable = Sortable && Sortable.hasOwnProperty('default') ? Sortable['default'] : Sortable;
+    Sortable = Sortable && Sortable.hasOwnProperty('default') ? Sortable['default'] : Sortable;
-Clusterize = Clusterize && Clusterize.hasOwnProperty('default') ? Clusterize['default'] : Clusterize;
+    Clusterize = Clusterize && Clusterize.hasOwnProperty('default') ? Clusterize['default'] : Clusterize;
 
-function $(expr, con) {
+    function $(expr, con) {
         return typeof expr === 'string' ?
             (con || document).querySelector(expr) :
             expr || null;
-}
+    }
 
-$.each = (expr, con) => {
+    $.each = (expr, con) => {
         return typeof expr === 'string' ?
             Array.from((con || document).querySelectorAll(expr)) :
             expr || null;
-};
+    };
 
-$.create = (tag, o) => {
+    $.create = (tag, o) => {
         let element = document.createElement(tag);
 
         for (let i in o) {
@@ -45,28 +45,28 @@ $.create = (tag, o) => {
         }
 
         return element;
-};
+    };
 
-$.on = (element, event, selector, callback) => {
+    $.on = (element, event, selector, callback) => {
         if (!callback) {
             callback = selector;
             $.bind(element, event, callback);
         } else {
             $.delegate(element, event, selector, callback);
         }
-};
+    };
 
-$.off = (element, event, handler) => {
+    $.off = (element, event, handler) => {
         element.removeEventListener(event, handler);
-};
+    };
 
-$.bind = (element, event, callback) => {
+    $.bind = (element, event, callback) => {
         event.split(/\s+/).forEach(function (event) {
             element.addEventListener(event, callback);
         });
-};
+    };
 
-$.delegate = (element, event, selector, callback) => {
+    $.delegate = (element, event, selector, callback) => {
         element.addEventListener(event, function (e) {
             const delegatedTarget = e.target.closest(selector);
             if (delegatedTarget) {
@@ -74,9 +74,9 @@ $.delegate = (element, event, selector, callback) => {
                 callback.call(this, e, delegatedTarget);
             }
         });
-};
+    };
 
-$.unbind = (element, o) => {
+    $.unbind = (element, o) => {
         if (element) {
             for (let event in o) {
                 let callback = o[event];
@@ -86,9 +86,9 @@ $.unbind = (element, o) => {
                 });
             }
         }
-};
+    };
 
-$.fire = (target, type, properties) => {
+    $.fire = (target, type, properties) => {
         let evt = document.createEvent('HTMLEvents');
 
         evt.initEvent(type, true, true);
@@ -98,9 +98,9 @@ $.fire = (target, type, properties) => {
         }
 
         return target.dispatchEvent(evt);
-};
+    };
 
-$.data = (element, attrs) => { // eslint-disable-line
+    $.data = (element, attrs) => { // eslint-disable-line
         if (!attrs) {
             return element.dataset;
         }
@@ -108,9 +108,9 @@ $.data = (element, attrs) => { // eslint-disable-line
         for (const attr in attrs) {
             element.dataset[attr] = attrs[attr];
         }
-};
+    };
 
-$.style = (elements, styleMap) => { // eslint-disable-line
+    $.style = (elements, styleMap) => { // eslint-disable-line
 
         if (typeof styleMap === 'string') {
             return $.getStyle(elements, styleMap);
@@ -125,9 +125,9 @@ $.style = (elements, styleMap) => { // eslint-disable-line
                 element.style[prop] = styleMap[prop];
             }
         });
-};
+    };
 
-$.removeStyle = (elements, styleProps) => {
+    $.removeStyle = (elements, styleProps) => {
         if (!Array.isArray(elements)) {
             elements = [elements];
         }
@@ -141,9 +141,9 @@ $.removeStyle = (elements, styleProps) => {
                 element.style[prop] = '';
             }
         });
-};
+    };
 
-$.getStyle = (element, prop) => {
+    $.getStyle = (element, prop) => {
         let val = getComputedStyle(element)[prop];
 
         if (['width', 'height'].includes(prop)) {
@@ -151,9 +151,9 @@ $.getStyle = (element, prop) => {
         }
 
         return val;
-};
+    };
 
-$.closest = (selector, element) => {
+    $.closest = (selector, element) => {
         if (!element) return null;
 
         if (element.matches(selector)) {
@@ -161,9 +161,9 @@ $.closest = (selector, element) => {
         }
 
         return $.closest(selector, element.parentNode);
-};
+    };
 
-$.inViewport = (el, parentEl) => {
+    $.inViewport = (el, parentEl) => {
         const {
             top,
             left,
@@ -178,15 +178,15 @@ $.inViewport = (el, parentEl) => {
         } = parentEl.getBoundingClientRect();
 
         return top >= pTop && left >= pLeft && bottom <= pBottom && right <= pRight;
-};
+    };
 
-$.scrollTop = function scrollTop(element, pixels) {
+    $.scrollTop = function scrollTop(element, pixels) {
         requestAnimationFrame(() => {
             element.scrollTop = pixels;
         });
-};
+    };
 
-$.scrollbarWidth = function scrollbarWidth() {
+    $.scrollbarWidth = function scrollbarWidth() {
         // Create the measurement node
         const scrollDiv = document.createElement('div');
         $.style(scrollDiv, {
@@ -205,9 +205,9 @@ $.scrollbarWidth = function scrollbarWidth() {
         document.body.removeChild(scrollDiv);
 
         return scrollbarWidth;
-};
+    };
 
-/**
+    /**
      * Checks if `value` is the
      * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
      * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
@@ -232,69 +232,88 @@ $.scrollbarWidth = function scrollbarWidth() {
      * _.isObject(null);
      * // => false
      */
-function isObject(value) {
+    function isObject(value) {
       var type = typeof value;
       return value != null && (type == 'object' || type == 'function');
-}
+    }
 
-var isObject_1 = isObject;
+    var isObject_1 = isObject;
 
-var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+    var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
-var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+    /** Detect free variable `global` from Node.js. */
+    var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
 
-var _freeGlobal = freeGlobal;
+    var _freeGlobal = freeGlobal;
 
-var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
+    /** Detect free variable `self`. */
+    var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
 
-/** Used as a reference to the global object. */
+    /** Used as a reference to the global object. */
-var root = _freeGlobal || freeSelf || Function('return this')();
+    var root = _freeGlobal || freeSelf || Function('return this')();
 
-var _root = root;
+    var _root = root;
 
-var now = function() {
+    /**
+     * Gets the timestamp of the number of milliseconds that have elapsed since
+     * the Unix epoch (1 January 1970 00:00:00 UTC).
+     *
+     * @static
+     * @memberOf _
+     * @since 2.4.0
+     * @category Date
+     * @returns {number} Returns the timestamp.
+     * @example
+     *
+     * _.defer(function(stamp) {
+     *   console.log(_.now() - stamp);
+     * }, _.now());
+     * // => Logs the number of milliseconds it took for the deferred invocation.
+     */
+    var now = function() {
       return _root.Date.now();
-};
+    };
 
-var now_1 = now;
+    var now_1 = now;
 
-var Symbol = _root.Symbol;
+    /** Built-in value references. */
+    var Symbol = _root.Symbol;
 
-var _Symbol = Symbol;
+    var _Symbol = Symbol;
 
-var objectProto = Object.prototype;
+    /** Used for built-in method references. */
+    var objectProto = Object.prototype;
 
-/** Used to check objects for own properties. */
+    /** Used to check objects for own properties. */
-var hasOwnProperty = objectProto.hasOwnProperty;
+    var hasOwnProperty = objectProto.hasOwnProperty;
 
-/**
+    /**
      * Used to resolve the
      * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
      * of values.
      */
-var nativeObjectToString = objectProto.toString;
+    var nativeObjectToString = objectProto.toString;
 
-/** Built-in value references. */
+    /** Built-in value references. */
-var symToStringTag = _Symbol ? _Symbol.toStringTag : undefined;
+    var symToStringTag = _Symbol ? _Symbol.toStringTag : undefined;
 
-/**
+    /**
      * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
      *
      * @private
      * @param {*} value The value to query.
      * @returns {string} Returns the raw `toStringTag`.
      */
-function getRawTag(value) {
+    function getRawTag(value) {
       var isOwn = hasOwnProperty.call(value, symToStringTag),
           tag = value[symToStringTag];
 
       try {
         value[symToStringTag] = undefined;
-    var unmasked = true;
       } catch (e) {}
 
       var result = nativeObjectToString.call(value);
-  if (unmasked) {
+      {
         if (isOwn) {
           value[symToStringTag] = tag;
         } else {
@@ -302,58 +321,59 @@ function getRawTag(value) {
         }
       }
       return result;
-}
+    }
 
-var _getRawTag = getRawTag;
+    var _getRawTag = getRawTag;
 
-/** Used for built-in method references. */
+    /** Used for built-in method references. */
-var objectProto$1 = Object.prototype;
+    var objectProto$1 = Object.prototype;
 
-/**
+    /**
      * Used to resolve the
      * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
      * of values.
      */
-var nativeObjectToString$1 = objectProto$1.toString;
+    var nativeObjectToString$1 = objectProto$1.toString;
 
-/**
+    /**
      * Converts `value` to a string using `Object.prototype.toString`.
      *
      * @private
      * @param {*} value The value to convert.
      * @returns {string} Returns the converted string.
      */
-function objectToString(value) {
+    function objectToString(value) {
       return nativeObjectToString$1.call(value);
-}
+    }
 
-var _objectToString = objectToString;
+    var _objectToString = objectToString;
 
-var nullTag = '[object Null]';
+    /** `Object#toString` result references. */
-var undefinedTag = '[object Undefined]';
+    var nullTag = '[object Null]',
+        undefinedTag = '[object Undefined]';
 
-/** Built-in value references. */
+    /** Built-in value references. */
-var symToStringTag$1 = _Symbol ? _Symbol.toStringTag : undefined;
+    var symToStringTag$1 = _Symbol ? _Symbol.toStringTag : undefined;
 
-/**
+    /**
      * The base implementation of `getTag` without fallbacks for buggy environments.
      *
      * @private
      * @param {*} value The value to query.
      * @returns {string} Returns the `toStringTag`.
      */
-function baseGetTag(value) {
+    function baseGetTag(value) {
       if (value == null) {
         return value === undefined ? undefinedTag : nullTag;
       }
       return (symToStringTag$1 && symToStringTag$1 in Object(value))
         ? _getRawTag(value)
         : _objectToString(value);
-}
+    }
 
-var _baseGetTag = baseGetTag;
+    var _baseGetTag = baseGetTag;
 
-/**
+    /**
      * Checks if `value` is object-like. A value is object-like if it's not `null`
      * and has a `typeof` result of "object".
      *
@@ -377,15 +397,16 @@ var _baseGetTag = baseGetTag;
      * _.isObjectLike(null);
      * // => false
      */
-function isObjectLike(value) {
+    function isObjectLike(value) {
       return value != null && typeof value == 'object';
-}
+    }
 
-var isObjectLike_1 = isObjectLike;
+    var isObjectLike_1 = isObjectLike;
 
-var symbolTag = '[object Symbol]';
+    /** `Object#toString` result references. */
+    var symbolTag = '[object Symbol]';
 
-/**
+    /**
      * Checks if `value` is classified as a `Symbol` primitive or object.
      *
      * @static
@@ -402,31 +423,32 @@ var symbolTag = '[object Symbol]';
      * _.isSymbol('abc');
      * // => false
      */
-function isSymbol(value) {
+    function isSymbol(value) {
       return typeof value == 'symbol' ||
         (isObjectLike_1(value) && _baseGetTag(value) == symbolTag);
-}
+    }
 
-var isSymbol_1 = isSymbol;
+    var isSymbol_1 = isSymbol;
 
-var NAN = 0 / 0;
+    /** Used as references for various `Number` constants. */
+    var NAN = 0 / 0;
 
-/** Used to match leading and trailing whitespace. */
+    /** Used to match leading and trailing whitespace. */
-var reTrim = /^\s+|\s+$/g;
+    var reTrim = /^\s+|\s+$/g;
 
-/** Used to detect bad signed hexadecimal string values. */
+    /** Used to detect bad signed hexadecimal string values. */
-var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+    var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
 
-/** Used to detect binary string values. */
+    /** Used to detect binary string values. */
-var reIsBinary = /^0b[01]+$/i;
+    var reIsBinary = /^0b[01]+$/i;
 
-/** Used to detect octal string values. */
+    /** Used to detect octal string values. */
-var reIsOctal = /^0o[0-7]+$/i;
+    var reIsOctal = /^0o[0-7]+$/i;
 
-/** Built-in method references without a dependency on `root`. */
+    /** Built-in method references without a dependency on `root`. */
-var freeParseInt = parseInt;
+    var freeParseInt = parseInt;
 
-/**
+    /**
      * Converts `value` to a number.
      *
      * @static
@@ -449,7 +471,7 @@ var freeParseInt = parseInt;
      * _.toNumber('3.2');
      * // => 3.2
      */
-function toNumber(value) {
+    function toNumber(value) {
       if (typeof value == 'number') {
         return value;
       }
@@ -468,17 +490,18 @@ function toNumber(value) {
       return (isBinary || reIsOctal.test(value))
         ? freeParseInt(value.slice(2), isBinary ? 2 : 8)
         : (reIsBadHex.test(value) ? NAN : +value);
-}
+    }
 
-var toNumber_1 = toNumber;
+    var toNumber_1 = toNumber;
 
-var FUNC_ERROR_TEXT = 'Expected a function';
+    /** Error message constants. */
+    var FUNC_ERROR_TEXT = 'Expected a function';
 
-/* Built-in method references for those with the same name as other `lodash` methods. */
+    /* Built-in method references for those with the same name as other `lodash` methods. */
-var nativeMax = Math.max;
+    var nativeMax = Math.max,
-var nativeMin = Math.min;
+        nativeMin = Math.min;
 
-/**
+    /**
      * Creates a debounced function that delays invoking `func` until after `wait`
      * milliseconds have elapsed since the last time the debounced function was
      * invoked. The debounced function comes with a `cancel` method to cancel
@@ -532,7 +555,7 @@ var nativeMin = Math.min;
      * // Cancel the trailing debounced invocation.
      * jQuery(window).on('popstate', debounced.cancel);
      */
-function debounce(func, wait, options) {
+    function debounce(func, wait, options) {
       var lastArgs,
           lastThis,
           maxWait,
@@ -654,13 +677,14 @@ function debounce(func, wait, options) {
       debounced.cancel = cancel;
       debounced.flush = flush;
       return debounced;
-}
+    }
 
-var debounce_1 = debounce;
+    var debounce_1 = debounce;
 
-var FUNC_ERROR_TEXT$1 = 'Expected a function';
+    /** Error message constants. */
+    var FUNC_ERROR_TEXT$1 = 'Expected a function';
 
-/**
+    /**
      * Creates a throttled function that only invokes `func` at most once per
      * every `wait` milliseconds. The throttled function comes with a `cancel`
      * method to cancel delayed `func` invocations and a `flush` method to
@@ -704,7 +728,7 @@ var FUNC_ERROR_TEXT$1 = 'Expected a function';
      * // Cancel the trailing throttled invocation.
      * jQuery(window).on('popstate', throttled.cancel);
      */
-function throttle(func, wait, options) {
+    function throttle(func, wait, options) {
       var leading = true,
           trailing = true;
 
@@ -720,15 +744,15 @@ function throttle(func, wait, options) {
         'maxWait': wait,
         'trailing': trailing
       });
-}
+    }
 
-var throttle_1 = throttle;
+    var throttle_1 = throttle;
 
-function camelCaseToDash(str) {
+    function camelCaseToDash(str) {
         return str.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`);
-}
+    }
 
-function makeDataAttributeString(props) {
+    function makeDataAttributeString(props) {
         const keys = Object.keys(props);
 
         return keys
@@ -741,9 +765,9 @@ function makeDataAttributeString(props) {
             })
             .join('')
             .trim();
-}
+    }
 
-function copyTextToClipboard(text) {
+    function copyTextToClipboard(text) {
         // https://stackoverflow.com/a/30810322/5353542
         var textArea = document.createElement('textarea');
 
@@ -796,17 +820,17 @@ function copyTextToClipboard(text) {
         }
 
         document.body.removeChild(textArea);
-}
+    }
 
-function isNumeric(val) {
+    function isNumeric(val) {
         return !isNaN(val);
-}
+    }
 
-let throttle$1 = throttle_1;
+    let throttle$1 = throttle_1;
 
-let debounce$2 = debounce_1;
+    let debounce$1 = debounce_1;
 
-function nextTick(fn, context = null) {
+    function nextTick(fn, context = null) {
         return (...args) => {
             return new Promise(resolve => {
                 const execute = () => {
@@ -816,9 +840,8 @@ function nextTick(fn, context = null) {
                 setTimeout(execute);
             });
         };
-}
+    }
-
+    function linkProperties(target, source, properties) {
-function linkProperties(target, source, properties) {
         const props = properties.reduce((acc, prop) => {
             acc[prop] = {
                 get() {
@@ -828,28 +851,27 @@ function linkProperties(target, source, properties) {
             return acc;
         }, {});
         Object.defineProperties(target, props);
-}
+    }
-
+    function isSet(val) {
-function isSet(val) {
         return val !== undefined || val !== null;
-}
+    }
 
-function notSet(val) {
+    function notSet(val) {
         return !isSet(val);
-}
+    }
 
-function isNumber(val) {
+    function isNumber(val) {
         return !isNaN(val);
-}
+    }
 
-function ensureArray(val) {
+    function ensureArray(val) {
         if (!Array.isArray(val)) {
             return [val];
         }
         return val;
-}
+    }
 
-class DataManager {
+    class DataManager {
         constructor(options) {
             this.options = options;
             this.sortRows = nextTick(this.sortRows, this);
@@ -1225,7 +1247,7 @@ class DataManager {
                 }
             }
 
-        const _row = this.prepareRow(row, rowIndex);
+            const _row = this.prepareRow(row, {rowIndex});
             const index = this.rows.findIndex(row => row[0].rowIndex === rowIndex);
             this.rows[index] = _row;
 
@@ -1453,12 +1475,12 @@ class DataManager {
         getCheckboxHTML() {
             return '<input type="checkbox" />';
         }
-}
+    }
 
-// Custom Errors
+    // Custom Errors
-class DataError extends TypeError {}
+    class DataError extends TypeError {}
 
-class CellManager {
+    class CellManager {
         constructor(instance) {
             this.instance = instance;
             linkProperties(this, this.instance, [
@@ -1605,6 +1627,22 @@ class CellManager {
                     this.instance.showToastMessage(message, 2);
                 }
             });
+
+            if (this.options.pasteFromClipboard) {
+                this.keyboard.on('ctrl+v', (e) => {
+                    // hack
+                    // https://stackoverflow.com/a/2177059/5353542
+                    this.instance.pasteTarget.focus();
+
+                    setTimeout(() => {
+                        const data = this.instance.pasteTarget.value;
+                        this.instance.pasteTarget.value = '';
+                        this.pasteContentInCell(data);
+                    }, 10);
+
+                    return false;
+                });
+            }
         }
 
         bindMouseEvents() {
@@ -1993,6 +2031,30 @@ class CellManager {
             return rows.reduce((total, row) => total + row.length, 0);
         }
 
+        pasteContentInCell(data) {
+            if (!this.$focusedCell) return;
+
+            const matrix = data
+                .split('\n')
+                .map(row => row.split('\t'))
+                .filter(row => row.length && row.every(it => it));
+
+            let { colIndex, rowIndex } = $.data(this.$focusedCell);
+
+            let focusedCell = {
+                colIndex: +colIndex,
+                rowIndex: +rowIndex
+            };
+
+            matrix.forEach((row, i) => {
+                let rowIndex = i + focusedCell.rowIndex;
+                row.forEach((cell, j) => {
+                    let colIndex = j + focusedCell.colIndex;
+                    this.updateCell(colIndex, rowIndex, cell);
+                });
+            });
+        }
+
         activateFilter(colIndex) {
             this.columnmanager.toggleFilter();
             this.columnmanager.focusFilter(colIndex);
@@ -2207,9 +2269,9 @@ class CellManager {
         selector(colIndex, rowIndex) {
             return `.dt-cell--${colIndex}-${rowIndex}`;
         }
-}
+    }
 
-class ColumnManager {
+    class ColumnManager {
         constructor(instance) {
             this.instance = instance;
 
@@ -2512,7 +2574,7 @@ class ColumnManager {
                         this.rowmanager.showRows(rowsToShow);
                     });
             };
-        $.on(this.header, 'keydown', '.dt-filter', debounce$2(handler, 300));
+            $.on(this.header, 'keydown', '.dt-filter', debounce$1(handler, 300));
         }
 
         sortRows(colIndex, sortOrder) {
@@ -2598,9 +2660,9 @@ class ColumnManager {
             </div>
       `;
         }
-}
+    }
 
-class RowManager {
+    class RowManager {
         constructor(instance) {
             this.instance = instance;
             linkProperties(this, this.instance, [
@@ -2876,9 +2938,9 @@ class RowManager {
         selector(rowIndex) {
             return `.dt-row[data-row-index="${rowIndex}"]`;
         }
-}
+    }
 
-class BodyRenderer {
+    class BodyRenderer {
         constructor(instance) {
             this.instance = instance;
             this.options = instance.options;
@@ -2989,9 +3051,9 @@ class BodyRenderer {
         getToastMessageHTML(message) {
             return `<span class="dt-toast__message">${message}</span>`;
         }
-}
+    }
 
-class Style {
+    class Style {
         constructor(instance) {
             this.instance = instance;
 
@@ -3283,9 +3345,9 @@ class Style {
 
             return this._rowIndexColumnWidthMap[digits];
         }
-}
+    }
 
-const KEYCODES = {
+    const KEYCODES = {
         13: 'enter',
         91: 'meta',
         16: 'shift',
@@ -3298,10 +3360,11 @@ const KEYCODES = {
         9: 'tab',
         27: 'esc',
         67: 'c',
-    70: 'f'
+        70: 'f',
-};
+        86: 'v'
+    };
 
-class Keyboard {
+    class Keyboard {
         constructor(element) {
             this.listeners = {};
             $.on(element, 'keydown', this.handler.bind(this));
@@ -3338,9 +3401,9 @@ class Keyboard {
                 this.listeners[key].push(listener);
             });
         }
-}
+    }
 
-var DEFAULT_OPTIONS = {
+    var DEFAULT_OPTIONS = {
         columns: [],
         data: [],
         dropdownButton: '▼',
@@ -3393,10 +3456,11 @@ var DEFAULT_OPTIONS = {
         inlineFilters: false,
         treeView: false,
         checkedRowStatus: true,
-    dynamicRowHeight: false
+        dynamicRowHeight: false,
-};
+        pasteFromClipboard: false
+    };
 
-class DataTable {
+    class DataTable {
         constructor(wrapper, options) {
             DataTable.instances++;
 
@@ -3433,8 +3497,11 @@ class DataTable {
                 this.options || {}, options
             );
 
-        this.options.headerDropdown
+            options.headerDropdown = options.headerDropdown || [];
-            .push(...(options.headerDropdown || []));
+            this.options.headerDropdown = [
+                ...DEFAULT_OPTIONS.headerDropdown,
+                ...options.headerDropdown
+            ];
 
             // custom user events
             this.events = Object.assign(
@@ -3463,6 +3530,7 @@ class DataTable {
                     </span>
                 </div>
                 <div class="dt-toast"></div>
+                <textarea class="dt-paste-target"></textarea>
             </div>
         `;
 
@@ -3471,6 +3539,7 @@ class DataTable {
             this.bodyScrollable = $('.dt-scrollable', this.wrapper);
             this.freezeContainer = $('.dt-freeze', this.wrapper);
             this.toastMessage = $('.dt-toast', this.wrapper);
+            this.pasteTarget = $('.dt-paste-target', this.wrapper);
         }
 
         refresh(data, columns) {
@@ -3583,24 +3652,24 @@ class DataTable {
                 console.log.apply(console, arguments);
             }
         }
-}
+    }
 
-DataTable.instances = 0;
+    DataTable.instances = 0;
 
-var name = "frappe-datatable";
+    var name = "frappe-datatable";
-var version = "0.0.4";
+    var version = "0.0.5";
-var description = "A modern datatable library for the web";
+    var description = "A modern datatable library for the web";
-var main = "dist/frappe-datatable.cjs.js";
+    var main = "dist/frappe-datatable.cjs.js";
-var scripts = {"start":"yarn run dev","build":"rollup -c","production":"rollup -c --production","build:docs":"rollup -c --docs","dev":"rollup -c -w","test":"mocha --compilers js:babel-core/register --colors ./test/*.spec.js"};
+    var scripts = {"start":"yarn run dev","build":"rollup -c","production":"rollup -c --production","build:docs":"rollup -c --docs","dev":"rollup -c -w","test":"mocha --compilers js:babel-core/register --colors ./test/*.spec.js"};
-var devDependencies = {"chai":"3.5.0","deepmerge":"^2.0.1","eslint-config-airbnb":"^16.1.0","eslint-config-airbnb-base":"^12.1.0","eslint-plugin-import":"^2.11.0","mocha":"3.3.0","postcss-cssnext":"^3.1.0","postcss-nested":"^3.0.0","rollup-plugin-commonjs":"^8.3.0","rollup-plugin-eslint":"^4.0.0","rollup-plugin-json":"^2.3.0","rollup-plugin-node-resolve":"^3.0.3","rollup-plugin-postcss":"^1.2.8","rollup-plugin-uglify-es":"^0.0.1"};
+    var devDependencies = {"chai":"3.5.0","deepmerge":"^2.0.1","eslint-config-airbnb":"^16.1.0","eslint-config-airbnb-base":"^12.1.0","eslint-plugin-import":"^2.11.0","mocha":"3.3.0","postcss-cssnext":"^3.1.0","postcss-nested":"^3.0.0","rollup-plugin-commonjs":"^8.3.0","rollup-plugin-eslint":"^4.0.0","rollup-plugin-json":"^2.3.0","rollup-plugin-node-resolve":"^3.0.3","rollup-plugin-postcss":"^1.2.8","rollup-plugin-uglify-es":"^0.0.1"};
-var repository = {"type":"git","url":"https://github.com/frappe/datatable.git"};
+    var repository = {"type":"git","url":"https://github.com/frappe/datatable.git"};
-var keywords = ["datatable","data","grid","table"];
+    var keywords = ["datatable","data","grid","table"];
-var author = "Faris Ansari";
+    var author = "Faris Ansari";
-var license = "MIT";
+    var license = "MIT";
-var bugs = {"url":"https://github.com/frappe/datatable/issues"};
+    var bugs = {"url":"https://github.com/frappe/datatable/issues"};
-var homepage = "https://frappe.github.io/datatable";
+    var homepage = "https://frappe.github.io/datatable";
-var dependencies = {"clusterize.js":"^0.18.0","lodash":"^4.17.5","sortablejs":"^1.7.0"};
+    var dependencies = {"clusterize.js":"^0.18.0","lodash":"^4.17.5","sortablejs":"^1.7.0"};
-var packageJson = {
+    var packageJson = {
     	name: name,
     	version: version,
     	description: description,
@@ -3614,10 +3683,10 @@ var packageJson = {
     	bugs: bugs,
     	homepage: homepage,
     	dependencies: dependencies
-};
+    };
 
-DataTable.__version__ = packageJson.version;
+    DataTable.__version__ = packageJson.version;
 
-return DataTable;
+    return DataTable;
 
 }(Sortable,Clusterize));

dist/frappe-datatable.min.css

@@ -1 +1 @@
-.data-table{position:relative;overflow:auto}.data-table *,.data-table :after,.data-table :before{-webkit-box-sizing:border-box;box-sizing:border-box}.data-table button,.data-table input{overflow:visible;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;padding:0}.data-table .input-style{outline:none;width:100%;border:none}.data-table *,.data-table :focus{outline:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none}.data-table table{border-collapse:collapse}.data-table table td{padding:0;border:1px solid #d1d8dd}.data-table thead td{border-bottom-width:1px}.data-table .freeze-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-line-pack:center;align-content:center;position:absolute;left:0;right:0;top:0;bottom:0;background-color:#f5f7fa;opacity:.5;font-size:2em}.data-table .freeze-container span{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.data-table .hide{display:none}.data-table .toast-message{position:absolute;bottom:16px;bottom:1rem;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.data-table .toast-message span{display:inline-block;background-color:rgba(0,0,0,.8);color:#dfe2e5;border-radius:3px;padding:8px 16px;padding:.5rem 1rem}.body-scrollable{max-height:500px;overflow:auto;border-bottom:1px solid #d1d8dd}.body-scrollable.row-highlight-all .data-table-row:not(.row-unhighlight){background-color:#f5f7fa}.body-scrollable .no-data td{text-align:center;padding:8px;padding:.5rem}.data-table-header{position:absolute;top:0;left:0;background-color:#fff;font-weight:700}.data-table-header .content span:not(.column-resizer){cursor:pointer}.data-table-header .column-resizer{display:none;position:absolute;right:0;top:0;width:4px;width:.25rem;height:100%;background-color:#5292f7;cursor:col-resize}.data-table-header .data-table-dropdown{position:absolute;right:10px;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:top;text-align:left}.data-table-header .data-table-dropdown.is-active .data-table-dropdown-list,.data-table-header .data-table-dropdown.is-active .data-table-dropdown-toggle{display:block}.data-table-header .data-table-dropdown-toggle{display:none;background-color:transparent;border:none}.data-table-header .data-table-dropdown-list{display:none;font-weight:400;position:absolute;min-width:128px;min-width:8rem;top:100%;right:0;z-index:1;background-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 3px hsla(0,0%,4%,.1),0 0 0 1px hsla(0,0%,4%,.1);box-shadow:0 2px 3px hsla(0,0%,4%,.1),0 0 0 1px hsla(0,0%,4%,.1);padding-bottom:8px;padding-bottom:.5rem;padding-top:8px;padding-top:.5rem}.data-table-header .data-table-dropdown-list>div{padding:8px 16px;padding:.5rem 1rem}.data-table-header .data-table-dropdown-list>div:hover{background-color:#f5f7fa}.data-table-header .data-table-cell.remove-column{background-color:#fd8b8b;-webkit-transition:background-color .3s ease-in-out;transition:background-color .3s ease-in-out}.data-table-header .data-table-cell.sortable-chosen{background-color:#f5f7fa}.data-table-cell{position:relative}.data-table-cell .content{padding:8px;padding:.5rem;border:2px solid transparent;height:100%}.data-table-cell .content.ellipsis{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.data-table-cell .edit-cell{display:none;padding:8px;padding:.5rem;background-color:#fff;z-index:1;height:100%}.data-table-cell.selected .content{border:2px solid #5292f7}.data-table-cell.editing .content{display:none}.data-table-cell.editing .edit-cell{border:2px solid #ffa00a;border-style:dashed;display:block}.data-table-cell.highlight{background-color:#f5f7fa}.data-table-cell:hover .column-resizer{display:inline-block}.data-table-cell:hover .data-table-dropdown-toggle{display:block}.data-table-cell .tree-node{display:inline-block;position:relative}.data-table-cell .toggle{display:inline-block;position:absolute;padding:0 4px;cursor:pointer}.data-table-cell .toggle:before{content:"▼"}.data-table-cell.tree-close .toggle:before{content:"►"}.data-table-row.row-highlight{background-color:#f5f7fa}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body.data-table-resize{cursor:col-resize}
+.datatable *,.datatable :after,.datatable :before{-webkit-box-sizing:border-box;box-sizing:border-box}.datatable{position:relative;overflow:auto}.dt-header{border-bottom:1px solid #d1d8dd;position:absolute;top:0;left:0;background-color:#fff}.dt-body,.dt-header{border-collapse:collapse}.dt-scrollable{max-height:40vw;overflow:auto;border-bottom:1px solid #d1d8dd}.dt-scrollable--highlight-all{background-color:#fffce7}.dt-scrollable__no-data{text-align:center;padding:16px;padding:1rem;border-left:1px solid #d1d8dd;border-right:1px solid #d1d8dd}.dt-row--highlight{background-color:#fffce7}.dt-row--unhighlight{background-color:#fff}.dt-row--hide{display:none}.dt-cell{border:1px solid #d1d8dd;position:relative;outline:none;padding:0}.dt-cell__content{border:2px solid transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.dt-cell__content,.dt-cell__edit{padding:8px;padding:.5rem;height:100%}.dt-cell__edit{display:none;background-color:#fff;border:2px solid #ffa00a;z-index:1}.dt-cell__resize-handle{opacity:0;position:absolute;right:-3px;top:0;width:5px;height:100%;cursor:col-resize;z-index:1}.dt-cell--editing .dt-cell__content{display:none}.dt-cell--editing .dt-cell__edit{display:block}.dt-cell--focus .dt-cell__content{border-color:#5292f7}.dt-cell--dragging,.dt-cell--highlight{background-color:#f5f7fa}.dt-cell--header .dt-cell__content{padding-right:16px;padding-right:1rem;font-weight:700}.dt-cell--header:hover .dt-dropdown__toggle{opacity:1}.dt-cell--tree-close .dt-tree-node__toggle:before{content:"►"}.dt-dropdown{position:absolute;right:10px;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:top;text-align:left;font-weight:400;cursor:pointer}.dt-dropdown__toggle{opacity:0}.dt-dropdown__list{display:none;position:absolute;min-width:128px;min-width:8rem;top:100%;right:0;z-index:1;background-color:#fff;border-radius:3px;padding:8px 0;padding:.5rem 0;-webkit-box-shadow:0 2px 3px hsla(0,0%,4%,.1),0 0 0 1px hsla(0,0%,4%,.1);box-shadow:0 2px 3px hsla(0,0%,4%,.1),0 0 0 1px hsla(0,0%,4%,.1)}.dt-dropdown__list-item{padding:8px 16px;padding:.5rem 1rem}.dt-dropdown__list-item:hover{background-color:#f5f7fa}.dt-dropdown--active .dt-dropdown__list{display:block}.dt-tree-node{display:inline-block;position:relative}.dt-tree-node__toggle{display:inline-block;position:absolute;font-size:10px;padding:0 4px;cursor:pointer}.dt-tree-node__toggle:before{content:"▼"}.dt-toast{position:absolute;bottom:16px;bottom:1rem;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.dt-toast__message{display:inline-block;background-color:rgba(0,0,0,.8);color:#dfe2e5;border-radius:3px;padding:8px 16px;padding:.5rem 1rem}.dt-input{outline:none;width:100%;border:none;overflow:visible;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;padding:0}.dt-freeze{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-line-pack:center;align-content:center;position:absolute;left:0;right:0;top:0;bottom:0;background-color:#f5f7fa;opacity:.5;font-size:2em}.dt-freeze__message{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.dt-paste-target{position:fixed;left:-999em}body.dt-resize{cursor:col-resize}

docs/assets/css/frappe-datatable.css

@@ -1,56 +1,227 @@
-/* This file is processed by postcss */
+.datatable *, .datatable *::after, .datatable *::before {
-/* variables */
-
-.data-table {
-
-	/* styling */
-	position: relative;
-	overflow: auto;
-}
-
-/* resets */
-
-.data-table *, .data-table *::after, .data-table *::before {
 		-webkit-box-sizing: border-box;
 		        box-sizing: border-box;
 	}
 
-.data-table button, .data-table input {
+.datatable {
+	position: relative;
+	overflow: auto;
+}
+
+.dt-header {
+	border-collapse: collapse;
+	border-bottom: 1px solid #d1d8dd;
+
+	position: absolute;
+	top: 0;
+	left: 0;
+	background-color: #fff;
+}
+
+.dt-body {
+	border-collapse: collapse;
+}
+
+.dt-scrollable {
+	max-height: 40vw;
+	overflow: auto;
+	border-bottom: 1px solid #d1d8dd;
+}
+
+.dt-scrollable--highlight-all {
+		background-color: #fffce7;
+	}
+
+.dt-scrollable__no-data {
+		text-align: center;
+		padding: 16px;
+		padding: 1rem;
+		border-left: 1px solid #d1d8dd;
+		border-right: 1px solid #d1d8dd;
+	}
+
+.dt-row--highlight {
+		background-color: #fffce7;
+	}
+
+.dt-row--unhighlight {
+		background-color: #fff;
+	}
+
+.dt-row--hide {
+		display: none;
+	}
+
+.dt-cell {
+	border: 1px solid #d1d8dd;
+	position: relative;
+	outline: none;
+	padding: 0;
+}
+
+.dt-cell__content {
+		padding: 8px;
+		padding: 0.5rem;
+		border: 2px solid transparent;
+		height: 100%;
+		-webkit-user-select: none;
+		   -moz-user-select: none;
+		    -ms-user-select: none;
+		        user-select: none;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
+	}
+
+.dt-cell__edit {
+		display: none;
+		padding: 8px;
+		padding: 0.5rem;
+		background-color: #fff;
+		border: 2px solid rgb(255, 160, 10);
+		z-index: 1;
+		height: 100%;
+	}
+
+.dt-cell__resize-handle {
+		opacity: 0;
+		position: absolute;
+		right: -3px;
+		top: 0;
+		width: 5px;
+		height: 100%;
+		cursor: col-resize;
+		z-index: 1;
+	}
+
+.dt-cell--editing .dt-cell__content {
+		display: none;
+	}
+
+.dt-cell--editing .dt-cell__edit {
+		display: block;
+	}
+
+.dt-cell--focus .dt-cell__content {
+		border-color: rgb(82, 146, 247);
+	}
+
+.dt-cell--highlight {
+		background-color: #f5f7fa;
+	}
+
+.dt-cell--dragging {
+		background-color: #f5f7fa;
+	}
+
+.dt-cell--header .dt-cell__content {
+		padding-right: 16px;
+		padding-right: 1rem;
+		font-weight: bold;
+	}
+
+.dt-cell--header:hover .dt-dropdown__toggle {
+		opacity: 1;
+	}
+
+.dt-cell--tree-close .dt-tree-node__toggle:before {
+			content: '►';
+		}
+
+.dt-dropdown {
+	position: absolute;
+	right: 10px;
+	display: -webkit-inline-box;
+	display: -ms-inline-flexbox;
+	display: inline-flex;
+	vertical-align: top;
+	text-align: left;
+	font-weight: normal;
+	cursor: pointer;
+}
+
+.dt-dropdown__toggle {
+		opacity: 0;
+	}
+
+.dt-dropdown__list {
+		display: none;
+
+		position: absolute;
+		min-width: 128px;
+		min-width: 8rem;
+		top: 100%;
+		right: 0;
+		z-index: 1;
+		background-color: #fff;
+		border-radius: 3px;
+		padding: 8px 0;
+		padding: 0.5rem 0;
+		-webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .1);
+		        box-shadow: 0 2px 3px rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .1);
+	}
+
+.dt-dropdown__list-item {
+		padding: 8px 16px;
+		padding: 0.5rem 1rem;
+	}
+
+.dt-dropdown__list-item:hover {
+			background-color: #f5f7fa;
+		}
+
+.dt-dropdown--active .dt-dropdown__list {
+		display: block;
+	}
+
+.dt-tree-node {
+	display: inline-block;
+	position: relative;
+}
+
+.dt-tree-node__toggle {
+		display: inline-block;
+		position: absolute;
+		font-size: 10px;
+		padding: 0 4px;
+		cursor: pointer;
+	}
+
+.dt-tree-node__toggle:before {
+		content: '▼';
+	}
+
+.dt-toast {
+	position: absolute;
+	bottom: 16px;
+	bottom: 1rem;
+	left: 50%;
+	-webkit-transform: translateX(-50%);
+	        transform: translateX(-50%);
+}
+
+.dt-toast__message {
+		display: inline-block;
+		background-color: rgba(0, 0, 0, .8);
+		color: #dfe2e5;
+		border-radius: 3px;
+		padding: 8px 16px;
+		padding: 0.5rem 1rem;
+	}
+
+.dt-input {
+	outline: none;
+	width: 100%;
+	border: none;
 	overflow: visible;
 	font-family: inherit;
 	font-size: inherit;
 	line-height: inherit;
 	margin: 0;
 	padding: 0;
-	}
+}
 
-.data-table .input-style {
+.dt-freeze {
-		outline: none;
-		width: 100%;
-		border: none;
-	}
-
-.data-table *, .data-table *:focus {
-		outline: none;
-		border-radius: 0px;
-		-webkit-box-shadow: none;
-		        box-shadow: none;
-	}
-
-.data-table table {
-		border-collapse: collapse;
-	}
-
-.data-table table td {
-		padding: 0;
-		border: 1px solid #d1d8dd;
-	}
-
-.data-table thead td {
-		border-bottom-width: 1px;
-	}
-
-.data-table .freeze-container {
 	display: -webkit-box;
 	display: -ms-flexbox;
 	display: flex;
@@ -67,223 +238,20 @@
 	background-color: #f5f7fa;
 	opacity: 0.5;
 	font-size: 2em;
-	}
+}
 
-.data-table .freeze-container span {
+.dt-freeze__message {
 		position: absolute;
 		top: 50%;
 		-webkit-transform: translateY(-50%);
 		        transform: translateY(-50%);
 	}
 
-.data-table .hide {
+.dt-paste-target {
-		display: none;
+	position: fixed;
-	}
+	left: -999em;
-
-.data-table .toast-message {
-		position: absolute;
-		bottom: 16px;
-		bottom: 1rem;
-		left: 50%;
-		-webkit-transform: translateX(-50%);
-		        transform: translateX(-50%);
-	}
-
-.data-table .toast-message span {
-			display: inline-block;
-			background-color: rgba(0, 0, 0, .8);
-			color: #dfe2e5;
-			border-radius: 3px;
-			padding: 8px 16px;
-			padding: 0.5rem 1rem;
-		}
-
-.body-scrollable {
-	max-height: 500px;
-	overflow: auto;
-	border-bottom: 1px solid #d1d8dd;
 }
 
-.body-scrollable.row-highlight-all .data-table-row:not(.row-unhighlight) {
+body.dt-resize {
-		background-color: #f5f7fa;
-	}
-
-.body-scrollable .no-data td {
-		text-align: center;
-		padding: 8px;
-		padding: 0.5rem;
-	}
-
-.data-table-header {
-	position: absolute;
-	top: 0;
-	left: 0;
-	background-color: white;
-	font-weight: bold;
-}
-
-.data-table-header .content span:not(.column-resizer) {
-		cursor: pointer;
-	}
-
-.data-table-header .column-resizer {
-		display: none;
-		position: absolute;
-		right: 0;
-		top: 0;
-		width: 4px;
-		width: 0.25rem;
-		height: 100%;
-		background-color: rgb(82, 146, 247);
-		cursor: col-resize;
-	}
-
-.data-table-header .data-table-dropdown {
-		position: absolute;
-		right: 10px;
-		display: -webkit-inline-box;
-		display: -ms-inline-flexbox;
-		display: inline-flex;
-		vertical-align: top;
-		text-align: left;
-	}
-
-.data-table-header .data-table-dropdown.is-active .data-table-dropdown-list {
-				display: block;
-			}
-
-.data-table-header .data-table-dropdown.is-active .data-table-dropdown-toggle {
-				display: block;
-			}
-
-.data-table-header .data-table-dropdown-toggle {
-		display: none;
-		background-color: transparent;
-		border: none;
-	}
-
-.data-table-header .data-table-dropdown-list {
-		display: none;
-		font-weight: normal;
-
-		position: absolute;
-		min-width: 128px;
-		min-width: 8rem;
-		top: 100%;
-		right: 0;
-		z-index: 1;
-		background-color: white;
-		border-radius: 3px;
-		-webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .1);
-		        box-shadow: 0 2px 3px rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .1);
-		padding-bottom: 8px;
-		padding-bottom: 0.5rem;
-		padding-top: 8px;
-		padding-top: 0.5rem;
-	}
-
-.data-table-header .data-table-dropdown-list> div {
-			padding: 8px 16px;
-			padding: 0.5rem 1rem;
-		}
-
-.data-table-header .data-table-dropdown-list> div:hover {
-				background-color: #f5f7fa;
-			}
-
-.data-table-header .data-table-cell.remove-column {
-		background-color: #FD8B8B;
-		-webkit-transition: 300ms background-color ease-in-out;
-		transition: 300ms background-color ease-in-out;
-	}
-
-.data-table-header .data-table-cell.sortable-chosen {
-		background-color: #f5f7fa;
-	}
-
-.data-table-cell {
-	position: relative;
-}
-
-.data-table-cell .content {
-		padding: 8px;
-		padding: 0.5rem;
-		border: 2px solid transparent;
-		height: 100%;
-	}
-
-.data-table-cell .content.ellipsis {
-			text-overflow: ellipsis;
-			white-space: nowrap;
-			overflow: hidden;
-		}
-
-.data-table-cell .edit-cell {
-		display: none;
-		padding: 8px;
-		padding: 0.5rem;
-		background-color: #fff;
-		z-index: 1;
-		height: 100%;
-	}
-
-.data-table-cell.selected .content {
-		border: 2px solid rgb(82, 146, 247);
-	}
-
-.data-table-cell.editing .content {
-			display: none;
-		}
-
-.data-table-cell.editing .edit-cell {
-			border: 2px solid rgb(255, 160, 10);
-			display: block;
-		}
-
-.data-table-cell.highlight {
-		background-color: #f5f7fa;
-	}
-
-.data-table-cell:hover .column-resizer {
-		display: inline-block;
-	}
-
-.data-table-cell:hover .data-table-dropdown-toggle {
-		display: block;
-	}
-
-.data-table-cell .tree-node {
-		display: inline-block;
-		position: relative;
-	}
-
-.data-table-cell .toggle {
-		display: inline-block;
-		position: absolute;
-		padding: 0 4px;
-		cursor: pointer;
-	}
-
-.data-table-cell .toggle:before {
-		content: '▼';
-	}
-
-.data-table-cell.tree-close .toggle:before {
-		content: '►';
-	}
-
-.data-table-row.row-highlight {
-    background-color: #f5f7fa;
-  }
-
-.noselect {
-	-webkit-touch-callout: none;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-body.data-table-resize {
 	cursor: col-resize;
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-datatable",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "A modern datatable library for the web",
   "main": "dist/frappe-datatable.cjs.js",
   "scripts": {