feat(QTable): Ability to use "pagination" without sync modifier for the initial state; rowsPerPage is by default first from rowsPerPageOptions quasarframework#7065

Author: rstoenescu

ui/dev/src/pages/components/data-table-part1.vue

@@ -142,7 +142,8 @@
         bordered
         flat
         binary-state-sort
-        :rows-per-page-options="[]"
+        :pagination="{rowsPerPage: 3}"
+        :rows-per-page-options="[1, 2, 3, 4, 6]"
         row-key="name"
       >
         <template v-slot:body="props">

ui/src/components/table/QTable.js

@@ -107,12 +107,14 @@ export default Vue.extend({
 
   data () {
     return {
-      innerPagination: {
+      innerPagination: Object.assign({
         sortBy: null,
         descending: false,
         page: 1,
-        rowsPerPage: 5
-      }
+        rowsPerPage: this.rowsPerPageOptions.length > 0
+          ? this.rowsPerPageOptions[0]
+          : 5
+      }, this.pagination)
     }
   },
 

ui/src/components/table/table-pagination.js

@@ -20,18 +20,20 @@ function fixPagination (p) {
 export default {
   props: {
     pagination: Object,
+    initialPagination: Object,
     rowsPerPageOptions: {
       type: Array,
-      default: () => [3, 5, 7, 10, 15, 20, 25, 50, 0]
+      default: () => [5, 7, 10, 15, 20, 25, 50, 0]
     }
   },
 
   computed: {
     computedPagination () {
-      return fixPagination({
-        ...this.innerPagination,
-        ...this.pagination
-      })
+      const pag = this.qListeners['update:pagination'] !== void 0
+        ? { ...this.innerPagination, ...this.pagination }
+        : this.innerPagination
+
+      return fixPagination(pag)
     },
 
     firstRowIndex () {
@@ -113,7 +115,7 @@ export default {
         return
       }
 
-      if (this.pagination) {
+      if (this.pagination && this.qListeners['update:pagination'] !== void 0) {
         this.$emit('update:pagination', newPagination)
       }
       else {
@@ -137,6 +139,8 @@ export default {
   },
 
   created () {
-    this.$emit('update:pagination', { ...this.computedPagination })
+    if (this.qListeners['update:pagination'] !== void 0) {
+      this.$emit('update:pagination', { ...this.computedPagination })
+    }
   }
 }