From cb9c6718ee7dead674dac082d31c27a441128b7c Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 15 Nov 2021 17:17:40 +0300
Subject: [PATCH] Fixed #1760, Fixed #1761

---
 api-generator/components/datatable.js         |  4 ++--
 api-generator/components/dataview.js          |  4 ++--
 api-generator/components/treetable.js         |  4 ++--
 src/components/datatable/DataTable.d.ts       |  4 ++--
 src/components/datatable/DataTable.vue        | 16 +++++++-------
 src/components/dataview/DataView.d.ts         |  4 ++--
 src/components/dataview/DataView.vue          | 16 +++++++-------
 src/components/paginator/Paginator.vue        |  8 +++----
 src/components/treetable/TreeTable.d.ts       |  4 ++--
 src/components/treetable/TreeTable.vue        | 16 +++++++-------
 src/views/datatable/DataTableCrudDemo.vue     | 16 +++++++-------
 src/views/datatable/DataTableDoc.vue          | 10 ++++-----
 .../datatable/DataTablePaginatorDemo.vue      | 16 +++++++-------
 src/views/dataview/DataViewDoc.vue            | 10 ++++-----
 src/views/paginator/PaginatorDemo.vue         |  4 ++--
 src/views/paginator/PaginatorDoc.vue          | 22 +++++++++----------
 src/views/toolbar/ToolbarDemo.vue             |  4 ++--
 src/views/toolbar/ToolbarDoc.vue              | 22 +++++++++----------
 src/views/treetable/TreeTableDoc.vue          | 10 ++++-----
 19 files changed, 97 insertions(+), 97 deletions(-)

diff --git a/api-generator/components/datatable.js b/api-generator/components/datatable.js
index 2ebbb6a9e..4ab85dbcc 100644
--- a/api-generator/components/datatable.js
+++ b/api-generator/components/datatable.js
@@ -1097,11 +1097,11 @@ const DataTableSlots = [
         description: "Custom content for the component's header"
     },
     {
-        name: "paginatorLeft",
+        name: "paginatorstart",
         description: "Custom content for the component paginator's left side"
     },
     {
-        name: "paginatorRight",
+        name: "paginatorend",
         description: "Custom content for the component paginator's right side"
     },
     {
diff --git a/api-generator/components/dataview.js b/api-generator/components/dataview.js
index ad1996a60..c11fa356a 100644
--- a/api-generator/components/dataview.js
+++ b/api-generator/components/dataview.js
@@ -126,11 +126,11 @@ const DataViewSlots = [
         description: "Custom content for the component's header"
     },
     {
-        name: "paginatorLeft",
+        name: "paginatorstart",
         description: "Custom content for the component paginator's left side"
     },
     {
-        name: "paginatorRight",
+        name: "paginatorend",
         description: "Custom content for the component paginator's right side"
     },
     {
diff --git a/api-generator/components/treetable.js b/api-generator/components/treetable.js
index d71465969..73d54b3b4 100644
--- a/api-generator/components/treetable.js
+++ b/api-generator/components/treetable.js
@@ -445,11 +445,11 @@ const TreeTableSlots = [
         description: "Custom content for the component's header"
     },
     {
-        name: "paginatorLeft",
+        name: "paginatorstart",
         description: "Custom content for the component paginator's left side"
     },
     {
-        name: "paginatorRight",
+        name: "paginatorend",
         description: "Custom content for the component paginator's right side"
     },
     {
diff --git a/src/components/datatable/DataTable.d.ts b/src/components/datatable/DataTable.d.ts
index 5e7596d18..c990c47ea 100755
--- a/src/components/datatable/DataTable.d.ts
+++ b/src/components/datatable/DataTable.d.ts
@@ -135,8 +135,8 @@ declare class DataTable {
     $slots: {
         header: DataTableHeaderSlotInterface;
         footer: DataTableFooterSlotInterface;
-        paginatorLeft: VNode[];
-        paginatorRight: VNode[];
+        paginatorstart: VNode[];
+        paginatorend: VNode[];
         empty: VNode[];
         groupheader: DataTableGroupHeaderSlotInterface;
         groupfooter: DataTableGroupFooterSlotInterface;
diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index 9af187bf1..49333b25a 100755
--- a/src/components/datatable/DataTable.vue
+++ b/src/components/datatable/DataTable.vue
@@ -9,11 +9,11 @@
         </div>
         <DTPaginator v-if="paginatorTop" :rows="d_rows" :first="d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
                 :currentPageReportTemplate="currentPageReportTemplate" class="p-paginator-top" @page="onPage($event)" :alwaysShow="alwaysShowPaginator">
-            <template #left v-if="$slots.paginatorLeft">
-                <slot name="paginatorLeft"></slot>
+            <template #start v-if="$slots.paginatorstart">
+                <slot name="paginatorstart"></slot>
             </template>
-            <template #right v-if="$slots.paginatorRight">
-                <slot name="paginatorRight"></slot>
+            <template #end v-if="$slots.paginatorend">
+                <slot name="paginatorend"></slot>
             </template>
         </DTPaginator>
         <div class="p-datatable-wrapper" :style="{maxHeight: scrollHeight}">
@@ -49,11 +49,11 @@
         </div>
         <DTPaginator v-if="paginatorBottom" :rows="d_rows" :first="d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
                 :currentPageReportTemplate="currentPageReportTemplate" class="p-paginator-bottom" @page="onPage($event)" :alwaysShow="alwaysShowPaginator">
-            <template #left v-if="$slots.paginatorLeft">
-                <slot name="paginatorLeft"></slot>
+            <template #start v-if="$slots.paginatorstart">
+                <slot name="paginatorstart"></slot>
             </template>
-            <template #right v-if="$slots.paginatorRight">
-                <slot name="paginatorRight"></slot>
+            <template #end v-if="$slots.paginatorend">
+                <slot name="paginatorend"></slot>
             </template>
         </DTPaginator>
         <div class="p-datatable-footer" v-if="$slots.footer">
diff --git a/src/components/dataview/DataView.d.ts b/src/components/dataview/DataView.d.ts
index 979972abb..d4b1018da 100755
--- a/src/components/dataview/DataView.d.ts
+++ b/src/components/dataview/DataView.d.ts
@@ -30,8 +30,8 @@ declare class DataView {
     $emit(eventName: 'page', event: Event): this;
     $slots: {
         header: VNode[];
-        paginatorLeft: VNode[];
-        paginatorRight: VNode[];
+        paginatorstart: VNode[];
+        paginatorend: VNode[];
         list: DataViewSlotInterface;
         grid: DataViewSlotInterface;
         empty: VNode[];
diff --git a/src/components/dataview/DataView.vue b/src/components/dataview/DataView.vue
index 61dceefc7..b38850b84 100755
--- a/src/components/dataview/DataView.vue
+++ b/src/components/dataview/DataView.vue
@@ -5,11 +5,11 @@
 		</div>
 		<DVPaginator v-if="paginatorTop" :rows="d_rows" :first="d_first" :totalRecords="getTotalRecords" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
 					:currentPageReportTemplate="currentPageReportTemplate" :class="{'p-paginator-top': paginatorTop}" :alwaysShow="alwaysShowPaginator" @page="onPage($event)">
-			<template #left v-if="$slots.paginatorLeft">
-				<slot name="paginatorLeft"></slot>
+			<template #start v-if="$slots.paginatorstart">
+				<slot name="paginatorstart"></slot>
 			</template>
-			<template #right v-if="$slots.paginatorRight">
-				<slot name="paginatorRight"></slot>
+			<template #end v-if="$slots.paginatorend">
+				<slot name="paginatorend"></slot>
 			</template>
 		</DVPaginator>
 		<div class="p-dataview-content">
@@ -27,11 +27,11 @@
 		</div>
 		<DVPaginator v-if="paginatorBottom" :rows="d_rows" :first="d_first" :totalRecords="getTotalRecords" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
 					:currentPageReportTemplate="currentPageReportTemplate" :class="{'p-paginator-bottom': paginatorBottom}" :alwaysShow="alwaysShowPaginator" @page="onPage($event)">
-			<template #left v-if="$slots.paginatorLeft">
-				<slot name="paginatorLeft"></slot>
+			<template #start v-if="$slots.paginatorstart">
+				<slot name="paginatorstart"></slot>
 			</template>
-			<template #right v-if="$slots.paginatorRight">
-				<slot name="paginatorRight"></slot>
+			<template #end v-if="$slots.paginatorend">
+				<slot name="paginatorend"></slot>
 			</template>
 		</DVPaginator>
 		<div class="p-dataview-footer" v-if="$slots.footer">
diff --git a/src/components/paginator/Paginator.vue b/src/components/paginator/Paginator.vue
index 48885bc46..e323b2576 100755
--- a/src/components/paginator/Paginator.vue
+++ b/src/components/paginator/Paginator.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="p-paginator p-component" v-if="alwaysShow ? true : (pageLinks && pageLinks.length > 1)">
-        <div class="p-paginator-left-content" v-if="$slots.left">
-            <slot name="left" :state="currentState"></slot>
+        <div class="p-paginator-left-content" v-if="$slots.start">
+            <slot name="start" :state="currentState"></slot>
         </div>
 		<template v-for="item of templateItems" :key="item">
 			<FirstPageLink v-if="item === 'FirstPageLink'" @click="changePageToFirst($event)" :disabled="isFirstPage || empty" />
@@ -17,8 +17,8 @@
                 @page-change="changePage($event)" :disabled="empty"/>
             <JumpToPageInput v-else-if="item === 'JumpToPageInput'" :page="currentPage" @page-change="changePage($event)" :disabled="empty"/>
         </template>
-        <div class="p-paginator-right-content" v-if="$slots.right">
-            <slot name="right" :state="currentState"></slot>
+        <div class="p-paginator-right-content" v-if="$slots.end">
+            <slot name="end" :state="currentState"></slot>
         </div>
 	</div>
 </template>
diff --git a/src/components/treetable/TreeTable.d.ts b/src/components/treetable/TreeTable.d.ts
index 3fd01cf10..cc47e8e5e 100755
--- a/src/components/treetable/TreeTable.d.ts
+++ b/src/components/treetable/TreeTable.d.ts
@@ -61,8 +61,8 @@ declare class TreeTable {
     $emit(eventName: 'column-resize-end', event: Event): this;
     $slots: {
         header: VNode[];
-        paginatorLeft: VNode[];
-        paginatorRight: VNode[];
+        paginatorstart: VNode[];
+        paginatorend: VNode[];
         empty: VNode[];
         footer: VNode[];
     }
diff --git a/src/components/treetable/TreeTable.vue b/src/components/treetable/TreeTable.vue
index 1fa441349..7a44b8d20 100755
--- a/src/components/treetable/TreeTable.vue
+++ b/src/components/treetable/TreeTable.vue
@@ -10,11 +10,11 @@
         </div>
          <TTPaginator v-if="paginatorTop" :rows="d_rows" :first="d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
                 :currentPageReportTemplate="currentPageReportTemplate" class="p-paginator-top" @page="onPage($event)" :alwaysShow="alwaysShowPaginator">
-            <template #left v-if="$slots.paginatorLeft">
-                <slot name="paginatorLeft"></slot>
+            <template #start v-if="$slots.paginatorstart">
+                <slot name="paginatorstart"></slot>
             </template>
-            <template #right v-if="$slots.paginatorRight">
-                <slot name="paginatorRight"></slot>
+            <template #end v-if="$slots.paginatorend">
+                <slot name="paginatorend"></slot>
             </template>
         </TTPaginator>
         <div class="p-treetable-wrapper" :style="{maxHeight: scrollHeight}">
@@ -58,11 +58,11 @@
         </div>
         <TTPaginator v-if="paginatorBottom" :rows="d_rows" :first="d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
                 :currentPageReportTemplate="currentPageReportTemplate" class="p-paginator-bottom" @page="onPage($event)" :alwaysShow="alwaysShowPaginator">
-            <template #left v-if="$slots.paginatorLeft">
-                <slot name="paginatorLeft"></slot>
+            <template #start v-if="$slots.paginatorstart">
+                <slot name="paginatorstart"></slot>
             </template>
-            <template #right v-if="$slots.paginatorRight">
-                <slot name="paginatorRight"></slot>
+            <template #end v-if="$slots.paginatorend">
+                <slot name="paginatorend"></slot>
             </template>
         </TTPaginator>
         <div class="p-treetable-footer" v-if="$slots.footer">
diff --git a/src/views/datatable/DataTableCrudDemo.vue b/src/views/datatable/DataTableCrudDemo.vue
index 9a67ca4c7..169f48e76 100755
--- a/src/views/datatable/DataTableCrudDemo.vue
+++ b/src/views/datatable/DataTableCrudDemo.vue
@@ -11,12 +11,12 @@
 		<div class="content-section implementation">
             <div class="card">
                 <Toolbar class="p-mb-4">
-                    <template #left>
+                    <template #start>
                         <Button label="New" icon="pi pi-plus" class="p-button-success p-mr-2" @click="openNew" />
                         <Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
                     </template>
 
-                    <template #right>
+                    <template #end>
                         <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="p-mr-2 p-d-inline-block" />
                         <Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)"  />
                     </template>
@@ -191,12 +191,12 @@ export default {
     <div>
         <div class="card">
             <Toolbar class="p-mb-4">
-                <template #left>
+                <template #start>
                     <Button label="New" icon="pi pi-plus" class="p-button-success p-mr-2" @click="openNew" />
                     <Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
                 </template>
 
-                <template #right>
+                <template #end>
                     <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="p-mr-2 p-d-inline-block" />
                     <Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)"  />
                 </template>
@@ -507,12 +507,12 @@ export default {
     <div>
         <div class="card">
             <Toolbar class="p-mb-4">
-                <template #left>
+                <template #start>
                     <Button label="New" icon="pi pi-plus" class="p-button-success p-mr-2" @click="openNew" />
                     <Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
                 </template>
 
-                <template #right>
+                <template #end>
                     <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="p-mr-2 p-d-inline-block" />
                     <Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)"  />
                 </template>
@@ -832,12 +832,12 @@ export default {
                 <p-toast></p-toast>
 
                 <p-toolbar class="p-mb-4">
-                    <template #left>
+                    <template #start>
                         <p-button label="New" icon="pi pi-plus" class="p-button-success p-mr-2" @click="openNew"></p-button>
                         <p-button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length"></p-button>
                     </template>
 
-                    <template #right>
+                    <template #end>
                         <p-fileupload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="p-mr-2 p-d-inline-block"></p-fileupload>
                         <p-button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)"></p-button>
                     </template>
diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue
index 094a3297d..af258b67d 100755
--- a/src/views/datatable/DataTableDoc.vue
+++ b/src/views/datatable/DataTableDoc.vue
@@ -584,17 +584,17 @@ export default {
 </template>
 </code></pre>
 
-            <p>paginatorLeft and paginatorLeft templates are available to specify custom content at the left and right side.</p>
+            <p><i>paginatorstart</i> and <i>paginatorend</i> templates are available to specify custom content at the left and right side.</p>
 <pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" :paginator="true" :rows="10"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
     &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
     &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
-    &lt;template #paginatorLeft&gt;
+    &lt;template #paginatorstart&gt;
         &lt;Button type="button" icon="pi pi-refresh" /&gt;
     &lt;/template&gt;
-    &lt;template #paginatorRight&gt;
+    &lt;template #paginatorend&gt;
         &lt;Button type="button" icon="pi pi-cloud" /&gt;
     &lt;/template&gt;
 &lt;/DataTable&gt;
@@ -2458,11 +2458,11 @@ export default {
                             <td>column: Column node</td>
                         </tr>
                         <tr>
-                            <td>paginatorLeft</td>
+                            <td>paginatorstart</td>
                             <td>-</td>
                         </tr>
                         <tr>
-                            <td>paginatorRight</td>
+                            <td>paginatorend</td>
                             <td>-</td>
                         </tr>
                         <tr>
diff --git a/src/views/datatable/DataTablePaginatorDemo.vue b/src/views/datatable/DataTablePaginatorDemo.vue
index 0c99da0f6..9ab9c2f50 100755
--- a/src/views/datatable/DataTablePaginatorDemo.vue
+++ b/src/views/datatable/DataTablePaginatorDemo.vue
@@ -18,10 +18,10 @@
                     <Column field="country.name" header="Country"></Column>
                     <Column field="company" header="Company"></Column>
                     <Column field="representative.name" header="Representative"></Column>
-                    <template #paginatorLeft>
+                    <template #paginatorstart>
                         <Button type="button" icon="pi pi-refresh" class="p-button-text" />
                     </template>
-                    <template #paginatorRight>
+                    <template #paginatorend>
                         <Button type="button" icon="pi pi-cloud" class="p-button-text" />
                     </template>
                 </DataTable>
@@ -54,10 +54,10 @@ export default {
             <Column field="country.name" header="Country"></Column>
             <Column field="company" header="Company"></Column>
             <Column field="representative.name" header="Representative"></Column>
-            <template #paginatorLeft>
+            <template #paginatorstart>
                 <Button type="button" icon="pi pi-refresh" class="p-button-text" />
             </template>
-            <template #paginatorRight>
+            <template #paginatorend>
                 <Button type="button" icon="pi pi-cloud" class="p-button-text" />
             </template>
         </DataTable>    
@@ -97,10 +97,10 @@ export default {
             <Column field="country.name" header="Country"></Column>
             <Column field="company" header="Company"></Column>
             <Column field="representative.name" header="Representative"></Column>
-            <template #paginatorLeft>
+            <template #paginatorstart>
                 <Button type="button" icon="pi pi-refresh" class="p-button-text" />
             </template>
-            <template #paginatorRight>
+            <template #paginatorend>
                 <Button type="button" icon="pi pi-cloud" class="p-button-text" />
             </template>
         </DataTable>    
@@ -140,10 +140,10 @@ export default {
                 <p-column field="country.name" header="Country"></p-column>
                 <p-column field="company" header="Company"></p-column>
                 <p-column field="representative.name" header="Representative"></p-column>
-                <template #paginatorLeft>
+                <template #paginatorstart>
                     <p-button type="button" icon="pi pi-refresh" class="p-button-text"></p-button>
                 </template>
-                <template #paginatorRight>
+                <template #paginatorend>
                     <p-button type="button" icon="pi pi-cloud" class="p-button-text"></p-button>
                 </template>
             </p-datatable>
diff --git a/src/views/dataview/DataViewDoc.vue b/src/views/dataview/DataViewDoc.vue
index c83078682..24518dee0 100755
--- a/src/views/dataview/DataViewDoc.vue
+++ b/src/views/dataview/DataViewDoc.vue
@@ -108,13 +108,13 @@ export default {
 
 		<h5>Paginator</h5>
 		<p>Pagination is enabled by setting paginator property to true, rows attribute defines the number of rows per page and pageLinks specify the the number
-			of page links to display. To customize the left and right side of the paginators, use <i>paginatorLeft</i> and <i>paginatorRight</i> templates.</p>
+			of page links to display. To customize the left and right side of the paginators, use <i>paginatorstart</i> and <i>paginatorend</i> templates.</p>
 <pre v-code><code><template v-pre>
 &lt;DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20"&gt;
-	&lt;template #paginatorLeft&gt;
+	&lt;template #paginatorstart&gt;
 		&lt;Button type="button" icon="pi pi-refresh"/&gt;
 	&lt;/template&gt;
-	&lt;template #paginatorRight&gt;
+	&lt;template #paginatorend&gt;
 		&lt;Button type="button" icon="pi pi-search" /&gt;
 	&lt;/template&gt;
 	&lt;template #list="slotProps" &gt;
@@ -378,11 +378,11 @@ export default {
                         <td>-</td>
                     </tr>
                     <tr>
-                        <td>paginatorLeft</td>
+                        <td>paginatorstart</td>
                         <td>-</td>
                     </tr>
                     <tr>
-                        <td>paginatorRight</td>
+                        <td>paginatorend</td>
                         <td>-</td>
                     </tr>
                     <tr>
diff --git a/src/views/paginator/PaginatorDemo.vue b/src/views/paginator/PaginatorDemo.vue
index b3fba581f..da65cb60f 100755
--- a/src/views/paginator/PaginatorDemo.vue
+++ b/src/views/paginator/PaginatorDemo.vue
@@ -16,10 +16,10 @@
                 <h5>Custom</h5>
                 <Paginator v-model:first="first" :rows="1" :totalRecords="totalRecords2"
                     template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink">
-                    <template #left>
+                    <template #start>
                         <Button type="button" icon="pi pi-refresh" @click="reset()"/>
                     </template>
-                    <template #right>
+                    <template #end>
                         <Button type="button" icon="pi pi-search" />
                     </template>
                 </Paginator>
diff --git a/src/views/paginator/PaginatorDoc.vue b/src/views/paginator/PaginatorDoc.vue
index b22fd1460..4d56495a9 100755
--- a/src/views/paginator/PaginatorDoc.vue
+++ b/src/views/paginator/PaginatorDoc.vue
@@ -78,17 +78,17 @@ import Paginator from 'primevue/paginator';
         </ul>
 
         <h5>Custom Content</h5>
-        <p>There are two templates available named "left" and "right" to add custom content to these locations. Both templates get
+        <p>There are two templates available named <i>start</i> and <i>end</i> to add custom content to these locations. Both templates get
             a state object as a slot property to provide the current page, first index and the rows.
         </p>
 <pre v-code><code><template v-pre>
 &lt;Paginator v-model:first="offset" :rows="10" :totalRecords="totalItemsCount"&gt;
-    &lt;template #left="slotProps"&gt;
+    &lt;template #start="slotProps"&gt;
         Page: &#123;&#123;slotProps.state.page&#125;&#125;
         First: &#123;&#123;slotProps.state.first&#125;&#125;
         Rows: &#123;&#123;slotProps.state.rows&#125;&#125;
     &lt;/template&gt;
-    &lt;template #right&gt;
+    &lt;template #end&gt;
         &lt;Button type="button" icon="pi pi-search" /&gt;
     &lt;/template&gt;
 &lt;/Paginator&gt;
@@ -213,11 +213,11 @@ onPage(event) {
 				</thead>
 				<tbody>
                     <tr>
-                        <td>left</td>
+                        <td>start</td>
                         <td>state: State of the paginator</td>
                     </tr>
                     <tr>
-                        <td>right</td>
+                        <td>end</td>
                         <td>state: State of the paginator</td>
                     </tr>
 				</tbody>
@@ -292,10 +292,10 @@ export default {
         <h5>Custom</h5>
         <Paginator v-model:first="first" :rows="1" :totalRecords="totalRecords2"
             template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink">
-            <template #left>
+            <template #start>
                 <Button type="button" icon="pi pi-refresh" @click="reset()"/>
             </template>
-            <template #right>
+            <template #end>
                 <Button type="button" icon="pi pi-search" />
             </template>
         </Paginator>
@@ -341,10 +341,10 @@ export default {
         <h5>Custom</h5>
         <Paginator v-model:first="first" :rows="1" :totalRecords="totalRecords2"
             template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink">
-            <template #left>
+            <template #start>
                 <Button type="button" icon="pi pi-refresh" @click="reset()"/>
             </template>
-            <template #right>
+            <template #end>
                 <Button type="button" icon="pi pi-search" />
             </template>
         </Paginator>
@@ -388,10 +388,10 @@ export default {
             <h5>Custom</h5>
             <p-paginator v-model:first="first" :rows="1" :total-records="totalRecords2"
                 template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink">
-                <template #left>
+                <template #start>
                     <p-button type="button" icon="pi pi-refresh" @click="reset()"></p-button>
                 </template>
-                <template #right>
+                <template #end>
                     <p-button type="button" icon="pi pi-search"></p-button>
                 </template>
             </p-paginator>
diff --git a/src/views/toolbar/ToolbarDemo.vue b/src/views/toolbar/ToolbarDemo.vue
index e8704353d..b3e0c2d66 100755
--- a/src/views/toolbar/ToolbarDemo.vue
+++ b/src/views/toolbar/ToolbarDemo.vue
@@ -10,14 +10,14 @@
 
         <div class="content-section implementation">
             <Toolbar>
-                <template #left>
+                <template #start>
                     <Button label="New" icon="pi pi-plus" class="p-mr-2" />
                     <Button label="Upload" icon="pi pi-upload" class="p-button-success" />
                     <i class="pi pi-bars p-toolbar-separator p-mr-2" />
                     <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton>
                 </template>
 
-                <template #right>
+                <template #end>
                     <Button icon="pi pi-search" class="p-mr-2" />
                     <Button icon="pi pi-calendar" class="p-button-success p-mr-2" />
                     <Button icon="pi pi-times" class="p-button-danger" />
diff --git a/src/views/toolbar/ToolbarDoc.vue b/src/views/toolbar/ToolbarDoc.vue
index 4a60e26bb..a56384bd6 100755
--- a/src/views/toolbar/ToolbarDoc.vue
+++ b/src/views/toolbar/ToolbarDoc.vue
@@ -14,17 +14,17 @@ import Toolbar from 'primevue/toolbar';
 </code></pre>
 
 		<h5>Getting Started</h5>
-		<p>Toolbar provides <i>left</i> and <i>right</i> templates to place content at these sections.</p>
+		<p>Toolbar provides <i>start</i> and <i>end</i> templates to place content at these sections.</p>
 <pre v-code><code>
 &lt;Toolbar&gt;
-    &lt;template #left&gt;
+    &lt;template #start&gt;
         &lt;Button label="New" icon="pi pi-plus" class="p-mr-2" /&gt;
         &lt;Button label="Upload" icon="pi pi-upload" class="p-button-success" /&gt;
         &lt;i class="pi pi-bars p-toolbar-separator p-mr-2" /&gt;
         &lt;SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"&gt;&lt;/SplitButton&gt;
     &lt;/template&gt;
 
-    &lt;template #right&gt;
+    &lt;template #end&gt;
         &lt;Button icon="pi pi-search" class="p-mr-2" /&gt;
         &lt;Button icon="pi pi-calendar" class="p-button-success p-mr-2" /&gt;
         &lt;Button icon="pi pi-times" class="p-button-danger" /&gt;
@@ -44,11 +44,11 @@ import Toolbar from 'primevue/toolbar';
 				</thead>
 				<tbody>
                     <tr>
-                        <td>left</td>
+                        <td>start</td>
                         <td>-</td>
                     </tr>
                     <tr>
-                        <td>right</td>
+                        <td>end</td>
                         <td>-</td>
                     </tr>
 				</tbody>
@@ -98,14 +98,14 @@ export default {
 <template>
     <div>
         <Toolbar>
-            <template #left>
+            <template #start>
                 <Button label="New" icon="pi pi-plus" class="p-mr-2" />
                 <Button label="Upload" icon="pi pi-upload" class="p-button-success" />
                 <i class="pi pi-bars p-toolbar-separator p-mr-2" />
                 <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton>
             </template>
 
-            <template #right>
+            <template #end>
                 <Button icon="pi pi-search" class="p-mr-2" />
                 <Button icon="pi pi-calendar" class="p-button-success p-mr-2" />
                 <Button icon="pi pi-times" class="p-button-danger" />
@@ -159,14 +159,14 @@ export default {
 <template>
     <div>
         <Toolbar>
-            <template #left>
+            <template #start>
                 <Button label="New" icon="pi pi-plus" class="p-mr-2" />
                 <Button label="Upload" icon="pi pi-upload" class="p-button-success" />
                 <i class="pi pi-bars p-toolbar-separator p-mr-2" />
                 <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton>
             </template>
 
-            <template #right>
+            <template #end>
                 <Button icon="pi pi-search" class="p-mr-2" />
                 <Button icon="pi pi-calendar" class="p-button-success p-mr-2" />
                 <Button icon="pi pi-times" class="p-button-danger" />
@@ -222,14 +222,14 @@ export default {
         <script src="https://unpkg.com/primevue@^3/splitbutton/splitbutton.min.js"><\\/script>`,
                     content: `<div id="app">
             <p-toolbar>
-                <template #left>
+                <template #start>
                     <p-button label="New" icon="pi pi-plus" class="p-mr-2"></p-button>
                     <p-button label="Upload" icon="pi pi-upload" class="p-button-success"></p-button>
                     <i class="pi pi-bars p-toolbar-separator p-mr-2"></i>
                     <p-splitbutton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></p-splitbutton>
                 </template>
 
-                <template #right>
+                <template #end>
                     <p-button icon="pi pi-search" class="p-mr-2"></p-button>
                     <p-button icon="pi pi-calendar" class="p-button-success p-mr-2"></p-button>
                     <p-button icon="pi pi-times" class="p-button-danger"></p-button>
diff --git a/src/views/treetable/TreeTableDoc.vue b/src/views/treetable/TreeTableDoc.vue
index d1d1d823a..7e9a080b5 100755
--- a/src/views/treetable/TreeTableDoc.vue
+++ b/src/views/treetable/TreeTableDoc.vue
@@ -800,16 +800,16 @@ export default {
 </template>
 </code></pre>
 
-        <p>paginatorLeft and paginatorRight templates are available to specify custom content at the left and right side.</p>
+        <p><i>paginatorstart</i> and <i>paginatorend</i> templates are available to specify custom content at the left and right side.</p>
 <pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes" :paginator="true" :rows="10"&gt;
     &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
     &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;
     &lt;Column field="type" header="Type"&gt;&lt;/Column&gt;
-    &lt;template #paginatorLeft&gt;
+    &lt;template #paginatorstart&gt;
         &lt;Button type="button" icon="pi pi-refresh" /&gt;
     &lt;/template&gt;
-    &lt;template #paginatorRight&gt;
+    &lt;template #paginatorend&gt;
         &lt;Button type="button" icon="pi pi-cloud" /&gt;
     &lt;/template&gt;
 &lt;/TreeTable&gt;
@@ -1626,11 +1626,11 @@ export default {
                         <td>-</td>
                     </tr>
                     <tr>
-                        <td>paginatorLeft</td>
+                        <td>paginatorstart</td>
                         <td>-</td>
                     </tr>
                     <tr>
-                        <td>paginatorRight</td>
+                        <td>paginatorend</td>
                         <td>-</td>
                     </tr>
                     <tr>