diff --git a/src/assets/styles/primevue.css b/src/assets/styles/primevue.css
index 96772d54e..dd458720d 100644
--- a/src/assets/styles/primevue.css
+++ b/src/assets/styles/primevue.css
@@ -5,6 +5,7 @@
 @import '../../components/card/Card.css';
 @import '../../components/checkbox/Checkbox.css';
 @import '../../components/chips/Chips.css';
+@import '../../components/dataview/DataView.css';
 @import '../../components/dialog/Dialog.css';
 @import '../../components/dropdown/Dropdown.css';
 @import '../../components/fieldset/Fieldset.css';
diff --git a/src/components/dataview/DataView.vue b/src/components/dataview/DataView.vue
index 97ec22888..398a47155 100644
--- a/src/components/dataview/DataView.vue
+++ b/src/components/dataview/DataView.vue
@@ -3,7 +3,7 @@
 		<div class="p-dataview-header" v-if="$scopedSlots.header">
 			<slot name="header"></slot>
 		</div>
-		<Paginator v-if="paginatorTop" :rows.sync="rows" :first.sync="firstPage" :totalRecords="getTotalRecords" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
+		<Paginator v-if="paginatorTop" :rows.sync="rows" :first.sync="firstRecord" :totalRecords="getTotalRecords" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
 					:currentPageReportTemplate="currentPageReportTemplate" :class="{'p-paginator-top': paginatorTop}"></Paginator>
 		<div class="p-dataview-content">
 			<div class="p-grid">
@@ -14,7 +14,7 @@
 				<div v-if="isEmpty" class="p-col-12">{{emptyMessage}}</div>
 			</div>
 		</div>
-		<Paginator v-if="paginatorBottom" :rows.sync="rows" :first.sync="firstPage" :totalRecords="getTotalRecords" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
+		<Paginator v-if="paginatorBottom" :rows.sync="rows" :first.sync="firstRecord" :totalRecords="getTotalRecords" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
 					:currentPageReportTemplate="currentPageReportTemplate" :class="{'p-paginator-bottom': paginatorBottom}"></Paginator>
 		<div class="p-dataview-footer" v-if="$scopedSlots.footer">
 			<slot name="footer"></slot>
@@ -92,7 +92,7 @@
 		},
 		data() {
 			return {
-				firstPage: this.first ? this.first : 0
+				firstRecord: this.first ? this.first : 0
 			}
 		},
 		methods: {
@@ -174,7 +174,7 @@
 				if (value && value.length) {
 					if (this.paginator) {
 						const rows = this.rows;
-						const first = this.lazy ? 0 : this.firstPage;
+						const first = this.lazy ? 0 : this.firstRecord;
 						const last = rows + first;
 						let items = [];
 
diff --git a/src/views/dataview/DataViewDemo.vue b/src/views/dataview/DataViewDemo.vue
index 8b46f2eae..10b975cdc 100644
--- a/src/views/dataview/DataViewDemo.vue
+++ b/src/views/dataview/DataViewDemo.vue
@@ -88,16 +88,17 @@
 			},
 			onSortChange(event){
 				const value = event.value.value;
+				const sortValue = event.value;
 
 				if (value.indexOf('!') === 0) {
 					this.sortOrder = -1;
 					this.sortField = value.substring(1, value.length);
-					this.sortKey = value;
+					this.sortKey = sortValue;
 				}
 				else {
 					this.sortOrder = 1;
 					this.sortField = value;
-					this.sortKey = value;
+					this.sortKey = sortValue;
 				}
 			}
 		},
@@ -107,6 +108,8 @@
 	}
 </script>
 
-<style scoped>
-
+<style lang="scss">
+.p-dropdown {
+	width: 12em;
+}
 </style>
\ No newline at end of file