Create docs folder, add index.html

.eslintrc

@@ -55,7 +55,7 @@
     "generator-star-spacing": [2, "both"],
     "guard-for-in": 0,
     "handle-callback-err": [2, "^(err|error|anySpecificError)$" ],
-    "indent": [2, 2, { "SwitchCase": 1 }],
+    "indent": [2, 4, { "SwitchCase": 1 }],
     "key-spacing": [2, { "beforeColon": false, "afterColon": true }],
     "keyword-spacing": [2, {"before": true, "after": true}],
     "linebreak-style": 0,

dist/frappe-datatable.cjs.css

@@ -0,0 +1,254 @@
+/* variables */
+
+.data-table {
+
+	/* styling */
+	width: 100%;
+	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 {
+		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: 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;
+		-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: 0.5;
+		font-size: 2em;
+	}
+
+.data-table .freeze-container span {
+			position: absolute;
+			top: 50%;
+			-webkit-transform: translateY(-50%);
+			        transform: translateY(-50%);
+		}
+
+.data-table .trash-container {
+		position: absolute;
+		bottom: 0;
+		left: 30%;
+		right: 30%;
+		height: 70px;
+		background: palevioletred;
+		opacity: 0.5;
+	}
+
+.data-table .hide {
+		display: none;
+	}
+
+.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;
+	}
+
+.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-col.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-col.sortable-chosen {
+		background-color: #f5f7fa;
+	}
+
+.data-table-col {
+	position: relative;
+}
+
+.data-table-col .content {
+		padding: 8px;
+		padding: 0.5rem;
+		border: 2px solid transparent;
+	}
+
+.data-table-col .content.ellipsis {
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			overflow: hidden;
+		}
+
+.data-table-col .edit-cell {
+		display: none;
+		padding: 8px;
+		padding: 0.5rem;
+		background: #fff;
+		z-index: 1;
+		height: 100%;
+	}
+
+.data-table-col.selected .content {
+		border: 2px solid rgb(82, 146, 247);
+	}
+
+.data-table-col.editing .content {
+			display: none;
+		}
+
+.data-table-col.editing .edit-cell {
+			border: 2px solid rgb(82, 146, 247);
+			display: block;
+		}
+
+.data-table-col.highlight {
+		background-color: #f5f7fa;
+	}
+
+.data-table-col:hover .column-resizer {
+		display: inline-block;
+	}
+
+.data-table-col:hover .data-table-dropdown-toggle {
+		display: block;
+	}
+
+.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;
+}

dist/frappe-datatable.cjs.js

@@ -211,12 +211,10 @@ 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. */
@@ -224,34 +222,16 @@ 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. */
@@ -319,7 +299,6 @@ function objectToString(value) {
 
 var _objectToString = objectToString;
 
-/** `Object#toString` result references. */
 var nullTag = '[object Null]';
 var undefinedTag = '[object Undefined]';
 
@@ -374,7 +353,6 @@ function isObjectLike(value) {
 
 var isObjectLike_1 = isObjectLike;
 
-/** `Object#toString` result references. */
 var symbolTag = '[object Symbol]';
 
 /**
@@ -401,7 +379,6 @@ 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. */
@@ -465,7 +442,6 @@ 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. */
@@ -652,7 +628,6 @@ function debounce(func, wait, options) {
 
 var debounce_1 = debounce;
 
-/** Error message constants. */
 var FUNC_ERROR_TEXT$1 = 'Expected a function';
 
 /**
@@ -2799,8 +2774,8 @@ class Style {
                 // width based on rowCount
                 const rowCount = this.datamanager.getRowCount();
                 const digits = (rowCount + '').length;
-        if (digits > 2) {
+                if (digits > 1) {
-          naturalWidth = naturalWidth + ((digits - 2) * 8);
+                    naturalWidth = naturalWidth + ((digits - 1) * 8);
                 }
             }
 
@@ -2840,7 +2815,8 @@ class Style {
 
     setDefaultCellHeight() {
         if (this.__cellHeightSet) return;
-    const height = this.options.cellHeight || $.style($('.data-table-col', this.instance.datatableWrapper), 'height');
+        const height = this.options.cellHeight ||
+            $.style($('.data-table-col', this.instance.datatableWrapper), 'height');
         if (height) {
             this.setCellHeight(height);
             this.__cellHeightSet = true;

dist/frappe-datatable.js

@@ -210,12 +210,10 @@ 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. */
@@ -223,34 +221,16 @@ 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. */
@@ -318,7 +298,6 @@ function objectToString(value) {
 
 var _objectToString = objectToString;
 
-/** `Object#toString` result references. */
 var nullTag = '[object Null]';
 var undefinedTag = '[object Undefined]';
 
@@ -373,7 +352,6 @@ function isObjectLike(value) {
 
 var isObjectLike_1 = isObjectLike;
 
-/** `Object#toString` result references. */
 var symbolTag = '[object Symbol]';
 
 /**
@@ -400,7 +378,6 @@ 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. */
@@ -464,7 +441,6 @@ 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. */
@@ -651,7 +627,6 @@ function debounce(func, wait, options) {
 
 var debounce_1 = debounce;
 
-/** Error message constants. */
 var FUNC_ERROR_TEXT$1 = 'Expected a function';
 
 /**
@@ -2798,8 +2773,8 @@ class Style {
                 // width based on rowCount
                 const rowCount = this.datamanager.getRowCount();
                 const digits = (rowCount + '').length;
-        if (digits > 2) {
+                if (digits > 1) {
-          naturalWidth = naturalWidth + ((digits - 2) * 8);
+                    naturalWidth = naturalWidth + ((digits - 1) * 8);
                 }
             }
 
@@ -2839,7 +2814,8 @@ class Style {
 
     setDefaultCellHeight() {
         if (this.__cellHeightSet) return;
-    const height = this.options.cellHeight || $.style($('.data-table-col', this.instance.datatableWrapper), 'height');
+        const height = this.options.cellHeight ||
+            $.style($('.data-table-col', this.instance.datatableWrapper), 'height');
         if (height) {
             this.setCellHeight(height);
             this.__cellHeightSet = true;

docs/frappe-datatable.css

@@ -0,0 +1,254 @@
+/* variables */
+
+.data-table {
+
+	/* styling */
+	width: 100%;
+	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 {
+		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: 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;
+		-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: 0.5;
+		font-size: 2em;
+	}
+
+.data-table .freeze-container span {
+			position: absolute;
+			top: 50%;
+			-webkit-transform: translateY(-50%);
+			        transform: translateY(-50%);
+		}
+
+.data-table .trash-container {
+		position: absolute;
+		bottom: 0;
+		left: 30%;
+		right: 30%;
+		height: 70px;
+		background: palevioletred;
+		opacity: 0.5;
+	}
+
+.data-table .hide {
+		display: none;
+	}
+
+.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;
+	}
+
+.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-col.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-col.sortable-chosen {
+		background-color: #f5f7fa;
+	}
+
+.data-table-col {
+	position: relative;
+}
+
+.data-table-col .content {
+		padding: 8px;
+		padding: 0.5rem;
+		border: 2px solid transparent;
+	}
+
+.data-table-col .content.ellipsis {
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			overflow: hidden;
+		}
+
+.data-table-col .edit-cell {
+		display: none;
+		padding: 8px;
+		padding: 0.5rem;
+		background: #fff;
+		z-index: 1;
+		height: 100%;
+	}
+
+.data-table-col.selected .content {
+		border: 2px solid rgb(82, 146, 247);
+	}
+
+.data-table-col.editing .content {
+			display: none;
+		}
+
+.data-table-col.editing .edit-cell {
+			border: 2px solid rgb(82, 146, 247);
+			display: block;
+		}
+
+.data-table-col.highlight {
+		background-color: #f5f7fa;
+	}
+
+.data-table-col:hover .column-resizer {
+		display: inline-block;
+	}
+
+.data-table-col:hover .data-table-dropdown-toggle {
+		display: block;
+	}
+
+.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;
+}

docs/index.css

@@ -0,0 +1,32 @@
+*, *::after, *::before {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+}
+
+html, body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-size: 14px;
+}
+
+h1 {
+    font-size: 3rem;
+    margin: 1rem 0;
+}
+
+.hero {
+    margin: 0 auto;
+    padding: 4rem;
+    text-align: center;
+}
+
+.hero p {
+    font-size: 2rem;
+    margin: 1rem 0;
+}
+
+.datatable-1 {
+    width: 735px;
+    margin: 0 auto;
+    margin-top: 2rem;
+}

docs/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Frappe DataTable - A simple, modern datatable library for the web</title>
+    <link href="frappe-datatable.css" rel="stylesheet">
+    <link href="index.css" rel="stylesheet">
+</head>
+<body>
+    <section class="hero">
+        <h1>Frappe DataTable</h1>
+        <p>A simple, modern and interactive datatable for the web</p>
+        <div class="datatable-1"></div>
+    </section>
+    <script src="../node_modules/clusterize.js/clusterize.js"></script>
+	<script src="../node_modules/sortablejs/Sortable.js"></script>
+    <script src="frappe-datatable.js"></script>
+    <script src="index.js"></script>
+</body>
+</html>

docs/index.js

@@ -0,0 +1,81 @@
+/* global DataTable */
+
+const { columns, data } = getSampleData();
+
+let datatable1 = new DataTable('.datatable-1', {
+    columns,
+    data
+});
+
+console.log(datatable1);
+
+function getSampleData(multiplier) {
+    let columns = ['Name', 'Position', 'Office', 'Extn.', 'Start Date', 'Salary'];
+    let data = [
+        ['Tiger Nixon', 'System Architect', 'Edinburgh', '5421', '2011/04/25', '$320,800'],
+        ['Garrett Winters', 'Accountant', 'Tokyo', '8422', '2011/07/25', '$170,750'],
+        ['Ashton Cox', 'Junior Technical Author', 'San Francisco', '1562', '2009/01/12', '$86,000'],
+        ['Cedric Kelly', 'Senior Javascript Developer', 'Edinburgh', '6224', '2012/03/29', '$433,060'],
+        ['Airi Satou', 'Accountant', 'Tokyo', '5407', '2008/11/28', '$162,700'],
+        ['Brielle Williamson', 'Integration Specialist', 'New York', '4804', '2012/12/02', '$372,000'],
+        ['Herrod Chandler', 'Sales Assistant', 'San Francisco', '9608', '2012/08/06', '$137,500'],
+        ['Rhona Davidson', 'Integration Specialist', 'Tokyo', '6200', '2010/10/14', '$327,900'],
+        ['Colleen Hurst', 'Javascript Developer', 'San Francisco', '2360', '2009/09/15', '$205,500'],
+        ['Sonya Frost', 'Software Engineer', 'Edinburgh', '1667', '2008/12/13', '$103,600'],
+        ['Jena Gaines', 'Office Manager', 'London', '3814', '2008/12/19', '$90,560'],
+        ['Quinn Flynn', 'Support Lead', 'Edinburgh', '9497', '2013/03/03', '$342,000'],
+        ['Charde Marshall', 'Regional Director', 'San Francisco', '6741', '2008/10/16', '$470,600'],
+        ['Haley Kennedy', 'Senior Marketing Designer', 'London', '3597', '2012/12/18', '$313,500'],
+        ['Tatyana Fitzpatrick', 'Regional Director', 'London', '1965', '2010/03/17', '$385,750'],
+        ['Michael Silva', 'Marketing Designer', 'London', '1581', '2012/11/27', '$198,500'],
+        ['Paul Byrd', 'Chief Financial Officer (CFO)', 'New York', '3059', '2010/06/09', '$725,000'],
+        ['Gloria Little', 'Systems Administrator', 'New York', '1721', '2009/04/10', '$237,500'],
+        ['Bradley Greer', 'Software Engineer', 'London', '2558', '2012/10/13', '$132,000'],
+        ['Dai Rios', 'Personnel Lead', 'Edinburgh', '2290', '2012/09/26', '$217,500'],
+        ['Jenette Caldwell', 'Development Lead', 'New York', '1937', '2011/09/03', '$345,000'],
+        ['Yuri Berry', 'Chief Marketing Officer (CMO)', 'New York', '6154', '2009/06/25', '$675,000'],
+        ['Caesar Vance', 'Pre-Sales Support', 'New York', '8330', '2011/12/12', '$106,450'],
+        ['Doris Wilder', 'Sales Assistant', 'Sidney', '3023', '2010/09/20', '$85,600'],
+        ['Angelica Ramos', 'Chief Executive Officer (CEO)', 'London', '5797', '2009/10/09', '$1,200,000'],
+        ['Gavin Joyce', 'Developer', 'Edinburgh', '8822', '2010/12/22', '$92,575'],
+        ['Jennifer Chang', 'Regional Director', 'Singapore', '9239', '2010/11/14', '$357,650'],
+        ['Brenden Wagner', 'Software Engineer', 'San Francisco', '1314', '2011/06/07', '$206,850'],
+        ['Fiona Green', 'Chief Operating Officer (COO)', 'San Francisco', '2947', '2010/03/11', '$850,000'],
+        ['Shou Itou', 'Regional Marketing', 'Tokyo', '8899', '2011/08/14', '$163,000'],
+        ['Michelle House', 'Integration Specialist', 'Sidney', '2769', '2011/06/02', '$95,400'],
+        ['Suki Burks', 'Developer', 'London', '6832', '2009/10/22', '$114,500'],
+        ['Prescott Bartlett', 'Technical Author', 'London', '3606', '2011/05/07', '$145,000'],
+        ['Gavin Cortez', 'Team Leader', 'San Francisco', '2860', '2008/10/26', '$235,500'],
+        ['Martena Mccray', 'Post-Sales support', 'Edinburgh', '8240', '2011/03/09', '$324,050'],
+        ['Unity Butler', 'Marketing Designer', 'San Francisco', '5384', '2009/12/09', '$85,675'],
+        ['Howard Hatfield', 'Office Manager', 'San Francisco', '7031', '2008/12/16', '$164,500'],
+        ['Hope Fuentes', 'Secretary', 'San Francisco', '6318', '2010/02/12', '$109,850'],
+        ['Vivian Harrell', 'Financial Controller', 'San Francisco', '9422', '2009/02/14', '$452,500'],
+        ['Timothy Mooney', 'Office Manager', 'London', '7580', '2008/12/11', '$136,200'],
+        ['Jackson Bradshaw', 'Director', 'New York', '1042', '2008/09/26', '$645,750'],
+        ['Olivia Liang', 'Support Engineer', 'Singapore', '2120', '2011/02/03', '$234,500'],
+        ['Bruno Nash', 'Software Engineer', 'London', '6222', '2011/05/03', '$163,500'],
+        ['Sakura Yamamoto', 'Support Engineer', 'Tokyo', '9383', '2009/08/19', '$139,575'],
+        ['Thor Walton', 'Developer', 'New York', '8327', '2013/08/11', '$98,540'],
+        ['Finn Camacho', 'Support Engineer', 'San Francisco', '2927', '2009/07/07', '$87,500'],
+        ['Serge Baldwin', 'Data Coordinator', 'Singapore', '8352', '2012/04/09', '$138,575'],
+        ['Zenaida Frank', 'Software Engineer', 'New York', '7439', '2010/01/04', '$125,250'],
+        ['Zorita Serrano', 'Software Engineer', 'San Francisco', '4389', '2012/06/01', '$115,000'],
+        ['Jennifer Acosta', 'Junior Javascript Developer', 'Edinburgh', '3431', '2013/02/01', '$75,650'],
+        ['Cara Stevens', 'Sales Assistant', 'New York', '3990', '2011/12/06', '$145,600'],
+        ['Hermione Butler', 'Regional Director', 'London', '1016', '2011/03/21', '$356,250'],
+        ['Lael Greer', 'Systems Administrator', 'London', '6733', '2009/02/27', '$103,500'],
+        ['Jonas Alexander', 'Developer', 'San Francisco', '8196', '2010/07/14', '$86,500'],
+        ['Shad Decker', 'Regional Director', 'Edinburgh', '6373', '2008/11/13', '$183,000'],
+        ['Michael Bruce', 'Javascript Developer', 'Singapore', '5384', '2011/06/27', '$183,000'],
+        ['Donna Snider', 'Customer Support', 'New York', '4226', '2011/01/25', '$112,000']
+    ];
+
+    if (multiplier) {
+        Array.from(new Array(multiplier - 1)).forEach(d => {
+            data = data.concat(data);
+        });
+    }
+
+    return { columns, data };
+}

rollup.config.js

@@ -9,7 +9,7 @@ import cssnext from 'postcss-cssnext';
 
 const dev = {
     input: 'src/index.js',
-  output: {
+    output: [{
         file: 'dist/frappe-datatable.js',
         format: 'iife',
         name: 'DataTable',
@@ -17,13 +17,21 @@ const dev = {
             sortablejs: 'Sortable',
             'clusterize.js': 'Clusterize'
         }
-  },
+    }, {
+        file: 'docs/frappe-datatable.js',
+        format: 'iife',
+        name: 'DataTable',
+        globals: {
+            sortablejs: 'Sortable',
+            'clusterize.js': 'Clusterize'
+        }
+    }],
     plugins: [
         json(),
         nodeResolve(),
         commonjs(),
         postcss({
-      extract: 'dist/frappe-datatable.css',
+            extract: ['dist/frappe-datatable.css', 'docs/frappe-datatable.css'],
             plugins: [
                 nested(),
                 cssnext()
@@ -33,9 +41,12 @@ const dev = {
     external: ['sortablejs', 'clusterize.js']
 };
 
-export default [dev, Object.assign({}, dev, {
+export default [
+    dev,
+    Object.assign({}, dev, {
         output: {
             format: 'cjs',
             file: 'dist/frappe-datatable.cjs.js'
         }
-})];
+    })
+];

src/style.js

@@ -129,8 +129,8 @@ export default class Style {
                 // width based on rowCount
                 const rowCount = this.datamanager.getRowCount();
                 const digits = (rowCount + '').length;
-        if (digits > 2) {
+                if (digits > 1) {
-          naturalWidth = naturalWidth + ((digits - 2) * 8);
+                    naturalWidth = naturalWidth + ((digits - 1) * 8);
                 }
             }
 
@@ -170,7 +170,8 @@ export default class Style {
 
     setDefaultCellHeight() {
         if (this.__cellHeightSet) return;
-    const height = this.options.cellHeight || $.style($('.data-table-col', this.instance.datatableWrapper), 'height');
+        const height = this.options.cellHeight ||
+            $.style($('.data-table-col', this.instance.datatableWrapper), 'height');
         if (height) {
             this.setCellHeight(height);
             this.__cellHeightSet = true;