diff --git a/src/components/paginator/CurrentPageReport.vue b/src/components/paginator/CurrentPageReport.vue
index 90b61bafd..71f1dc6ce 100644
--- a/src/components/paginator/CurrentPageReport.vue
+++ b/src/components/paginator/CurrentPageReport.vue
@@ -5,8 +5,26 @@
export default {
inheritAttrs: false,
props: {
- pageCount: Number,
- page: Number,
+ pageCount: {
+ 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;
}
}
}
diff --git a/src/components/paginator/Paginator.vue b/src/components/paginator/Paginator.vue
index dbde6c6a3..131018cb9 100644
--- a/src/components/paginator/Paginator.vue
+++ b/src/components/paginator/Paginator.vue
@@ -9,8 +9,10 @@
Current page report item in the itemplate displays information about the pagination state. Default value is ({currentPage} of {totalPages}) + whereas available placeholders are the following; +
+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';
<Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount">
<template #left="slotProps">
- Page: {{slotProps.state.page}}
- First: {{slotProps.state.first}}
- Rows: {{slotProps.state.rows}}
+ Page: {{slotProps.state.page}}
+ First: {{slotProps.state.first}}
+ Rows: {{slotProps.state.rows}}
</template>
<template #right>
<Button type="button" icon="pi pi-search" />
@@ -142,8 +150,10 @@ onPage(event) {
currentPageReportTemplate
string
- ({currentPage} of {totalPages})
- Template of the current page report element.
+ ({currentPage} of {totalPages})
+ Template of the current page report element. Available placeholders are
+ {currentPage},{totalPages},{rows},{first},{last} and {totalRecords}
+
alwaysShow