Mapped UI grid with the backend response

src/main/webapp/WEB-INF/controllers/SubStatusReportController.js

@@ -19,11 +19,11 @@ myApp.controller("subStatusController", function($scope, $http, myFactory, $mdDi
 			pageSize:10,
 			enableFiltering:true,
 			columnDefs : [ 
-				{field : 'employeeId',displayName: 'Employee ID', enableColumnMenu: true, enableSorting: true, enableFiltering: true,width:'*'},
-				{field : 'employeeName',displayName: 'Employee Name', enableColumnMenu: false, enableSorting: false, enableFiltering: true,width:'*'},
-				{field : 'subStatus',displayName: 'Sub Status', enableColumnMenu: false, enableSorting: false,enableFiltering: true,width:'*'}, 
-				{field : 'subStatusStartDate',displayName: 'From Date', enableColumnMenu: false,enableFiltering: false, cellFilter: 'date:"dd-MMM-yyyy"',width:'*'},
-				{field : 'subStatusEndDate',displayName: 'To Date', enableColumnMenu: false,enableSorting: false,enableFiltering: false , cellFilter: 'date:"dd-MMM-yyyy"',width:'*'}, 
+				{field : 'empId',displayName: 'Employee ID', enableColumnMenu: true, enableSorting: true, enableFiltering: true,width:'*'},
+				{field : 'empName',displayName: 'Employee Name', enableColumnMenu: false, enableSorting: false, enableFiltering: true,width:'*'},
+				{field : 'empStatus',displayName: 'Sub Status', enableColumnMenu: false, enableSorting: false,enableFiltering: true,width:'*'}, 
+				{field : 'fromDate',displayName: 'From Date', enableColumnMenu: false,enableFiltering: false, cellFilter: 'date:"dd-MMM-yyyy"',width:'*'},
+				{field : 'toDate',displayName: 'To Date', enableColumnMenu: false,enableSorting: false,enableFiltering: false , cellFilter: 'date:"dd-MMM-yyyy"',width:'*'}, 
 				{field : 'functionalGroup',displayName: 'Functional Group', enableColumnMenu: false, enableSorting: false,enableFiltering: false, enableFiltering: true,width:'*'} 
 			],
 		enableGridMenu: true,
@@ -97,7 +97,7 @@ myApp.controller("subStatusController", function($scope, $http, myFactory, $mdDi
 		if ($scope.empSubStatusValue !== undefined) {
 			return $scope.empSubStatusValue;
 		} else {
-			return "Please select a shift";
+			return "Please select a SubStatus";
 		}
 	};
 	$scope.validateDates = function(dateValue, from) {

src/main/webapp/WEB-INF/css/custom-theme.css

@@ -681,11 +681,15 @@ cursor: pointer;
 	margin: 10px 0 0 0;
 }
 .substatus-dropdown > label {
-	padding-left:0;
+	padding:0;
+	margin-top:10px;
+}
+.substatus-dropdown md-datepicker {
+	padding:0;
 }
+
 .substatus-dropdown >md-select {
 	margin:0;
-	padding:0;
 }
 .substatus-report-grid {
 	height: calc(85vh - 243px) !important;

src/main/webapp/WEB-INF/templates/subStatusReport.html

@@ -14,33 +14,34 @@
 	<div class="form-horizontal">
 			<div class="form-group">
 			<div class="form-inline col-lg-12">
-				<div class="form-group row col-lg-6 col-sm-4">
-					<label class="" for="fromDate">From Date: <md-datepicker
+				<div class="form-group row col-lg-4 col-sm-4 substatus-dropdown">
+					<label class="col-lg-3" for="fromDate">Start Date: </label>
+					<md-datepicker class="col-lg-9"
 							ng-model="fromDate" md-placeholder="Enter date"
 							md-min-date="minDate" md-max-date="maxDate"
 							onkeydown="return false"
-							ng-change="validateDates(fromDate, 'FromDate')"></md-datepicker></label>
+							ng-change="validateDates(fromDate, 'FromDate')">
+					</md-datepicker>
 				</div>
-				<div class="form-group row col-lg-6 col-sm-5">
-					<label class="" for="toDate">To Date: <md-datepicker
+				<div class="form-group row col-lg-4 col-sm-5 substatus-dropdown">
+					<label class="col-lg-3" for="toDate">End Date: </label>
+					<md-datepicker
+					class="col-lg-8"
 							ng-model="toDate" md-placeholder="Enter date"
 							md-min-date="minDate" md-max-date="maxDate"
 							onkeydown="return false"
-							ng-change="validateDates(toDate, 'ToDate')"></md-datepicker></label>
+							ng-change="validateDates(toDate, 'ToDate')">
+					</md-datepicker>
 				</div>
-			</div>
-		</div>
-				<div class="form-group">
-			<div class="form-inline col-lg-12">
-				<div class="form-group row col-lg-6 col-sm-5 d-flex substatus-dropdown">
- 					<label class="col-lg-2" for="fromDate">SubStatus: </label>
- 					<md-select class="col-lg-4 " ng-model="empSubStatusValue" md-selected-text="getSelectedSubStatus() " id="empSubStatus" name="empSubStatus">
+				<div class="form-group col-lg-3 col-sm-5 d-flex substatus-dropdown">
+ 					<label class="col-lg-5" for="fromDate">SubStatus: </label>
+ 					<md-select class="col-lg-7 " ng-model="empSubStatusValue" md-selected-text="getSelectedSubStatus() " id="empSubStatus" name="empSubStatus">
                        <md-optgroup label="Employee SubStatus ">
                            <md-option ng-value="empSubStatusValue " ng-repeat="empSubStatusValue in empSubStatuses">{{empSubStatusValue}}</md-option>
                        </md-optgroup>
                    </md-select>	
 				</div>
-				<div class="form-group row col-lg-6 col-sm-2">
+				<div class="form-group col-lg-1 col-sm-2" style="margin-left: 20px;">
 					<label for="submitBtn"> <md-button
 							class="md-raised md-primary"
 							ng-click="getSubStatusDetails('click')"> <i