From 753e55c473edff77e25df517f8ca756539e61e2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Mon, 22 Nov 2021 15:05:16 +0300
Subject: [PATCH] Fixed #1808, Fixed #1809

---
 api-generator/components/datatable.js          |  4 ++--
 api-generator/components/dataview.js           |  4 ++--
 api-generator/components/paginator.js          |  4 ++--
 api-generator/components/toolbar.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.d.ts        |  4 ++--
 src/components/paginator/Paginator.vue         |  8 ++++----
 src/components/toolbar/Toolbar.d.ts            |  2 +-
 src/components/toolbar/Toolbar.vue             |  4 ++--
 src/components/treetable/TreeTable.d.ts        |  4 ++--
 src/components/treetable/TreeTable.vue         | 16 ++++++++--------
 src/views/datatable/DataTableCrudDemo.vue      |  8 ++++----
 src/views/datatable/DataTableDoc.vue           | 10 +++++-----
 src/views/datatable/DataTablePaginatorDemo.vue |  8 ++++----
 src/views/dataview/DataViewDoc.vue             | 10 +++++-----
 src/views/paginator/PaginatorDemo.vue          |  4 ++--
 src/views/paginator/PaginatorDoc.vue           |  8 ++++----
 src/views/toolbar/ToolbarDemo.vue              |  4 ++--
 src/views/toolbar/ToolbarDoc.vue               | 14 +++++++-------
 src/views/treetable/TreeTableDoc.vue           | 10 +++++-----
 24 files changed, 87 insertions(+), 87 deletions(-)

diff --git a/api-generator/components/datatable.js b/api-generator/components/datatable.js
index fc5688facf..ebe61b4ebf 100644
--- a/api-generator/components/datatable.js
+++ b/api-generator/components/datatable.js
@@ -1063,11 +1063,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 ad1996a609..c11fa356aa 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/paginator.js b/api-generator/components/paginator.js
index 9598b60c65..a1717a1960 100644
--- a/api-generator/components/paginator.js
+++ b/api-generator/components/paginator.js
@@ -80,11 +80,11 @@ const PaginatorEvents = [
 
 const PaginatorSlots = [
     {
-        name: "left",
+        name: "start",
         description: "Custom content for the component's left side"
     },
     {
-        name: "right",
+        name: "end",
         description: "Custom content for the component's right side"
     }
 ];
diff --git a/api-generator/components/toolbar.js b/api-generator/components/toolbar.js
index 3a10deb5ba..96851ae87c 100644
--- a/api-generator/components/toolbar.js
+++ b/api-generator/components/toolbar.js
@@ -1,10 +1,10 @@
 const ToolbarSlots = [
     {
-        name: "left",
+        name: "start",
         description: "Custom content for the component's left side"
     },
     {
-        name: "right",
+        name: "end",
         description: "Custom content for the component's right side"
     }
 ];
diff --git a/api-generator/components/treetable.js b/api-generator/components/treetable.js
index 87f9a0c18f..0fbef718be 100644
--- a/api-generator/components/treetable.js
+++ b/api-generator/components/treetable.js
@@ -415,11 +415,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 3acf67cf6d..eb79c3d8a9 100755
--- a/src/components/datatable/DataTable.d.ts
+++ b/src/components/datatable/DataTable.d.ts
@@ -81,8 +81,8 @@ declare class DataTable extends Vue {
     $emit(eventName: 'row-edit-cancel', event: Event): this;
     $slots: {
         header: VNode[];
-        paginatorLeft: VNode[];
-        paginatorRight: VNode[];
+        paginatorstart: VNode[];
+        paginatorend: VNode[];
         empty: VNode[];
         footer: VNode[];
     }
diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index cba86bc7bd..676f22af44 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="$scopedSlots.paginatorLeft">
-                <slot name="paginatorLeft"></slot>
+            <template #start v-if="$scopedSlots.paginatorstart">
+                <slot name="paginatorstart"></slot>
             </template>
-            <template #right v-if="$scopedSlots.paginatorRight">
-                <slot name="paginatorRight"></slot>
+            <template #end v-if="$scopedSlots.paginatorend">
+                <slot name="paginatorend"></slot>
             </template>
         </DTPaginator>
         <div class="p-datatable-wrapper" v-if="!scrollable">
@@ -113,11 +113,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="$scopedSlots.paginatorLeft">
-                <slot name="paginatorLeft"></slot>
+            <template #start v-if="$scopedSlots.paginatorstart">
+                <slot name="paginatorstart"></slot>
             </template>
-            <template #right v-if="$scopedSlots.paginatorRight">
-                <slot name="paginatorRight"></slot>
+            <template #end v-if="$scopedSlots.paginatorend">
+                <slot name="paginatorend"></slot>
             </template>
         </DTPaginator>
         <div class="p-datatable-footer" v-if="$scopedSlots.footer">
diff --git a/src/components/dataview/DataView.d.ts b/src/components/dataview/DataView.d.ts
index f04cd283f7..7157170c75 100755
--- a/src/components/dataview/DataView.d.ts
+++ b/src/components/dataview/DataView.d.ts
@@ -19,8 +19,8 @@ declare class DataView extends Vue {
     $emit(eventName: 'page', event: Event): this;
     $slots: {
         header: VNode[];
-        paginatorLeft: VNode[];
-        paginatorRight: VNode[];
+        paginatorstart: VNode[];
+        paginatorend: VNode[];
         list: VNode[];
         grid: VNode[];
         footer: VNode[];
diff --git a/src/components/dataview/DataView.vue b/src/components/dataview/DataView.vue
index af052126a8..7f99c08ddc 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="$scopedSlots.paginatorLeft">
-				<slot name="paginatorLeft"></slot>
+			<template #start v-if="$scopedSlots.paginatorstart">
+				<slot name="paginatorstart"></slot>
 			</template>
-			<template #right v-if="$scopedSlots.paginatorRight">
-				<slot name="paginatorRight"></slot>
+			<template #end v-if="$scopedSlots.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="$scopedSlots.paginatorLeft">
-				<slot name="paginatorLeft"></slot>
+			<template #start v-if="$scopedSlots.paginatorstart">
+				<slot name="paginatorstart"></slot>
 			</template>
-			<template #right v-if="$scopedSlots.paginatorRight">
-				<slot name="paginatorRight"></slot>
+			<template #end v-if="$scopedSlots.paginatorend">
+				<slot name="paginatorend"></slot>
 			</template>
 		</DVPaginator>
 		<div class="p-dataview-footer" v-if="$scopedSlots.footer">
diff --git a/src/components/paginator/Paginator.d.ts b/src/components/paginator/Paginator.d.ts
index fd82bb7707..bce175b05a 100755
--- a/src/components/paginator/Paginator.d.ts
+++ b/src/components/paginator/Paginator.d.ts
@@ -18,8 +18,8 @@ declare class Paginator extends Vue {
     alwaysShow?: boolean;
     $emit(eventName: 'page', event: PageState): this;
     $slots: {
-        left: VNode[];
-        right: VNode[];
+        start: VNode[];
+        end: VNode[];
     }
 }
 
diff --git a/src/components/paginator/Paginator.vue b/src/components/paginator/Paginator.vue
index 3e64514adc..3cfa2c7477 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="$scopedSlots.left">
-            <slot name="left" :state="currentState"></slot>
+        <div class="p-paginator-left-content" v-if="$scopedSlots.start">
+            <slot name="start" :state="currentState"></slot>
         </div>
 		<template v-for="item of templateItems">
 			<FirstPageLink v-if="item === 'FirstPageLink'" :key="item" @click="changePageToFirst($event)" :disabled="isFirstPage || empty" />
@@ -17,8 +17,8 @@
                 @page-change="changePage($event)" :disabled="empty"/>
             <JumpToPageInput v-else-if="item === 'JumpToPageInput'" :key="item" :page="currentPage" @page-change="changePage($event)" :disabled="empty"/>
         </template>
-        <div class="p-paginator-right-content" v-if="$scopedSlots.right">
-            <slot name="right" :state="currentState"></slot>
+        <div class="p-paginator-right-content" v-if="$scopedSlots.end">
+            <slot name="end" :state="currentState"></slot>
         </div>
 	</div>
 </template>
diff --git a/src/components/toolbar/Toolbar.d.ts b/src/components/toolbar/Toolbar.d.ts
index 1b60068f93..cdb3bed715 100755
--- a/src/components/toolbar/Toolbar.d.ts
+++ b/src/components/toolbar/Toolbar.d.ts
@@ -2,7 +2,7 @@ import Vue, { VNode } from 'vue';
 
 declare class Toolbar extends Vue {
     $slots: {
-        left: VNode[];
+        start: VNode[];
         right: VNode[];
     }
 }
diff --git a/src/components/toolbar/Toolbar.vue b/src/components/toolbar/Toolbar.vue
index c67d463bc1..863f2912d9 100755
--- a/src/components/toolbar/Toolbar.vue
+++ b/src/components/toolbar/Toolbar.vue
@@ -1,10 +1,10 @@
 <template>
     <div class="p-toolbar p-component" role="toolbar">
         <div class="p-toolbar-group-left">
-             <slot name="left"></slot>
+             <slot name="start"></slot>
         </div>
         <div class="p-toolbar-group-right">
-             <slot name="right"></slot>
+             <slot name="end"></slot>
         </div>
     </div>
 </template>
diff --git a/src/components/treetable/TreeTable.d.ts b/src/components/treetable/TreeTable.d.ts
index 03593f2a63..1af835f1af 100755
--- a/src/components/treetable/TreeTable.d.ts
+++ b/src/components/treetable/TreeTable.d.ts
@@ -45,8 +45,8 @@ declare class TreeTable extends Vue {
     $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 46a5edf9bf..65f2d6a521 100755
--- a/src/components/treetable/TreeTable.vue
+++ b/src/components/treetable/TreeTable.vue
@@ -11,11 +11,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="$scopedSlots.paginatorLeft">
-                <slot name="paginatorLeft"></slot>
+            <template #start v-if="$scopedSlots.paginatorstart">
+                <slot name="paginatorstart"></slot>
             </template>
-            <template #right v-if="$scopedSlots.paginatorRight">
-                <slot name="paginatorRight"></slot>
+            <template #end v-if="$scopedSlots.paginatorend">
+                <slot name="paginatorend"></slot>
             </template>
         </TTPaginator>
         <div class="p-treetable-wrapper">
@@ -63,11 +63,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="$scopedSlots.paginatorLeft">
-                <slot name="paginatorLeft"></slot>
+            <template #start v-if="$scopedSlots.paginatorstart">
+                <slot name="paginatorstart"></slot>
             </template>
-            <template #right v-if="$scopedSlots.paginatorRight">
-                <slot name="paginatorRight"></slot>
+            <template #end v-if="$scopedSlots.paginatorend">
+                <slot name="paginatorend"></slot>
             </template>
         </TTPaginator>
         <div class="p-treetable-footer" v-if="$scopedSlots.footer">
diff --git a/src/views/datatable/DataTableCrudDemo.vue b/src/views/datatable/DataTableCrudDemo.vue
index e57035256f..f173b8308e 100755
--- a/src/views/datatable/DataTableCrudDemo.vue
+++ b/src/views/datatable/DataTableCrudDemo.vue
@@ -10,12 +10,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>
@@ -147,12 +147,12 @@
 <CodeHighlight>
 <template v-pre>
 &lt;Toolbar class="p-mb-4"&gt;
-    &lt;template #left&gt;
+    &lt;template #start&gt;
         &lt;Button label="New" icon="pi pi-plus" class="p-button-success p-mr-2" @click="openNew" /&gt;
         &lt;Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" /&gt;
     &lt;/template&gt;
 
-    &lt;template #right&gt;
+    &lt;template #end&gt;
         &lt;FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="p-mr-2" /&gt;
         &lt;Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)"  /&gt;
     &lt;/template&gt;
diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue
index 67aeae4e7e..83526f0eb2 100755
--- a/src/views/datatable/DataTableDoc.vue
+++ b/src/views/datatable/DataTableDoc.vue
@@ -429,7 +429,7 @@ export default {
 </template>
 </CodeHighlight>
 
-                <p>paginatorLeft and paginatorLeft templates are available to specify custom content at the left and right side.</p>
+                <p>paginatorstart and paginatorend templates are available to specify custom content at the left and right side.</p>
 <CodeHighlight>
 <template v-pre>
 &lt;DataTable :value="cars" :paginator="true" :rows="10"&gt;
@@ -437,10 +437,10 @@ export default {
     &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;
@@ -2400,11 +2400,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/datatable/DataTablePaginatorDemo.vue b/src/views/datatable/DataTablePaginatorDemo.vue
index 267e5432b0..50933eb5af 100755
--- a/src/views/datatable/DataTablePaginatorDemo.vue
+++ b/src/views/datatable/DataTablePaginatorDemo.vue
@@ -17,10 +17,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>
@@ -40,10 +40,10 @@
     &lt;Column field="country.name" header="Country"&gt;&lt;/Column&gt;
     &lt;Column field="company" header="Company"&gt;&lt;/Column&gt;
     &lt;Column field="representative.name" header="Representative"&gt;&lt;/Column&gt;
-    &lt;template #paginatorLeft&gt;
+    &lt;template #paginatorstart&gt;
         &lt;Button type="button" icon="pi pi-refresh" class="p-button-text" /&gt;
     &lt;/template&gt;
-    &lt;template #paginatorRight&gt;
+    &lt;template #paginatorend&gt;
         &lt;Button type="button" icon="pi pi-cloud" class="p-button-text" /&gt;
     &lt;/template&gt;
 &lt;/DataTable&gt;
diff --git a/src/views/dataview/DataViewDoc.vue b/src/views/dataview/DataViewDoc.vue
index 5f010be64b..9af7720b36 100755
--- a/src/views/dataview/DataViewDoc.vue
+++ b/src/views/dataview/DataViewDoc.vue
@@ -102,14 +102,14 @@ 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>
 <CodeHighlight>
 <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;
@@ -377,11 +377,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 c604aaa38f..8bac4faae6 100755
--- a/src/views/paginator/PaginatorDemo.vue
+++ b/src/views/paginator/PaginatorDemo.vue
@@ -15,10 +15,10 @@
                 <h5>Custom</h5>
                 <Paginator :first.sync="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 2871c408eb..7080a1f371 100755
--- a/src/views/paginator/PaginatorDoc.vue
+++ b/src/views/paginator/PaginatorDoc.vue
@@ -74,12 +74,12 @@ import Paginator from 'primevue/paginator';
 <CodeHighlight>
 <template v-pre>
 &lt;Paginator :first.sync="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;
@@ -275,10 +275,10 @@ onPage(event) {
 &lt;h3&gt;Custom&lt;/h3&gt;
 &lt;Paginator :first.sync="first" :rows="1" :totalRecords="totalRecords2"
     template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"&gt;
-    &lt;template #left&gt;
+    &lt;template #start&gt;
         &lt;Button type="button" icon="pi pi-refresh" @click="reset()"/&gt;
     &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;
diff --git a/src/views/toolbar/ToolbarDemo.vue b/src/views/toolbar/ToolbarDemo.vue
index bc31c27adc..8335d63248 100755
--- a/src/views/toolbar/ToolbarDemo.vue
+++ b/src/views/toolbar/ToolbarDemo.vue
@@ -9,14 +9,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 c762c33d24..d966810270 100755
--- a/src/views/toolbar/ToolbarDoc.vue
+++ b/src/views/toolbar/ToolbarDoc.vue
@@ -8,17 +8,17 @@ import Toolbar from 'primevue/toolbar';
 </CodeHighlight>
 
 				<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>
 <CodeHighlight>
 &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;
@@ -37,11 +37,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>
@@ -86,14 +86,14 @@ import Toolbar from 'primevue/toolbar';
 <CodeHighlight>
 <template v-pre>
 &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;
diff --git a/src/views/treetable/TreeTableDoc.vue b/src/views/treetable/TreeTableDoc.vue
index 61c9b8576b..ed7d6d34c4 100755
--- a/src/views/treetable/TreeTableDoc.vue
+++ b/src/views/treetable/TreeTableDoc.vue
@@ -788,17 +788,17 @@ export default {
 </template>
 </CodeHighlight>
 
-                <p>paginatorLeft and paginatorLeft templates are available to specify custom content at the left and right side.</p>
+                <p>paginatorstart and paginatorend templates are available to specify custom content at the left and right side.</p>
 <CodeHighlight>
 <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;
@@ -1560,11 +1560,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>