diff --git a/src/app/components/basecomponent/basecomponent.ts b/src/app/components/basecomponent/basecomponent.ts
index 00a81adf39..6e2ee0c8a1 100644
--- a/src/app/components/basecomponent/basecomponent.ts
+++ b/src/app/components/basecomponent/basecomponent.ts
@@ -94,10 +94,7 @@ export class BaseComponent {
         this.templates?.forEach((item) => {
             const type = item.getType();
             const template = `${type}Template`;
-
-            if (this[template]) {
-                this[template] = item.template;
-            }
+            this[template] = item.template;
         });
     }
 
diff --git a/src/app/components/picklist/picklist.ts b/src/app/components/picklist/picklist.ts
index 2e47a7a626..c3cccbfa4a 100755
--- a/src/app/components/picklist/picklist.ts
+++ b/src/app/components/picklist/picklist.ts
@@ -1866,6 +1866,7 @@ export class PickList extends BaseComponent implements AfterViewChecked, AfterCo
         if (this.media && !this.mediaChangeListener) {
             this.mediaChangeListener = this.renderer.listen(this.media, 'change', (event) => {
                 this.viewChanged = event.matches;
+
                 this.cd.markForCheck();
             });
         }
@@ -1888,11 +1889,11 @@ export class PickList extends BaseComponent implements AfterViewChecked, AfterCo
 
                 let innerHTML = `
                 @media screen and (max-width: ${this.breakpoint}) {
-                    .p-picklist[${this.attrSelector}] {
+                    .p-picklist[${this.id}] {
                         flex-direction: column;
                     }
 
-                    .p-picklist[${this.attrSelector}] .p-picklist-controls {
+                    .p-picklist[${this.id}] .p-picklist-controls {
                         flex-direction: row;
                     }
                 }`;
diff --git a/src/app/components/tabs/tab.ts b/src/app/components/tabs/tab.ts
index f5f75bb1b8..f79abad599 100644
--- a/src/app/components/tabs/tab.ts
+++ b/src/app/components/tabs/tab.ts
@@ -33,6 +33,7 @@ import { SharedModule } from 'primeng/api';
     encapsulation: ViewEncapsulation.None,
     host: {
         '[class.p-tab]': 'true',
+        '[class.p-tab-active]': 'active()',
         '[class.p-component]': 'true',
         '[attr.data-pc-name]': '"tab"',
         '[attr.id]': 'id()',
diff --git a/src/app/components/treetable/treetable.spec.ts b/src/app/components/treetable/treetable.spec.ts
index d9f304f8c8..70f6f8ace8 100755
--- a/src/app/components/treetable/treetable.spec.ts
+++ b/src/app/components/treetable/treetable.spec.ts
@@ -21,7 +21,7 @@ import { MinusIcon } from 'primeng/icons/minus';
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr [ttRow]="rowNode">
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treetableToggler>
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
                         {{ rowData[col.field] }}
                     </td>
                 </tr>
@@ -46,7 +46,7 @@ import { MinusIcon } from 'primeng/icons/minus';
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr>
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treetableToggler>
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
                         {{ rowData[col.field] }}
                     </td>
                 </tr>
@@ -64,7 +64,7 @@ import { MinusIcon } from 'primeng/icons/minus';
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr>
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treetableToggler>
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
                         {{ rowData[col.field] }}
                     </td>
                 </tr>
@@ -82,7 +82,7 @@ import { MinusIcon } from 'primeng/icons/minus';
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr>
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treetableToggler>
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
                         {{ rowData[col.field] }}
                     </td>
                 </tr>
@@ -106,7 +106,7 @@ import { MinusIcon } from 'primeng/icons/minus';
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr [ttRow]="rowNode" [ttSelectableRow]="rowNode">
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treetableToggler>
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
                         {{ rowData[col.field] }}
                     </td>
                 </tr>
@@ -130,7 +130,7 @@ import { MinusIcon } from 'primeng/icons/minus';
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr [ttRow]="rowNode" [ttSelectableRow]="rowNode">
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treetableToggler>
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
                         {{ rowData[col.field] }}
                     </td>
                 </tr>
@@ -159,7 +159,7 @@ import { MinusIcon } from 'primeng/icons/minus';
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr>
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treetableToggler>
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
                         <p-treetableCheckbox [value]="rowNode" *ngIf="i == 0"></p-treetableCheckbox>
                         {{ rowData[col.field] }}
                     </td>
@@ -177,7 +177,7 @@ import { MinusIcon } from 'primeng/icons/minus';
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr>
                     <td *ngFor="let col of columns; let i = index" ttEditableColumn [ngClass]="{ 'p-toggler-column': i === 0 }">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treetableToggler>
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
                         <p-treetableCellEditor>
                             <ng-template pTemplate="input">
                                 <input
@@ -204,7 +204,7 @@ import { MinusIcon } from 'primeng/icons/minus';
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr>
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treetableToggler>
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
                         {{ rowData[col.field] }}
                     </td>
                 </tr>
@@ -221,7 +221,7 @@ import { MinusIcon } from 'primeng/icons/minus';
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr>
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treetableToggler>
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
                         {{ rowData[col.field] }}
                     </td>
                 </tr>
@@ -238,7 +238,7 @@ import { MinusIcon } from 'primeng/icons/minus';
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr>
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treetableToggler>
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
                         {{ rowData[col.field] }}
                     </td>
                 </tr>
@@ -262,7 +262,7 @@ import { MinusIcon } from 'primeng/icons/minus';
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr [ttContextMenuRow]="rowNode">
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treetableToggler>
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
                         {{ rowData[col.field] }}
                     </td>
                 </tr>
@@ -301,7 +301,7 @@ import { MinusIcon } from 'primeng/icons/minus';
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
                 <tr>
                     <td *ngFor="let col of cols; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treetableToggler>
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
                         {{ rowData[col.field] }}
                     </td>
                 </tr>
diff --git a/src/app/showcase/doc/treetable/basicdoc.ts b/src/app/showcase/doc/treetable/basicdoc.ts
index 899efbab8e..552b48d612 100644
--- a/src/app/showcase/doc/treetable/basicdoc.ts
+++ b/src/app/showcase/doc/treetable/basicdoc.ts
@@ -24,7 +24,7 @@ import { NodeService } from '@service/nodeservice';
                     <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
                         <tr [ttRow]="rowNode">
                             <td>
-                                <p-treetableToggler [rowNode]="rowNode" />
+                                <p-treeTableToggler [rowNode]="rowNode" />
                                 {{ rowData.name }}
                             </td>
                             <td>{{ rowData.size }}</td>
@@ -64,7 +64,7 @@ export class BasicDoc {
     <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
         <tr [ttRow]="rowNode">
             <td>
-                <p-treetableToggler [rowNode]="rowNode" />
+                <p-treeTableToggler [rowNode]="rowNode" />
                 {{ rowData.name }}
             </td>
             <td>{{ rowData.size }}</td>
@@ -85,7 +85,7 @@ export class BasicDoc {
         <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
             <tr [ttRow]="rowNode">
                 <td>
-                    <p-treetableToggler [rowNode]="rowNode" />
+                    <p-treeTableToggler [rowNode]="rowNode" />
                     {{ rowData.name }}
                 </td>
                 <td>{{ rowData.size }}</td>
diff --git a/src/app/showcase/doc/treetable/columngroupdoc.ts b/src/app/showcase/doc/treetable/columngroupdoc.ts
index 2c20fd7de8..04d922c708 100644
--- a/src/app/showcase/doc/treetable/columngroupdoc.ts
+++ b/src/app/showcase/doc/treetable/columngroupdoc.ts
@@ -27,7 +27,7 @@ import { Code } from '@domain/code';
                     <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
                         <tr [ttRow]="rowNode">
                             <td>
-                                <p-treetableToggler [rowNode]="rowNode" />
+                                <p-treeTableToggler [rowNode]="rowNode" />
                                 {{ rowData.brand }}
                             </td>
                             <td>{{ rowData.lastYearSale }}</td>
@@ -328,7 +328,7 @@ export class ColumnGroupDoc {
     <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
         <tr>
             <td>
-                <p-treetableToggler [rowNode]="rowNode" />
+                <p-treeTableToggler [rowNode]="rowNode" />
                 {{ rowData.brand }}
             </td>
             <td>{{ rowData.lastYearSale }}</td>
@@ -367,7 +367,7 @@ export class ColumnGroupDoc {
         <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
             <tr [ttRow]="rowNode">
                 <td>
-                    <p-treetableToggler [rowNode]="rowNode" />
+                    <p-treeTableToggler [rowNode]="rowNode" />
                     {{ rowData.brand }}
                 </td>
                 <td>{{ rowData.lastYearSale }}</td>
diff --git a/src/app/showcase/doc/treetable/columnresizeexpanddoc.ts b/src/app/showcase/doc/treetable/columnresizeexpanddoc.ts
index 7609520e53..5fd9f53d0e 100644
--- a/src/app/showcase/doc/treetable/columnresizeexpanddoc.ts
+++ b/src/app/showcase/doc/treetable/columnresizeexpanddoc.ts
@@ -27,7 +27,7 @@ interface Column {
                     <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                         <tr [ttRow]="rowNode">
                             <td *ngFor="let col of columns; let i = index">
-                                <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                                 {{ rowData[col.field] }}
                             </td>
                         </tr>
@@ -71,7 +71,7 @@ export class ResizeExpandDoc {
         <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
             <tr [ttRow]="rowNode">
                 <td *ngFor="let col of columns; let i = index">
-                    <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                     {{ rowData[col.field] }}
                 </td>
             </tr>
@@ -94,7 +94,7 @@ export class ResizeExpandDoc {
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr [ttRow]="rowNode">
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                         {{ rowData[col.field] }}
                     </td>
                 </tr>
diff --git a/src/app/showcase/doc/treetable/columnresizefitdoc.ts b/src/app/showcase/doc/treetable/columnresizefitdoc.ts
index 1494877e47..1aa96500e2 100644
--- a/src/app/showcase/doc/treetable/columnresizefitdoc.ts
+++ b/src/app/showcase/doc/treetable/columnresizefitdoc.ts
@@ -30,7 +30,7 @@ interface Column {
                     <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                         <tr [ttRow]="rowNode">
                             <td *ngFor="let col of columns; let i = index">
-                                <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                                 {{ rowData[col.field] }}
                             </td>
                         </tr>
@@ -74,7 +74,7 @@ export class ResizeFitDoc {
         <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
             <tr [ttRow]="rowNode">
                 <td *ngFor="let col of columns; let i = index">
-                    <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                     {{ rowData[col.field] }}
                 </td>
             </tr>
@@ -97,7 +97,7 @@ export class ResizeFitDoc {
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr [ttRow]="rowNode">
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                         {{ rowData[col.field] }}
                     </td>
                 </tr>
diff --git a/src/app/showcase/doc/treetable/columnresizescrollabledoc.ts b/src/app/showcase/doc/treetable/columnresizescrollabledoc.ts
index 7ec314ea54..446336081f 100644
--- a/src/app/showcase/doc/treetable/columnresizescrollabledoc.ts
+++ b/src/app/showcase/doc/treetable/columnresizescrollabledoc.ts
@@ -42,7 +42,7 @@ interface Column {
                     <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                         <tr [ttRow]="rowNode">
                             <td *ngFor="let col of columns; let i = index">
-                                <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                                 {{ rowData[col.field] }}
                             </td>
                         </tr>
@@ -92,7 +92,7 @@ export class ResizeScrollableDoc {
         <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
             <tr [ttRow]="rowNode">
                 <td *ngFor="let col of columns; let i = index">
-                    <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                     {{ rowData[col.field] }}
                 </td>
             </tr>
@@ -121,7 +121,7 @@ export class ResizeScrollableDoc {
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr [ttRow]="rowNode">
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                         {{ rowData[col.field] }}
                     </td>
                 </tr>
diff --git a/src/app/showcase/doc/treetable/columntoggledoc.ts b/src/app/showcase/doc/treetable/columntoggledoc.ts
index 922f8bbeb0..d61cbb3ab1 100644
--- a/src/app/showcase/doc/treetable/columntoggledoc.ts
+++ b/src/app/showcase/doc/treetable/columntoggledoc.ts
@@ -43,7 +43,7 @@ interface Column {
                     <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                         <tr [ttRow]="rowNode">
                             <td *ngFor="let col of columns; let i = index">
-                                <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                                 {{ rowData[col.field] }}
                             </td>
                         </tr>
@@ -103,7 +103,7 @@ export class ColumnToggleDoc {
         <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
             <tr [ttRow]="rowNode">
                 <td *ngFor="let col of columns; let i = index">
-                    <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                     {{ rowData[col.field] }}
                 </td>
             </tr>
@@ -138,7 +138,7 @@ export class ColumnToggleDoc {
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr [ttRow]="rowNode">
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                         {{ rowData[col.field] }}
                     </td>
                 </tr>
diff --git a/src/app/showcase/doc/treetable/conditionalstyledoc.ts b/src/app/showcase/doc/treetable/conditionalstyledoc.ts
index 596f5a670c..dfbaf5c50b 100644
--- a/src/app/showcase/doc/treetable/conditionalstyledoc.ts
+++ b/src/app/showcase/doc/treetable/conditionalstyledoc.ts
@@ -33,7 +33,7 @@ interface Column {
                                 *ngFor="let col of columns; let i = index"
                                 [ngClass]="{ 'font-bold': col.field === 'size' && rowData.size.endsWith('kb') }"
                             >
-                                <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                                 {{ rowData[col.field] }}
                             </td>
                         </tr>
@@ -79,7 +79,7 @@ export class ConditionalStyleDoc {
                 <td 
                     *ngFor="let col of columns; let i = index" 
                     [ngClass]="{ 'font-bold': col.field === 'size' && rowData.size.endsWith('kb') }">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                         {{ rowData[col.field] }}
                 </td>
             </tr>
@@ -104,7 +104,7 @@ export class ConditionalStyleDoc {
                     <td 
                         *ngFor="let col of columns; let i = index" 
                         [ngClass]="{ 'font-bold': col.field === 'size' && rowData.size.endsWith('kb') }">
-                            <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                            <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                             {{ rowData[col.field] }}
                     </td>
                 </tr>
diff --git a/src/app/showcase/doc/treetable/contextmenudoc.ts b/src/app/showcase/doc/treetable/contextmenudoc.ts
index 860d35821f..af58e7fead 100644
--- a/src/app/showcase/doc/treetable/contextmenudoc.ts
+++ b/src/app/showcase/doc/treetable/contextmenudoc.ts
@@ -39,7 +39,7 @@ interface Column {
                     <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                         <tr [ttRow]="rowNode" [ttContextMenuRow]="rowNode">
                             <td *ngFor="let col of columns; let i = index">
-                                <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                                 {{ rowData[col.field] }}
                             </td>
                         </tr>
@@ -112,7 +112,7 @@ export class ContextMenuDoc {
         <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
             <tr [ttRow]="rowNode" [ttContextMenuRow]="rowNode">
                 <td *ngFor="let col of columns; let i = index">
-                    <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                     {{ rowData[col.field] }}
                 </td>
             </tr>
@@ -142,7 +142,7 @@ export class ContextMenuDoc {
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr [ttRow]="rowNode" [ttContextMenuRow]="rowNode">
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                         {{ rowData[col.field] }}
                     </td>
                 </tr>
diff --git a/src/app/showcase/doc/treetable/controlleddoc.ts b/src/app/showcase/doc/treetable/controlleddoc.ts
index 496e3ea5c3..54d6d59d1f 100644
--- a/src/app/showcase/doc/treetable/controlleddoc.ts
+++ b/src/app/showcase/doc/treetable/controlleddoc.ts
@@ -22,7 +22,7 @@ import { NodeService } from '@service/nodeservice';
                     <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
                         <tr [ttRow]="rowNode">
                             <td style="width:34%;">
-                                <p-treetableToggler [rowNode]="rowNode" />
+                                <p-treeTableToggler [rowNode]="rowNode" />
                                 {{ rowData.name }}
                             </td>
                             <td style="width:34%;">{{ rowData.size }}</td>
@@ -71,7 +71,7 @@ export class ControlledDoc {
     <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
         <tr [ttRow]="rowNode">
             <td>
-                <p-treetableToggler [rowNode]="rowNode" />
+                <p-treeTableToggler [rowNode]="rowNode" />
                 {{ rowData.name }}
             </td>
             <td>{{ rowData.size }}</td>
@@ -93,7 +93,7 @@ export class ControlledDoc {
     <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
         <tr [ttRow]="rowNode">
             <td>
-                <p-treetableToggler [rowNode]="rowNode" />
+                <p-treeTableToggler [rowNode]="rowNode" />
                 {{ rowData.name }}
             </td>
             <td>{{ rowData.size }}</td>
diff --git a/src/app/showcase/doc/treetable/dynamiccolumnsdoc.ts b/src/app/showcase/doc/treetable/dynamiccolumnsdoc.ts
index 60c270ca2d..b8f367a45b 100644
--- a/src/app/showcase/doc/treetable/dynamiccolumnsdoc.ts
+++ b/src/app/showcase/doc/treetable/dynamiccolumnsdoc.ts
@@ -27,7 +27,7 @@ interface Column {
                     <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                         <tr [ttRow]="rowNode">
                             <td style="width: 34%" *ngFor="let col of columns; let i = index">
-                                <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                                 {{ rowData[col.field] }}
                             </td>
                         </tr>
@@ -66,7 +66,7 @@ export class DynamicColumnsDoc {
     <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
         <tr [ttRow]="rowNode">
             <td *ngFor="let col of columns; let i = index">
-                <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                 {{ rowData[col.field] }}
             </td>
         </tr>
@@ -84,7 +84,7 @@ export class DynamicColumnsDoc {
         <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
             <tr [ttRow]="rowNode">
                 <td *ngFor="let col of columns; let i = index">
-                    <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                     {{ rowData[col.field] }}
                 </td>
             </tr>
diff --git a/src/app/showcase/doc/treetable/editdoc.ts b/src/app/showcase/doc/treetable/editdoc.ts
index 945ed7557e..30063687cf 100644
--- a/src/app/showcase/doc/treetable/editdoc.ts
+++ b/src/app/showcase/doc/treetable/editdoc.ts
@@ -32,7 +32,7 @@ interface Column {
                                 [ttEditableColumnDisabled]="i == 0"
                                 [ngClass]="{ 'p-toggler-column': i === 0 }"
                             >
-                                <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                                 <p-treetableCellEditor>
                                     <ng-template pTemplate="input">
                                         <input pInputText type="text" [(ngModel)]="rowData[col.field]" />
@@ -81,7 +81,7 @@ export class EditDoc {
         <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
             <tr [ttRow]="rowNode">
                 <td *ngFor="let col of columns; let i = index" ttEditableColumn [ttEditableColumnDisabled]="i == 0" [ngClass]="{ 'p-toggler-column': i === 0 }">
-                    <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                     <p-treetableCellEditor>
                         <ng-template pTemplate="input">
                             <input pInputText type="text" [(ngModel)]="rowData[col.field]" />
@@ -111,7 +111,7 @@ export class EditDoc {
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr [ttRow]="rowNode">
                     <td *ngFor="let col of columns; let i = index" ttEditableColumn [ttEditableColumnDisabled]="i == 0" [ngClass]="{ 'p-toggler-column': i === 0 }">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                         <p-treetableCellEditor>
                             <ng-template pTemplate="input">
                                 <input pInputText type="text" [(ngModel)]="rowData[col.field]" />
diff --git a/src/app/showcase/doc/treetable/flexiblescrolldoc.ts b/src/app/showcase/doc/treetable/flexiblescrolldoc.ts
index bd42b290e2..95a7cf6e95 100644
--- a/src/app/showcase/doc/treetable/flexiblescrolldoc.ts
+++ b/src/app/showcase/doc/treetable/flexiblescrolldoc.ts
@@ -35,7 +35,7 @@ import { NodeService } from '@service/nodeservice';
                             <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
                                 <tr [ttRow]="rowNode">
                                     <td>
-                                        <p-treetableToggler [rowNode]="rowNode" />
+                                        <p-treeTableToggler [rowNode]="rowNode" />
                                         {{ rowData.name }}
                                     </td>
                                     <td>{{ rowData.size }}</td>
@@ -95,7 +95,7 @@ export class ScrollFlexibleDoc {
                     <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
                         <tr [ttRow]="rowNode">
                             <td>
-                                <p-treetableToggler [rowNode]="rowNode" />
+                                <p-treeTableToggler [rowNode]="rowNode" />
                                 {{ rowData.name }}
                             </td>
                             <td>
@@ -138,7 +138,7 @@ export class ScrollFlexibleDoc {
                         <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
                             <tr [ttRow]="rowNode">
                                 <td>
-                                    <p-treetableToggler [rowNode]="rowNode" />
+                                    <p-treeTableToggler [rowNode]="rowNode" />
                                     {{ rowData.name }}
                                 </td>
                                 <td>
diff --git a/src/app/showcase/doc/treetable/gridlinesdoc.ts b/src/app/showcase/doc/treetable/gridlinesdoc.ts
index e573f489e4..3120b77aaf 100644
--- a/src/app/showcase/doc/treetable/gridlinesdoc.ts
+++ b/src/app/showcase/doc/treetable/gridlinesdoc.ts
@@ -22,7 +22,7 @@ import { NodeService } from '@service/nodeservice';
                     <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
                         <tr [ttRow]="rowNode">
                             <td>
-                                <p-treetableToggler [rowNode]="rowNode" />
+                                <p-treeTableToggler [rowNode]="rowNode" />
                                 {{ rowData.name }}
                             </td>
                             <td>{{ rowData.size }}</td>
@@ -57,7 +57,7 @@ export class GridlinesDoc {
     <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
         <tr [ttRow]="rowNode">
             <td>
-                <p-treetableToggler [rowNode]="rowNode" />
+                <p-treeTableToggler [rowNode]="rowNode" />
                 {{ rowData.name }}
             </td>
             <td>{{ rowData.size }}</td>
@@ -78,7 +78,7 @@ export class GridlinesDoc {
         <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
             <tr [ttRow]="rowNode">
                 <td>
-                    <p-treetableToggler [rowNode]="rowNode" />
+                    <p-treeTableToggler [rowNode]="rowNode" />
                     {{ rowData.name }}
                 </td>
                 <td>{{ rowData.size }}</td>
diff --git a/src/app/showcase/doc/treetable/lazyloaddoc.ts b/src/app/showcase/doc/treetable/lazyloaddoc.ts
index 16cb899dbb..09830bc652 100644
--- a/src/app/showcase/doc/treetable/lazyloaddoc.ts
+++ b/src/app/showcase/doc/treetable/lazyloaddoc.ts
@@ -51,7 +51,7 @@ interface Column {
                 <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                     <tr [ttRow]="rowNode">
                         <td *ngFor="let col of columns; let i = index">
-                            <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                            <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                             {{ rowData[col.field] }}
                         </td>
                     </tr>
@@ -163,7 +163,7 @@ export class LazyLoadDoc implements OnInit {
         <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
             <tr [ttRow]="rowNode">
                 <td *ngFor="let col of columns; let i = index">
-                    <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                     {{ rowData[col.field] }}
                 </td>
             </tr>
@@ -193,7 +193,7 @@ export class LazyLoadDoc implements OnInit {
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr [ttRow]="rowNode">
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                         {{ rowData[col.field] }}
                     </td>
                 </tr>
diff --git a/src/app/showcase/doc/treetable/paginatorbasicdoc.ts b/src/app/showcase/doc/treetable/paginatorbasicdoc.ts
index 3a70103287..00b165d878 100644
--- a/src/app/showcase/doc/treetable/paginatorbasicdoc.ts
+++ b/src/app/showcase/doc/treetable/paginatorbasicdoc.ts
@@ -33,7 +33,7 @@ interface Column {
                     <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                         <tr [ttRow]="rowNode">
                             <td *ngFor="let col of columns; let i = index">
-                                <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                                 {{ rowData[col.field] }}
                             </td>
                         </tr>
@@ -97,7 +97,7 @@ export class PaginatorBasicDoc {
         <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
             <tr [ttRow]="rowNode">
                 <td *ngFor="let col of columns; let i = index">
-                    <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                     {{ rowData[col.field] }}
                 </td>
             </tr>
@@ -123,7 +123,7 @@ export class PaginatorBasicDoc {
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr [ttRow]="rowNode">
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                         {{ rowData[col.field] }}
                     </td>
                 </tr>
diff --git a/src/app/showcase/doc/treetable/paginatorlocaledoc.ts b/src/app/showcase/doc/treetable/paginatorlocaledoc.ts
index 427e727e1f..95e8cb7b90 100644
--- a/src/app/showcase/doc/treetable/paginatorlocaledoc.ts
+++ b/src/app/showcase/doc/treetable/paginatorlocaledoc.ts
@@ -37,7 +37,7 @@ interface Column {
                     <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                         <tr [ttRow]="rowNode">
                             <td *ngFor="let col of columns; let i = index">
-                                <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                                 {{ rowData[col.field] }}
                             </td>
                         </tr>
@@ -103,7 +103,7 @@ export class PaginatorLocaleDoc {
         <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
             <tr [ttRow]="rowNode">
                 <td *ngFor="let col of columns; let i = index">
-                    <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                     {{ rowData[col.field] }}
                 </td>
             </tr>
@@ -129,7 +129,7 @@ export class PaginatorLocaleDoc {
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr [ttRow]="rowNode">
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                         {{ rowData[col.field] }}
                     </td>
                 </tr>
diff --git a/src/app/showcase/doc/treetable/paginatortemplatedoc.ts b/src/app/showcase/doc/treetable/paginatortemplatedoc.ts
index 3a49006a5d..2117386f4b 100644
--- a/src/app/showcase/doc/treetable/paginatortemplatedoc.ts
+++ b/src/app/showcase/doc/treetable/paginatortemplatedoc.ts
@@ -38,7 +38,7 @@ interface Column {
                     <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                         <tr [ttRow]="rowNode">
                             <td *ngFor="let col of columns; let i = index">
-                                <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                                 {{ rowData[col.field] }}
                             </td>
                         </tr>
@@ -110,7 +110,7 @@ export class PaginatorTemplateDoc {
         <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
             <tr [ttRow]="rowNode">
                 <td *ngFor="let col of columns; let i = index">
-                    <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                     {{ rowData[col.field] }}
                 </td>
             </tr>
@@ -141,7 +141,7 @@ export class PaginatorTemplateDoc {
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr [ttRow]="rowNode">
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                         {{ rowData[col.field] }}
                     </td>
                 </tr>
diff --git a/src/app/showcase/doc/treetable/reorderdoc.ts b/src/app/showcase/doc/treetable/reorderdoc.ts
index 1f12fa5fd1..cd5e691828 100644
--- a/src/app/showcase/doc/treetable/reorderdoc.ts
+++ b/src/app/showcase/doc/treetable/reorderdoc.ts
@@ -33,7 +33,7 @@ interface Column {
                     <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                         <tr [ttRow]="rowNode">
                             <td *ngFor="let col of columns; let i = index">
-                                <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treetableToggler>
+                                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
                                 {{ rowData[col.field] }}
                             </td>
                         </tr>
@@ -73,7 +73,7 @@ export class ReorderDoc {
     <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
         <tr [ttRow]="rowNode">
             <td *ngFor="let col of columns; let i = index">
-                <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treetableToggler>
+                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
                 {{ rowData[col.field] }}
             </td>
         </tr>
@@ -93,7 +93,7 @@ export class ReorderDoc {
         <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
             <tr [ttRow]="rowNode">
                 <td *ngFor="let col of columns; let i = index">
-                    <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treetableToggler>
+                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
                     {{ rowData[col.field] }}
                 </td>
             </tr>
diff --git a/src/app/showcase/doc/treetable/scrollfrozencolumnsdoc.ts b/src/app/showcase/doc/treetable/scrollfrozencolumnsdoc.ts
index 95fd00b69b..1e67c20107 100644
--- a/src/app/showcase/doc/treetable/scrollfrozencolumnsdoc.ts
+++ b/src/app/showcase/doc/treetable/scrollfrozencolumnsdoc.ts
@@ -48,7 +48,7 @@ interface Column {
                     <ng-template pTemplate="frozenbody" let-rowNode let-rowData="rowData">
                         <tr [ttRow]="rowNode" style="height: 57px">
                             <td>
-                                <p-treetableToggler [rowNode]="rowNode" />
+                                <p-treeTableToggler [rowNode]="rowNode" />
                                 {{ rowData.name }}
                             </td>
                         </tr>
@@ -123,7 +123,7 @@ export class FrozenColumnsDoc {
         <ng-template pTemplate="frozenbody" let-rowNode let-rowData="rowData">
             <tr [ttRow]="rowNode" style="height: 57px">
                 <td>
-                    <p-treetableToggler [rowNode]="rowNode" />
+                    <p-treeTableToggler [rowNode]="rowNode" />
                     {{ rowData.name }}
                 </td>
             </tr>
@@ -162,7 +162,7 @@ export class FrozenColumnsDoc {
             <ng-template pTemplate="frozenbody" let-rowNode let-rowData="rowData">
                 <tr [ttRow]="rowNode" style="height: 57px">
                     <td>
-                        <p-treetableToggler [rowNode]="rowNode" />
+                        <p-treeTableToggler [rowNode]="rowNode" />
                         {{ rowData.name }}
                     </td>
                 </tr>
diff --git a/src/app/showcase/doc/treetable/scrollhorizontaldoc.ts b/src/app/showcase/doc/treetable/scrollhorizontaldoc.ts
index 1320b6a3e9..f15a15fd6e 100644
--- a/src/app/showcase/doc/treetable/scrollhorizontaldoc.ts
+++ b/src/app/showcase/doc/treetable/scrollhorizontaldoc.ts
@@ -39,7 +39,7 @@ interface Column {
                     <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                         <tr [ttRow]="rowNode">
                             <td *ngFor="let col of columns; let i = index">
-                                <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treetableToggler>
+                                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
                                 {{ rowData[col.field] }}
                             </td>
                         </tr>
@@ -83,7 +83,7 @@ export class ScrollHorizontalDoc {
     <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
         <tr [ttRow]="rowNode">
             <td *ngFor="let col of columns; let i = index">
-                <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treetableToggler>
+                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
                 {{ rowData[col.field] }}
             </td>
         </tr>
@@ -108,7 +108,7 @@ export class ScrollHorizontalDoc {
         <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
             <tr [ttRow]="rowNode">
                 <td *ngFor="let col of columns; let i = index">
-                    <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treetableToggler>
+                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
                     {{ rowData[col.field] }}
                 </td>
             </tr>
diff --git a/src/app/showcase/doc/treetable/scrollverticaldoc.ts b/src/app/showcase/doc/treetable/scrollverticaldoc.ts
index 092635dbbb..4a69cdfde7 100644
--- a/src/app/showcase/doc/treetable/scrollverticaldoc.ts
+++ b/src/app/showcase/doc/treetable/scrollverticaldoc.ts
@@ -37,7 +37,7 @@ interface Column {
                     <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                         <tr [ttRow]="rowNode">
                             <td *ngFor="let col of columns; let i = index">
-                                <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                                 {{ rowData[col.field] }}
                             </td>
                         </tr>
@@ -83,7 +83,7 @@ export class ScrollVerticalDoc {
         <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
             <tr [ttRow]="rowNode">
                 <td *ngFor="let col of columns; let i = index">
-                    <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                     {{ rowData[col.field] }}
                 </td>
             </tr>
@@ -108,7 +108,7 @@ export class ScrollVerticalDoc {
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr [ttRow]="rowNode">
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                         {{ rowData[col.field] }}
                     </td>
                 </tr>
diff --git a/src/app/showcase/doc/treetable/selectioncheckboxdoc.ts b/src/app/showcase/doc/treetable/selectioncheckboxdoc.ts
index 4ea49f4be6..705655e385 100644
--- a/src/app/showcase/doc/treetable/selectioncheckboxdoc.ts
+++ b/src/app/showcase/doc/treetable/selectioncheckboxdoc.ts
@@ -40,7 +40,7 @@ interface Column {
                     <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                         <tr [ttRow]="rowNode" [ttSelectableRow]="rowNode">
                             <td *ngFor="let col of columns; let i = index">
-                                <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                                 <p-treetableCheckbox [value]="rowNode" *ngIf="i === 0" />
                                 {{ rowData[col.field] }}
                             </td>
@@ -104,7 +104,7 @@ export class SelectionCheckboxDoc {
         <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
             <tr [ttRow]="rowNode" [ttSelectableRow]="rowNode">
                 <td *ngFor="let col of columns; let i = index">
-                    <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                     <p-treetableCheckbox [value]="rowNode" *ngIf="i === 0" />
                     {{ rowData[col.field] }}
                 </td>
@@ -131,7 +131,7 @@ export class SelectionCheckboxDoc {
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr [ttRow]="rowNode" [ttSelectableRow]="rowNode">
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                         <p-treetableCheckbox [value]="rowNode" *ngIf="i === 0" />
                         {{ rowData[col.field] }}
                     </td>
diff --git a/src/app/showcase/doc/treetable/selectioneventscdoc.ts b/src/app/showcase/doc/treetable/selectioneventscdoc.ts
index 23fbefd5b8..aa33ed632d 100644
--- a/src/app/showcase/doc/treetable/selectioneventscdoc.ts
+++ b/src/app/showcase/doc/treetable/selectioneventscdoc.ts
@@ -43,7 +43,7 @@ interface NodeEvent {
                     <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                         <tr [ttRow]="rowNode" [ttSelectableRow]="rowNode">
                             <td *ngFor="let col of columns; let i = index">
-                                <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                                 {{ rowData[col.field] }}
                             </td>
                         </tr>
@@ -107,7 +107,7 @@ export class SelectionEventsDoc {
         <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
             <tr [ttRow]="rowNode" [ttSelectableRow]="rowNode">
                 <td *ngFor="let col of columns; let i = index">
-                    <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                     {{ rowData[col.field] }}
                 </td>
             </tr>
@@ -136,7 +136,7 @@ export class SelectionEventsDoc {
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr [ttRow]="rowNode" [ttSelectableRow]="rowNode">
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                         {{ rowData[col.field] }}
                     </td>
                 </tr>
diff --git a/src/app/showcase/doc/treetable/selectionmultipledoc.ts b/src/app/showcase/doc/treetable/selectionmultipledoc.ts
index ad4a89a186..aa0e5b1989 100644
--- a/src/app/showcase/doc/treetable/selectionmultipledoc.ts
+++ b/src/app/showcase/doc/treetable/selectionmultipledoc.ts
@@ -44,7 +44,7 @@ interface Column {
                     <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                         <tr [ttRow]="rowNode" [ttSelectableRow]="rowNode">
                             <td *ngFor="let col of columns; let i = index">
-                                <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                                 {{ rowData[col.field] }}
                             </td>
                         </tr>
@@ -98,7 +98,7 @@ export class SelectionMultipleDoc {
         <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
             <tr [ttRow]="rowNode" [ttSelectableRow]="rowNode">
                 <td *ngFor="let col of columns; let i = index">
-                    <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                     {{ rowData[col.field] }}
                 </td>
             </tr>
@@ -129,7 +129,7 @@ export class SelectionMultipleDoc {
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr [ttRow]="rowNode" [ttSelectableRow]="rowNode">
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                         {{ rowData[col.field] }}
                     </td>
                 </tr>
diff --git a/src/app/showcase/doc/treetable/selectionsingledoc.ts b/src/app/showcase/doc/treetable/selectionsingledoc.ts
index 7c3f01913e..2782f68000 100644
--- a/src/app/showcase/doc/treetable/selectionsingledoc.ts
+++ b/src/app/showcase/doc/treetable/selectionsingledoc.ts
@@ -48,7 +48,7 @@ interface Column {
                     <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                         <tr [ttRow]="rowNode" [ttSelectableRow]="rowNode">
                             <td *ngFor="let col of columns; let i = index">
-                                <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                                 {{ rowData[col.field] }}
                             </td>
                         </tr>
@@ -100,7 +100,7 @@ export class SelectionSingleDoc {
         <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
             <tr [ttRow]="rowNode" [ttSelectableRow]="rowNode">
                 <td *ngFor="let col of columns; let i = index">
-                    <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                     {{ rowData[col.field] }}
                 </td>
             </tr>
@@ -130,7 +130,7 @@ export class SelectionSingleDoc {
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr [ttRow]="rowNode" [ttSelectableRow]="rowNode">
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                         {{ rowData[col.field] }}
                     </td>
                 </tr>
diff --git a/src/app/showcase/doc/treetable/sizedoc.ts b/src/app/showcase/doc/treetable/sizedoc.ts
index 3b0ce67514..428cf5b537 100644
--- a/src/app/showcase/doc/treetable/sizedoc.ts
+++ b/src/app/showcase/doc/treetable/sizedoc.ts
@@ -28,7 +28,7 @@ import { NodeService } from '@service/nodeservice';
                     <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
                         <tr [ttRow]="rowNode">
                             <td>
-                                <p-treetableToggler [rowNode]="rowNode" />
+                                <p-treeTableToggler [rowNode]="rowNode" />
                                 {{ rowData.name }}
                             </td>
                             <td>{{ rowData.size }}</td>
@@ -85,7 +85,7 @@ export class SizeDoc {
         <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
             <tr [ttRow]="rowNode">
                 <td>
-                    <p-treetableToggler [rowNode]="rowNode" />
+                    <p-treeTableToggler [rowNode]="rowNode" />
                     {{ rowData.name }}
                 </td>
                 <td>{{ rowData.size }}</td>
@@ -118,7 +118,7 @@ export class SizeDoc {
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
                 <tr [ttRow]="rowNode">
                     <td>
-                        <p-treetableToggler [rowNode]="rowNode" />
+                        <p-treeTableToggler [rowNode]="rowNode" />
                         {{ rowData.name }}
                     </td>
                     <td>{{ rowData.size }}</td>
diff --git a/src/app/showcase/doc/treetable/sortmultiplecolumnsdoc.ts b/src/app/showcase/doc/treetable/sortmultiplecolumnsdoc.ts
index c0c1f842d3..ae58c485e0 100644
--- a/src/app/showcase/doc/treetable/sortmultiplecolumnsdoc.ts
+++ b/src/app/showcase/doc/treetable/sortmultiplecolumnsdoc.ts
@@ -37,7 +37,7 @@ interface Column {
                     <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                         <tr [ttRow]="rowNode">
                             <td *ngFor="let col of columns; let i = index">
-                                <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                                 {{ rowData[col.field] }}
                             </td>
                         </tr>
@@ -84,7 +84,7 @@ export class SortMultipleColumnsDoc {
         <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
             <tr [ttRow]="rowNode">
                 <td *ngFor="let col of columns; let i = index">
-                    <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                     {{ rowData[col.field] }}
                 </td>
             </tr>
@@ -109,7 +109,7 @@ export class SortMultipleColumnsDoc {
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr [ttRow]="rowNode">
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                         {{ rowData[col.field] }}
                     </td>
                 </tr>
diff --git a/src/app/showcase/doc/treetable/sortremovabledoc.ts b/src/app/showcase/doc/treetable/sortremovabledoc.ts
index 68185eec73..f5d3d5a13f 100644
--- a/src/app/showcase/doc/treetable/sortremovabledoc.ts
+++ b/src/app/showcase/doc/treetable/sortremovabledoc.ts
@@ -41,7 +41,7 @@ interface Column {
                     <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                         <tr [ttRow]="rowNode" [ttSelectableRow]="rowNode">
                             <td *ngFor="let col of columns; let i = index">
-                                <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                                 {{ rowData[col.field] }}
                             </td>
                         </tr>
@@ -136,7 +136,7 @@ export class SortRemovableDoc {
     <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
         <tr [ttRow]="rowNode" [ttSelectableRow]="rowNode">
             <td *ngFor="let col of columns; let i = index">
-                <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                 {{ rowData[col.field] }}
             </td>
         </tr>
@@ -168,7 +168,7 @@ export class SortRemovableDoc {
         <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
             <tr [ttRow]="rowNode" [ttSelectableRow]="rowNode">
                 <td *ngFor="let col of columns; let i = index">
-                    <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                     {{ rowData[col.field] }}
                 </td>
             </tr>
diff --git a/src/app/showcase/doc/treetable/sortsinglecolumndoc.ts b/src/app/showcase/doc/treetable/sortsinglecolumndoc.ts
index 285cfd6c19..6520d77ebc 100644
--- a/src/app/showcase/doc/treetable/sortsinglecolumndoc.ts
+++ b/src/app/showcase/doc/treetable/sortsinglecolumndoc.ts
@@ -28,7 +28,7 @@ interface Column {
                     <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                         <tr [ttRow]="rowNode">
                             <td *ngFor="let col of columns; let i = index">
-                                <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                                 {{ rowData[col.field] }}
                             </td>
                         </tr>
@@ -74,7 +74,7 @@ export class SortSingleColumnDoc {
         <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
             <tr [ttRow]="rowNode">
                 <td *ngFor="let col of columns; let i = index">
-                    <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                     {{ rowData[col.field] }}
                 </td>
             </tr>
@@ -98,7 +98,7 @@ export class SortSingleColumnDoc {
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr [ttRow]="rowNode">
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                         {{ rowData[col.field] }}
                     </td>
                 </tr>
diff --git a/src/app/showcase/doc/treetable/templatedoc.ts b/src/app/showcase/doc/treetable/templatedoc.ts
index 1a3af236b3..ee63155306 100644
--- a/src/app/showcase/doc/treetable/templatedoc.ts
+++ b/src/app/showcase/doc/treetable/templatedoc.ts
@@ -28,7 +28,7 @@ interface Column {
                     <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                         <tr [ttRow]="rowNode">
                             <td *ngFor="let col of columns; let i = index; let last = last">
-                                <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                                 {{ rowData[col.field] }}
                                 <ng-container *ngIf="last">
                                     <p-button icon="pi pi-search" rounded="true" [style]="{ 'margin-right': '.5em' }" />
@@ -78,7 +78,7 @@ export class TemplateDoc {
         <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
             <tr [ttRow]="rowNode">
                 <td *ngFor="let col of columns; let i = index; let last = last">
-                    <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                     {{ rowData[col.field] }}
                     <ng-container *ngIf="last">
                         <p-button icon="pi pi-search" rounded="true" [style]="{ 'margin-right': '.5em' }" />
@@ -107,7 +107,7 @@ export class TemplateDoc {
     <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
         <tr [ttRow]="rowNode">
             <td *ngFor="let col of columns; let i = index; let last = last">
-                <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                 {{ rowData[col.field] }}
                 <ng-container *ngIf="last">
                     <p-button icon="pi pi-search" rounded="true" [style]="{ 'margin-right': '.5em' }" />