diff --git a/frappe/build.py b/frappe/build.py
index e58f676eb6..5837f28d2f 100644
--- a/frappe/build.py
+++ b/frappe/build.py
@@ -26,20 +26,28 @@ def setup():
 
 def bundle(no_compress, make_copy=False, restore=False, verbose=False):
 	"""concat / minify js files"""
-	# build js files
 	setup()
 	make_asset_dirs(make_copy=make_copy, restore=restore)
 
+	check_yarn()
 	command = 'yarn run build' if no_compress else 'yarn run production'
-	frappe_app_path = os.path.abspath(os.path.join(app_paths[0], '..'))
-	subprocess.call(command.split(" "), cwd=frappe_app_path)
+	frappe_app_path = frappe.get_app_path('frappe', '..')
+	frappe.commands.popen(command, cwd=frappe_app_path)
 
 def watch(no_compress):
 	"""watch and rebuild if necessary"""
 	setup()
 
-	frappe_app_path = os.path.abspath(os.path.join(app_paths[0], '..'))
-	subprocess.call('yarn run watch'.split(" "), cwd = frappe_app_path)
+	check_yarn()
+	frappe_app_path = frappe.get_app_path('frappe', '..')
+	frappe.commands.popen('yarn run watch', cwd = frappe_app_path)
+
+def check_yarn():
+	from distutils.spawn import find_executable
+	if not find_executable('yarn'):
+		print('Please install yarn using below command and try again.')
+		print('npm install -g yarn')
+		return
 
 def make_asset_dirs(make_copy=False, restore=False):
 	# don't even think of making assets_path absolute - rm -rf ahead.
diff --git a/frappe/public/build.json b/frappe/public/build.json
index af37eedbe7..2be4c47a05 100755
--- a/frappe/public/build.json
+++ b/frappe/public/build.json
@@ -352,7 +352,6 @@
 	"css/report.min.css": [
 		"public/less/report.less",
 		"public/css/tree_grid.css",
-		"public/less/frappe-datatable.less",
 
 		"public/js/lib/slickgrid/slick.grid.css",
 		"public/js/lib/slickgrid/slick-default-theme.css",
diff --git a/frappe/public/js/frappe/views/reports/report_view.js b/frappe/public/js/frappe/views/reports/report_view.js
index fa13397614..4b43ff7ea2 100644
--- a/frappe/public/js/frappe/views/reports/report_view.js
+++ b/frappe/public/js/frappe/views/reports/report_view.js
@@ -1,6 +1,9 @@
 /**
  * frappe.views.ReportView
  */
+import DataTable from 'frappe-datatable';
+import 'frappe-datatable/dist/frappe-datatable.css';
+import '../../../../less/frappe-datatable.less';
 frappe.provide('frappe.views');
 
 frappe.views.ReportView = class ReportView extends frappe.views.ListView {
@@ -146,7 +149,7 @@ frappe.views.ReportView = class ReportView extends frappe.views.ListView {
 			enableClusterize: true,
 			addCheckbox: this.can_delete,
 			takeAvailableSpace: true,
-			editing: this.get_editing_object.bind(this),
+			getEditor: this.get_editing_object.bind(this),
 			events: {
 				onRemoveColumn: (column) => {
 					this.remove_column_from_datatable(column);
@@ -740,7 +743,7 @@ frappe.views.ReportView = class ReportView extends frappe.views.ListView {
 			docfield: docfield,
 			name: title,
 			content: title,
-			width: (docfield ? cint(docfield.width) : 120) || 120,
+			width: (docfield ? cint(docfield.width) : null) || null,
 			editable: editable
 		};
 	}
diff --git a/frappe/public/less/frappe-datatable.less b/frappe/public/less/frappe-datatable.less
index ff6454b6df..7a1c3a1271 100644
--- a/frappe/public/less/frappe-datatable.less
+++ b/frappe/public/less/frappe-datatable.less
@@ -10,10 +10,14 @@
 
 		input {
 			font-size: inherit;
-			height: 34px;
+			height: 27px;
 		}
 	}
 
+	.data-table-col .content {
+		padding: 0.5rem;
+	}
+
 	.frappe-control {
 		margin: 0;
 	}
@@ -28,7 +32,7 @@
 		top: 6px;
 	}
 	select {
-		height: 34px;
+		height: 27px;
 	}
 
 	.checkbox {
diff --git a/package.json b/package.json
index 5e928bb470..9505ab8820 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "scripts": {
     "build": "rollup -c",
     "production": "FRAPPE_ENV=production rollup -c",
-    "watch": "rollup -c -w --silent"
+    "watch": "rollup -c -w"
   },
   "repository": {
     "type": "git",
@@ -18,6 +18,7 @@
   "dependencies": {
     "cookie": "^0.3.1",
     "express": "^4.16.2",
+    "frappe-datatable": "frappe/datatable",
     "redis": "^2.8.0",
     "showdown": "^1.8.6",
     "socket.io": "^2.0.4",
diff --git a/rollup.config.js b/rollup.config.js
index 005a27823d..f163581f30 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -20,7 +20,7 @@ const frappe_html = require('./frappe-html-plugin');
 
 const production = process.env.FRAPPE_ENV === 'production';
 
-make_js_css_dirs();
+ensure_js_css_dirs();
 build_libs();
 
 function get_app_config(app) {
@@ -61,17 +61,31 @@ function get_app_config(app) {
 
 function get_js_config(output_file, input_files) {
 
+	const css_output_file = path.resolve(assets_path, 'css', path.basename(output_file).split('.js')[0] + '.css');
+
 	const plugins = [
 		// enables array of inputs
 		multi_entry(),
 		// .html -> .js
 		frappe_html(),
+		// less -> css
+		less({
+			output: css_output_file,
+			option: {
+				// so that other .less files can import variables.less from frappe directly
+				paths: [path.resolve(get_public_path('frappe'), 'less'), path.resolve(get_app_path('frappe'), '..')],
+				compress: production
+			},
+			// include: [path.resolve(bench_path, '**/*.less'), path.resolve(bench_path, '**/*.css')],
+			exclude: []
+		}),
 		// ES6 -> ES5
 		buble({
 			objectAssign: 'Object.assign',
 			transforms: {
 				dangerousForOf: true
-			}
+			},
+			exclude: [path.resolve(bench_path, '**/*.css'), path.resolve(bench_path, '**/*.less')]
 		}),
 		commonjs(),
 		node_resolve(),
@@ -85,15 +99,13 @@ function get_js_config(output_file, input_files) {
 			file: path.resolve(assets_path, output_file),
 			format: 'iife',
 			name: 'Rollup',
-			globals: {
-				'sortablejs': 'window.Sortable',
-				'clusterize.js': 'window.Clusterize'
-			}
+			// globals: {
+			// 	'sortablejs': 'window.Sortable',
+			// 	'clusterize.js': 'window.Clusterize'
+			// },
+			sourcemap: true
 		},
 		context: 'window',
-		onwarn: (e) => {
-			if (e.code === 'EVAL') return;
-		},
 		external: ['jquery']
 	};
 }
@@ -126,7 +138,7 @@ function get_css_config(output_file, input_files) {
 	};
 }
 
-function make_js_css_dirs() {
+function ensure_js_css_dirs() {
 	const paths = [
 		path.resolve(assets_path, 'js'),
 		path.resolve(assets_path, 'css')
@@ -136,6 +148,14 @@ function make_js_css_dirs() {
 			fs.mkdirSync(path);
 		}
 	});
+
+	// clear files in css folder
+	const css_path = path.resolve(assets_path, 'css');
+	const files = fs.readdirSync(css_path);
+
+	files.forEach(file => {
+		fs.unlinkSync(path.resolve(css_path, file));
+	});
 }
 
 function build_libs() {
diff --git a/yarn.lock b/yarn.lock
index a082a32beb..0c9a5ed265 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -236,6 +236,10 @@ cliui@^4.0.0:
     strip-ansi "^4.0.0"
     wrap-ansi "^2.0.0"
 
+clusterize.js@^0.18.0:
+  version "0.18.1"
+  resolved "https://registry.yarnpkg.com/clusterize.js/-/clusterize.js-0.18.1.tgz#a286a9749bd1fa9c2fe21b7fabd8780a590dd836"
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -602,6 +606,13 @@ forwarded@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
 
+frappe-datatable@frappe/datatable:
+  version "0.0.2"
+  resolved "https://codeload.github.com/frappe/datatable/tar.gz/3c4198fc8354a018c98e37287b946da692a9265d"
+  dependencies:
+    clusterize.js "^0.18.0"
+    sortablejs "^1.7.0"
+
 fresh@0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
@@ -1573,6 +1584,10 @@ socket.io@^2.0.4:
     socket.io-client "2.0.4"
     socket.io-parser "~3.1.1"
 
+sortablejs@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.7.0.tgz#80a2b2370abd568e1cec8c271131ef30a904fa28"
+
 source-map-support@^0.4.0:
   version "0.4.18"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.18.tgz#0286a6de8be42641338594e97ccea75f0a2c585f"