Fixed #230 - More options for currentPageReportTemplate

src/components/paginator/CurrentPageReport.vue

@@ -5,8 +5,26 @@
 	export default {
 		inheritAttrs: false,
 		props: {
-			pageCount: Number,
+			pageCount: {
-			page: Number,
+                type: Number,
+                default: 0
+            },
+            page: {
+                type: Number,
+                default: 0
+            },
+            first: {
+                type: Number,
+                default: 0
+            },
+            rows: {
+                type: Number,
+                default: 0
+            },
+            totalRecords: {
+                type: Number,
+                default: 0
+            },
 			template: {
 				type: String,
 				default: '({currentPage} of {totalPages})'
@@ -14,7 +32,15 @@
 		},
 		computed: {
             text() {
-                return this.template.replace("{currentPage}", this.page + 1).replace("{totalPages}", this.pageCount);
+                let text = this.template
+                    .replace("{currentPage}", this.page + 1)
+                    .replace("{totalPages}", this.pageCount)
+                    .replace("{first}", this.first + 1)
+                    .replace("{last}", Math.min(this.first + this.rows, this.totalRecords))
+                    .replace("{rows}", this.rows)
+                    .replace("{totalRecords}", this.totalRecords);
+
+                return text;
             }
 		}
 	}

src/components/paginator/Paginator.vue

@@ -9,8 +9,10 @@
 			<NextPageLink v-else-if="item === 'NextPageLink'" :key="item" @click="changePageToNext($event)" :disabled="isLastPage" />
 			<LastPageLink v-else-if="item === 'LastPageLink'" :key="item" @click="changePageToLast($event)" :disabled="isLastPage" />
 			<PageLinks v-else-if="item === 'PageLinks'" :key="item" :value="pageLinks" :page="page" @click="changePageLink($event)" />
-			<CurrentPageReport v-else-if="item === 'CurrentPageReport'" :key="item" :template="currentPageReportTemplate" :page="page" :pageCount="pageCount" />
+			<CurrentPageReport v-else-if="item === 'CurrentPageReport'" :key="item" :template="currentPageReportTemplate" 
-			<RowsPerPageDropdown v-else-if="item === 'RowsPerPageDropdown' && rowsPerPageOptions" :key="item" :rows="d_rows" :options="rowsPerPageOptions" @rows-change="onRowChange($event)" />
+                :page="page" :pageCount="pageCount" :first="d_first" :rows="d_rows" :totalRecords="totalRecords" />
+			<RowsPerPageDropdown v-else-if="item === 'RowsPerPageDropdown' && rowsPerPageOptions" :key="item" :rows="d_rows" 
+                :options="rowsPerPageOptions" @rows-change="onRowChange($event)" />
         </template>
         <div class="p-paginator-right-content" v-if="$scopedSlots.right">
             <slot name="right" :state="currentState"></slot>

src/views/paginator/PaginatorDoc.vue

@@ -52,10 +52,18 @@ import Paginator from 'primevue/paginator';
                     <li>CurrentPageReport</li>
                 </ul>
 
-<CodeHighlight>
+                <h3>CurrentPageReport</h3>
-&lt;Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount"
+                <p>Current page report item in the itemplate displays information about the pagination state. Default value is (&#123;currentPage&#125; of &#123;totalPages&#125;)
-            template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"&gt;&lt;/Paginator&gt;
+                    whereas available placeholders are the following;
-</CodeHighlight>
+                </p>
+                <ul>
+                    <li>&#123;currentPage&#125;</li>
+                    <li>&#123;totalPages&#125;</li>
+                    <li>&#123;rows&#125;</li>
+                    <li>&#123;first&#125;</li>
+                    <li>&#123;last&#125;</li>
+                    <li>&#123;totalRecords&#125;</li>
+                </ul>
 
                 <h3>Custom Content</h3>
                 <p>There are two templates available named "left" and "right" to add custom content to these locations. Both templates get
@@ -65,9 +73,9 @@ import Paginator from 'primevue/paginator';
 <template v-pre>
 &lt;Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount"&gt;
     &lt;template #left="slotProps"&gt;
-        Page: {{slotProps.state.page}}
+        Page: &#123;&#123;slotProps.state.page&#125;&#125;
-        First: {{slotProps.state.first}}
+        First: &#123;&#123;slotProps.state.first&#125;&#125;
-        Rows: {{slotProps.state.rows}}
+        Rows: &#123;&#123;slotProps.state.rows&#125;&#125;
     &lt;/template&gt;
     &lt;template #right&gt;
         &lt;Button type="button" icon="pi pi-search" /&gt;
@@ -142,8 +150,10 @@ onPage(event) {
                             <tr>
                                 <td>currentPageReportTemplate</td>
                                 <td>string</td>
-                                <td>({currentPage} of {totalPages})</td>
+                                <td>(&#123;currentPage&#125; of &#123;totalPages&#125;)</td>
-                                <td>Template of the current page report element.</td>
+                                <td>Template of the current page report element. Available placeholders are
+                                    &#123;currentPage&#125;,&#123;totalPages&#125;,&#123;rows&#125;,&#123;first&#125;,&#123;last&#125; and &#123;totalRecords&#125;
+                                </td>
                             </tr>
                             <tr>
                                 <td>alwaysShow</td>