diff --git a/frappe/public/build.json b/frappe/public/build.json
index 8dd323528d..e670e3f8e3 100755
--- a/frappe/public/build.json
+++ b/frappe/public/build.json
@@ -357,11 +357,12 @@
 		"public/js/frappe/views/reports/report_factory.js",
 		"public/js/frappe/views/reports/report_view.js",
 		"public/js/frappe/views/reports/reportview_footer.html",
-		"public/js/frappe/views/reports/groupby.html",
 		"public/js/frappe/views/reports/query_report.js",
 		"public/js/frappe/views/reports/grid_report.js",
 		"public/js/frappe/views/reports/print_grid.html",
-		"public/js/frappe/views/reports/print_tree.html"
+		"public/js/frappe/views/reports/print_tree.html",
+		"public/js/frappe/ui/group_by/group_by.html",
+		"public/js/frappe/ui/group_by/group_by.js"
 	],
 	"js/web_form.min.js": [
 		"public/js/frappe/misc/datetime.js",
diff --git a/frappe/public/js/frappe/views/reports/groupby.html b/frappe/public/js/frappe/ui/group_by/group_by.html
similarity index 100%
rename from frappe/public/js/frappe/views/reports/groupby.html
rename to frappe/public/js/frappe/ui/group_by/group_by.html
diff --git a/frappe/public/js/frappe/ui/group_by/group_by.js b/frappe/public/js/frappe/ui/group_by/group_by.js
new file mode 100644
index 0000000000..81b6a4914b
--- /dev/null
+++ b/frappe/public/js/frappe/ui/group_by/group_by.js
@@ -0,0 +1,137 @@
+
+frappe.provide('frappe.views');
+
+frappe.ui.GroupBy = class {
+
+	constructor(report_view) {
+		this.report_view = report_view;
+		this.page = report_view.page;
+		this.doctype = report_view.doctype;
+		this.setup_group_by_area();
+	}
+
+	setup_group_by_area() {
+
+		this.make_group_by_button();
+		this.report_view.setup_columns();
+		let sql_aggregate_function = [{name:'count', label: 'Count'}, {name:'sum', label: 'Sum'}, {name:'avg', label:'Average'}];
+		this.groupby_edit_area = $(frappe.render_template("group_by", {
+			groupby_conditions: this.get_group_by_fields(),
+			aggregate_function_conditions: sql_aggregate_function,
+		}));
+		$(".aggregate-function").val("count");
+		this.page.wrapper.find(".frappe-list").append(
+			this.groupby_edit_area);
+
+		//Set aggregate on options as numeric fields if function is sum or average
+		$('.aggregate-function').on('change', () => {
+			this.report_view.meta.fields.forEach((field) => {
+				let fn = $('.aggregate-function option:selected').val();
+				if(fn === 'sum' || fn === 'avg') {
+					if(frappe.model.is_numeric_field(field.fieldtype)) {
+						$('.aggregate-on')
+							.append($('<option>', { value : field.fieldname })
+								.text(field.label));
+					}
+					$('.aggregate-on').show();
+				} else {
+					$('.aggregate-on').hide();
+				}
+			});
+		});
+
+		$('.set-groupby-and-run').on('click', () => {
+			this.apply_group_by();
+		});
+
+		$('.remove-groupby').on('click', () => {
+			this.remove_group_by();
+		});
+	}
+
+	make_group_by_button() {
+		let group_by_button =  $(`<div class="tag-groupby-area">
+			<div class="active-tag-groupby">
+				<button class="btn btn-default btn-xs add-groupby text-muted">
+						${__("Add Group")}
+				</button>
+			</div>
+		</div>`);
+		this.page.wrapper.find(".sort-selector").before(group_by_button);
+		group_by_button.click(() => this.groupby_edit_area.show());
+	}
+
+	apply_group_by() {
+		this.group_by = this.page.wrapper.find('.groupby option:selected').val();
+		this.aggregate_function = this.page.wrapper.find('.aggregate-function option:selected').val();
+		this.aggregate_on = this.page.wrapper.find('.aggregate-on option:selected').val();
+
+		//All necessary fields must be set before applying group by
+		if(!this.group_by) {
+			this.page.wrapper.find('.groupby').focus();
+			return;
+		} else if(!this.aggregate_function) {
+			this.page.wrapper.find('.aggregate-function').focus();
+			return;
+		} else if(!this.aggregate_on && this.aggregate_function!=='count') {
+			this.page.wrapper.find('.aggregate-on').focus();
+			return;
+		}
+
+		//If chosen group by field is not in fields, push it to fields
+		if(!this.report_view.columns.includes(this.group_by)) {
+			this.report_view.fields.push(this.group_by);
+		}
+
+		//If function is count add a new field for count
+		if(this.aggregate_function === 'count') {
+			let group_by_query = 'count(' + this.report_view.field_type + '.'+ this.group_by+') as ' + this.group_by + '_Count';
+			this.report_view.fields.push([group_by_query, this.doctype]);
+			this.order_by = this.group_by + '_Count desc';
+		} else {
+			//If chosen 'aggregate on' field is not in fields, push it to fields
+			if(!this.report_view.columns.includes(this.aggregate_on)) {
+				this.report_view.fields.push(this.aggregate_on);
+			}
+			this.order_by = this.aggregate_on + ' desc';
+		}
+
+		$('.set-groupby-and-run').hide();
+
+		//Get current columns so that they can be restored when group by is removed
+		this.current_cols = this.report_view.columns;
+
+		let remove_columns = this.report_view.columns.filter(column => ![this.aggregate_on, this.group_by].includes(column.field));
+		remove_columns.forEach((col) => {
+			this.report_view.remove_column_from_datatable(col);
+		});
+
+		if(this.report_view.columns[0]) {
+			this.removed_previous_width = this.report_view.columns[0].docfield.width;
+			this.report_view.columns[0].docfield.width = 400;
+		}
+	}
+
+	remove_group_by() {
+		this.report_view.columns[0].docfield.width = this.removed_previous_width;
+		this.order_by = '';
+		this.groupby_edit_area.hide();
+		$('.set-groupby-and-run').show();
+		this.group_by = null;
+		this.aggregate_function = null;
+		this.aggregate_on = null;
+		$(".groupby").val("");
+		$(".aggregate-function").val("count");
+		$(".aggregate-on").val("").hide();
+		//Add the removed columns
+		this.current_cols.forEach((col, i) => {
+			this.report_view.add_column_to_datatable(col.field, this.doctype, i);
+		});
+		this.report_view.fields.pop();
+		this.report_view.setup_columns();
+	}
+
+	get_group_by_fields() {
+		return this.report_view.meta.fields.filter((f)=> ["Select", "Link"].includes(f.fieldtype));
+	}
+};
diff --git a/frappe/public/js/frappe/views/reports/report_view.js b/frappe/public/js/frappe/views/reports/report_view.js
index b60e4e6e15..59bd32c61c 100644
--- a/frappe/public/js/frappe/views/reports/report_view.js
+++ b/frappe/public/js/frappe/views/reports/report_view.js
@@ -68,116 +68,15 @@ frappe.views.ReportView = class ReportView extends frappe.views.ListView {
 		});
 
 		//Setup groupby for reports
-		this.setup_groupby_area();
+		this.group_by_control = new frappe.ui.GroupBy(this);
 	}
 
-	make_groupby_button() {
-		let group_by_button =  $(`<div class="tag-groupby-area">
-								<div class="active-tag-groupby">
-									<button class="btn btn-default btn-xs add-groupby text-muted">
-											${__("Add Group")}
-									</button>
-								</div>
-							</div>`);
-		this.page.wrapper.find(".sort-selector").before(group_by_button);
-		group_by_button.click(() => this.groupby_edit_area.show());
-	}
-
-	setup_groupby_area() {
-		this.make_groupby_button();
-		let current_cols=[];
-		let sql_aggregate_function = [{name:'count', label: 'Count'}, {name:'sum', label: 'Sum'}, {name:'avg', label:'Average'}];
-		this.groupby_edit_area = $(frappe.render_template("groupby", {
-			groupby_conditions: this.get_group_by_fields(),
-			aggregate_function_conditions: sql_aggregate_function,
-		}));
-		$(".aggregate-function").val("count");
-		this.page.wrapper.find(".frappe-list").append(
-			this.groupby_edit_area);
-
-		//Set aggregate on options as numeric fields if function is sum or average
-		$('.aggregate-function').on('change', () => {
-			this.meta.fields.forEach((field) => {
-				let fn = $('.aggregate-function option:selected').val();
-				if(fn === 'sum' || fn === 'avg') {
-					if(frappe.model.is_numeric_field(field.fieldtype)) {
-						$('.aggregate-on')
-							.append($('<option>', { value : field.fieldname })
-								.text(field.label));
-					}
-					$('.aggregate-on').show();
-				} else {
-					$('.aggregate-on').hide();
-				}
-			});
-		})
-
-		$('.set-groupby-and-run').on('click', () => {
-			current_cols = this.apply_groupby();
-		});
-
-		$('.remove-groupby').on('click', () => {
-			this.remove_groupby(current_cols);
-		});
-	}
-
-	apply_groupby() {
-		this.group_by = this.page.wrapper.find('.groupby option:selected').val();
-		this.aggregate_function = this.page.wrapper.find('.aggregate-function option:selected').val();
-		this.aggregate_on = this.page.wrapper.find('.aggregate-on option:selected').val();
-
-		//All necessary fields must be set before applying groupby
-		if(!this.group_by) {
-			this.page.wrapper.find('.groupby').focus();
-			return;
-		} else if(!this.aggregate_function) {
-			this.page.wrapper.find('.aggregate-function').focus();
-			return;
-		} else if(!this.aggregate_on && this.aggregate_function!=='count') {
-			this.page.wrapper.find('.aggregate-on').focus();
-			return;
-		}
-
-		if(this.aggregate_function === 'count') {
-			let groupby_query = 'count(' + this.field_type + '.'+ this.group_by+') as ' + this.group_by + '_Count';
-			this.fields.push([groupby_query, this.doctype]);
-		}
-		$('.set-groupby-and-run').hide();
-		let current_cols = this.columns;
-		let remove_columns = this.columns.filter(column => ![this.aggregate_on, this.group_by].includes(column.field));
-		remove_columns.forEach((col) => {
-			this.remove_column_from_datatable(col);
-		});
-
-		this.columns[0].width = 400;
-		if(this.columns[1]) this.columns[1].width = 300;
-		this.refresh();
-		return current_cols;
-	}
-
-	remove_groupby(columns) {
-		this.groupby_edit_area.hide();
-		$('.set-groupby-and-run').show();
-		this.group_by = null;
-		this.aggregate_function = null;
-		this.aggregate_on = null;
-		$(".groupby").val("");
-		$(".aggregate-function").val("count");
-		$(".aggregate-on").val("").hide();
-		columns.forEach((col, i) => {
-			this.add_column_to_datatable(col.field, this.doctype, i);
-		});
-		this.fields.pop();
-		this.setup_columns();
-	}
-
-
 	get_args() {
 		const args = super.get_args();
 		this.field_type = args.fields[0].substring(0,args.fields[0].indexOf('.'));
-		if (this.aggregate_function && this.group_by && this.aggregate_on) {
-			if(this.aggregate_function !== 'count') {
-				args.fields.push(`${this.aggregate_function}(${this.aggregate_on}) as ${this.aggregate_on}`);
+		if (this.group_by_control.aggregate_function && this.group_by_control.group_by && this.group_by_control.aggregate_on) {
+			if(this.group_by_control.aggregate_function !== 'count') {
+				args.fields.push(`${this.group_by_control.aggregate_function}(${this.group_by_control.aggregate_on}) as ${this.group_by_control.aggregate_on}`);
 			}
 		}
 
@@ -185,14 +84,11 @@ frappe.views.ReportView = class ReportView extends frappe.views.ListView {
 			with_comment_count: false,
 			start: 0,
 			page_length: null,
-			group_by: this.group_by || null,
+			group_by: this.group_by_control.group_by || null,
+			order_by: this.group_by_control.order_by || null,
 		});
 	}
 
-	get_group_by_fields() {
-		return this.meta.fields.filter((f)=> ["Select", "Link"].includes(f.fieldtype));
-	}
-
 	before_refresh() {
 		if (this.report_doc) {
 			// don't parse frappe.route_options if this is a Custom Report
@@ -969,7 +865,6 @@ frappe.views.ReportView = class ReportView extends frappe.views.ListView {
 			}
 			return docfield.fieldtype === 'Date' ? 'right' : 'left';
 		})();
-
 		const width = (docfield ? cint(docfield.width) : null) || null;
 
 		// child table column