From 00de976cc60c92696d22bb8c5f6af238b8531ba0 Mon Sep 17 00:00:00 2001
From: Mike O'Donnell <mikerodonnell89@gmail.com>
Date: Fri, 26 May 2023 08:16:40 -0600
Subject: [PATCH 1/7] fix(platform): try adding debounceTime to virtual scroll

---
 libs/platform/src/lib/table/table.component.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/libs/platform/src/lib/table/table.component.ts b/libs/platform/src/lib/table/table.component.ts
index 7ad57cbd4fc..feb6c190aaf 100644
--- a/libs/platform/src/lib/table/table.component.ts
+++ b/libs/platform/src/lib/table/table.component.ts
@@ -2375,7 +2375,10 @@ export class TableComponent<T = any>
         this._subscriptions.add(
             this._tableScrollDispatcher
                 .verticallyScrolled()
-                .pipe(filter(() => this.virtualScroll && !!this.bodyHeight))
+                .pipe(
+                    filter(() => this.virtualScroll && !!this.bodyHeight),
+                    debounceTime(50)
+                )
                 .subscribe(() => {
                     this._calculateVirtualScrollRows();
                 })

From 42f0189e6661e5e80c692613f18b1ab4eb1bb895 Mon Sep 17 00:00:00 2001
From: Mike O'Donnell <mikerodonnell89@gmail.com>
Date: Fri, 26 May 2023 14:57:02 -0600
Subject: [PATCH 2/7] fix(platform): improve tree table docs

---
 .../platform-documentation-data.ts            |  1 +
 .../tree-table/tree-table-docs.component.html | 51 +++++++++++++++++++
 .../tree-table/tree-table-docs.component.ts   | 34 +++++++++++++
 ...platform-table-tree-example.component.html |  3 +-
 .../platform-table-tree-example.component.ts  |  4 +-
 .../table/platform-table-docs.component.html  | 50 ------------------
 .../platform/table/platform-table.module.ts   |  3 ++
 7 files changed, 94 insertions(+), 52 deletions(-)
 create mode 100644 libs/docs/platform/table/child-docs/tree-table/tree-table-docs.component.html
 create mode 100644 libs/docs/platform/table/child-docs/tree-table/tree-table-docs.component.ts

diff --git a/apps/docs/src/app/platform/documentation/platform-documentation-data.ts b/apps/docs/src/app/platform/documentation/platform-documentation-data.ts
index 261f5fcb335..37881e90c18 100644
--- a/apps/docs/src/app/platform/documentation/platform-documentation-data.ts
+++ b/apps/docs/src/app/platform/documentation/platform-documentation-data.ts
@@ -37,6 +37,7 @@ export const components: SectionInterfaceContent[] = [
         name: 'Table',
         subItems: [
             { url: 'platform/table/basic', name: 'Basic examples' },
+            { url: 'platform/table/tree-table', name: 'Tree Table' },
             { url: 'platform/table/p13-dialog-table', name: 'Personalization dialog' },
             { url: 'platform/table/settings-dialog-table', name: 'Settings dialog' },
             { url: 'platform/table/row-selection', name: 'Row selection' },
diff --git a/libs/docs/platform/table/child-docs/tree-table/tree-table-docs.component.html b/libs/docs/platform/table/child-docs/tree-table/tree-table-docs.component.html
new file mode 100644
index 00000000000..4e0912350d4
--- /dev/null
+++ b/libs/docs/platform/table/child-docs/tree-table/tree-table-docs.component.html
@@ -0,0 +1,51 @@
+<fd-docs-section-title id="tree" componentName="table"> Tree Table</fd-docs-section-title>
+<description>
+    This example shows tree table usage. To setup tree table use next properties:
+
+    <ul>
+        <li><code>[isTreeTable]</code> Whether tree mode enabled or no.</li>
+        <li><code>[relationKey]</code> Name of the field in the object which contains children nodes.</li>
+    </ul>
+
+    <h3>Drag & Drop</h3>
+
+    <p>Tree table supports mouse Drag & Drop by default, so rows can be moved & placed inside other rows.</p>
+    <p>
+        Drag & Drop events are simply client-side events and any desired backend changes must be handled by catching the
+        <code>(rowsRearrange)</code> event.
+    </p>
+
+    <p>
+        Drag and drop is available via keyboard by focusing a row or cell, holding the alt/option key and using the up
+        or down arrows.
+    </p>
+    <p>
+        By default, keyboard drag & drop works in shift mode, which means that focused item will ne moved on the same
+        level as it's siblings.
+    </p>
+    <p>
+        By pressing alt/option + shift key, drag & drop will use 'group' mode with the next sibling based on the
+        direction of drag & drop.
+    </p>
+    <p>Drag and drop can be disabled by setting the <code>[enableRowReordering]</code> input to <code>false</code>.</p>
+
+    <h3>Tree initialization</h3>
+    <p>
+        Tree can be initialized and and its state can be controlled by the application. In order to do this tree needs
+        be instantiated using <code>TableRow</code> interface, where application set initial state. Selection can be set
+        by using the <code>[selectedKey]</code> and <code>[selectableKey]</code> inputs. See
+        <a routerLink="/platform/table/row-selection">row selection</a> for more information.
+    </p>
+    <p>
+        You can also set <code>[enableTristateMode]</code>, to propagate selection from children to parents and parent
+        to children.
+    </p>
+    <p>
+        Tree row expansion can be handled by using the <code>[expandedStateKey]</code> input. The table also has the
+        <code>[expandOnInit]</code> boolean input which will expand all rows when the table first loads.
+    </p>
+</description>
+<component-example>
+    <fdp-platform-table-tree-example></fdp-platform-table-tree-example>
+</component-example>
+<code-example [exampleFiles]="treeTableFiles"></code-example>
diff --git a/libs/docs/platform/table/child-docs/tree-table/tree-table-docs.component.ts b/libs/docs/platform/table/child-docs/tree-table/tree-table-docs.component.ts
new file mode 100644
index 00000000000..d523bda87ce
--- /dev/null
+++ b/libs/docs/platform/table/child-docs/tree-table/tree-table-docs.component.ts
@@ -0,0 +1,34 @@
+import { ChangeDetectionStrategy, Component, inject, ViewEncapsulation } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { ExampleChildService, ExampleFile, getAssetFromModuleAssets } from '@fundamental-ngx/docs/shared';
+
+const platformTableTreeTableSrc = 'platform-table-tree-example.component.html';
+const platformTableTreeTableTsSrc = 'platform-table-tree-example.component.ts';
+@Component({
+    selector: 'fd-tree-table-docs',
+    templateUrl: './tree-table-docs.component.html',
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TreeTableDocsComponent {
+    childService = inject(ExampleChildService);
+    route = inject(ActivatedRoute);
+    treeTableFiles: ExampleFile[] = [
+        {
+            language: 'html',
+            code: getAssetFromModuleAssets(platformTableTreeTableSrc),
+            fileName: 'platform-table--tree-table-example',
+            name: 'platform-table-example.component.html'
+        },
+        {
+            language: 'typescript',
+            code: getAssetFromModuleAssets(platformTableTreeTableTsSrc),
+            fileName: 'platform-table--tree-table-example',
+            component: 'PlatformTableTreeTableExampleComponent',
+            name: 'platform-table-example.component.ts'
+        }
+    ];
+    constructor() {
+        this.childService.setLink(this.route.snapshot.routeConfig?.path);
+    }
+}
diff --git a/libs/docs/platform/table/examples/platform-table-tree-example.component.html b/libs/docs/platform/table/examples/platform-table-tree-example.component.html
index 20d8d1e4002..53267fafd75 100644
--- a/libs/docs/platform/table/examples/platform-table-tree-example.component.html
+++ b/libs/docs/platform/table/examples/platform-table-tree-example.component.html
@@ -8,8 +8,9 @@
     (rowSelectionChange)="onRowSelectionChange($event)"
     (rowToggleOpenState)="onRowToggleOpenState($event)"
     (rowsRearrange)="onRowsRearrange($event)"
+    expandedStateKey="expanded"
 >
-    <fdp-table-toolbar title="Order Line Items" [hideItemCount]="false" [showExpandCollapseButtons]="true">
+    <fdp-table-toolbar title="Order Line Items" [hideItemCount]="false">
         <fdp-table-toolbar-actions>
             <fdp-button label="Toggle first row" (click)="toggleFirstRow()"></fdp-button>
         </fdp-table-toolbar-actions>
diff --git a/libs/docs/platform/table/examples/platform-table-tree-example.component.ts b/libs/docs/platform/table/examples/platform-table-tree-example.component.ts
index e46959c1fc5..e4376f97fcd 100644
--- a/libs/docs/platform/table/examples/platform-table-tree-example.component.ts
+++ b/libs/docs/platform/table/examples/platform-table-tree-example.component.ts
@@ -62,6 +62,7 @@ export interface ExampleItem {
     date?: FdDate;
     verified?: boolean;
     children?: ExampleItem[];
+    expanded?: boolean;
 }
 
 /**
@@ -125,7 +126,7 @@ function convertToTree(parent: TableRow | null, items: ExampleItem[], level = 0)
             value,
             parent,
             level,
-            expanded: false
+            expanded: value.expanded
         });
 
         if (value.children && value.children.length > 0) {
@@ -171,6 +172,7 @@ const ITEMS: ExampleItem[] = [
     },
     {
         name: 'Screens',
+        expanded: true,
         children: [
             {
                 name: 'Bending Screen 21HD',
diff --git a/libs/docs/platform/table/platform-table-docs.component.html b/libs/docs/platform/table/platform-table-docs.component.html
index aadb1d40415..b7245fac769 100644
--- a/libs/docs/platform/table/platform-table-docs.component.html
+++ b/libs/docs/platform/table/platform-table-docs.component.html
@@ -113,56 +113,6 @@
 
 <separator></separator>
 
-<fd-docs-section-title id="tree" componentName="table"> Tree Table</fd-docs-section-title>
-<description>
-    This example shows tree table usage. To setup tree table use next properties:
-
-    <ul>
-        <li><code>[isTreeTable]</code> Whether tree mode enabled or no.</li>
-        <li><code>[relationKey]</code> Name of the field in the object which contains children nodes.</li>
-    </ul>
-
-    <h3>Drag & Drop</h3>
-
-    <p>Tree table supports mouse Drag & Drop by default, so rows can be moved & placed inside other rows.</p>
-    <p>
-        Drag & Drop events are simply client-side events and any desired backend changes must be handled by catching the
-        <code>(rowsRearrange)</code> event.
-    </p>
-
-    <br />
-
-    <p>
-        Drag and drop is available via keyboard by focusing a row or cell, holding the alt/option key and using the up
-        or down arrows.
-    </p>
-    <p>
-        By default, keyboard drag & drop works in shift mode, which means that focused item will ne moved on the same
-        level as it's siblings.
-    </p>
-    <p>
-        By pressing alt/option + shift key, drag & drop will use 'group' mode with the next sibling based on the
-        direction of drag & drop.
-    </p>
-    <p>Drag and drop can be disabled by setting the <code>[enableRowReordering]</code> input to <code>false</code>.</p>
-
-    <h3>Tree initialization</h3>
-    <p>
-        Tree can be initialized and and its state can be controlled by the application. In order to do this tree needs
-        be instantiated using <code>TableRow</code> interface, where application set initial state.
-    </p>
-    <p>
-        You can also set <code>[enableTristateMode]</code>, to propagate selection from children to parents and parent
-        to children.
-    </p>
-</description>
-<component-example>
-    <fdp-platform-table-tree-example></fdp-platform-table-tree-example>
-</component-example>
-<code-example [exampleFiles]="treeTableFiles"></code-example>
-
-<separator></separator>
-
 <fd-docs-section-title id="no-data-custom-element" componentName="table">
     Custom component to render "No data" message
 </fd-docs-section-title>
diff --git a/libs/docs/platform/table/platform-table.module.ts b/libs/docs/platform/table/platform-table.module.ts
index 78b4b5e9eeb..f275bc9d6e4 100644
--- a/libs/docs/platform/table/platform-table.module.ts
+++ b/libs/docs/platform/table/platform-table.module.ts
@@ -67,6 +67,7 @@ import { PlatformMenuModule } from '@fundamental-ngx/platform/menu';
 import { P13DialogDocsComponent } from './child-docs/p13-dialog/p13-dialog-docs.component';
 import { SettingsDialogDocsComponent } from './child-docs/settings-dialog/settings-dialog-docs.component';
 import { RowSelectionDocsComponent } from './child-docs/row-selection/row-selection-docs.component';
+import { TreeTableDocsComponent } from './child-docs/tree-table/tree-table-docs.component';
 import { TableScrollingDocsComponent } from './child-docs/scrolling/table-scrolling-docs.component';
 import { ClickableRowsDocsComponent } from './child-docs/clickable-rows/clickable-rows-docs.component';
 import { PreservedStateDocsComponent } from './child-docs/preserving-state/preserved-state-docs.component';
@@ -85,6 +86,7 @@ const routes: Routes = [
             { path: 'settings-dialog-table', component: SettingsDialogDocsComponent },
             { path: 'scrolling', component: TableScrollingDocsComponent },
             { path: 'row-selection', component: RowSelectionDocsComponent },
+            { path: 'tree-table', component: TreeTableDocsComponent },
             { path: 'clickable-rows', component: ClickableRowsDocsComponent },
             { path: 'preserved-state', component: PreservedStateDocsComponent }
         ]
@@ -152,6 +154,7 @@ const routes: Routes = [
         P13DialogDocsComponent,
         SettingsDialogDocsComponent,
         RowSelectionDocsComponent,
+        TreeTableDocsComponent,
         TableScrollingDocsComponent,
         ClickableRowsDocsComponent,
         PreservedStateDocsComponent,

From 1a659e9c2384a7056ea928ddb973c9d0af05ae31 Mon Sep 17 00:00:00 2001
From: Mike O'Donnell <mikerodonnell89@gmail.com>
Date: Fri, 26 May 2023 15:52:06 -0600
Subject: [PATCH 3/7] fix(platform): e2e

---
 .../platform/table/e2e/table-tree.e2e-spec.ts | 57 +++++++++++++++++++
 .../docs/platform/table/e2e/table.e2e-spec.ts | 25 --------
 2 files changed, 57 insertions(+), 25 deletions(-)
 create mode 100644 libs/docs/platform/table/e2e/table-tree.e2e-spec.ts

diff --git a/libs/docs/platform/table/e2e/table-tree.e2e-spec.ts b/libs/docs/platform/table/e2e/table-tree.e2e-spec.ts
new file mode 100644
index 00000000000..44ae18bcce4
--- /dev/null
+++ b/libs/docs/platform/table/e2e/table-tree.e2e-spec.ts
@@ -0,0 +1,57 @@
+import { runCommonTests } from './table-common-tests';
+import { TablePo } from './table.po';
+import {
+    browserIsSafari,
+    click,
+    refreshPage,
+    getElementArrayLength,
+    scrollIntoView,
+    setValue,
+    waitForElDisplayed,
+    waitForPresent
+} from '../../../../../e2e';
+
+describe('Table component test suite', () => {
+    const tablePage = new TablePo('/table/tree-table');
+    const { tableRow, tableTreeExample, allInputFields, input, buttonSearch, arrowButton } = tablePage;
+
+    beforeAll(async () => {
+        await tablePage.open();
+    }, 1);
+
+    afterEach(async () => {
+        await refreshPage();
+        await waitForPresent(tablePage.root);
+        await waitForElDisplayed(tablePage.title);
+    }, 1);
+
+    if (browserIsSafari()) {
+        // skip due to unknown error where browser closes halfway through the test
+        return;
+    }
+
+    describe('Check Tree Table', () => {
+        it('should check table item single selection', async () => {
+            await scrollIntoView(tableTreeExample);
+            await setValue(tableTreeExample + input, 'Laptops');
+            await click(tableTreeExample + buttonSearch);
+            const rowLength = await getElementArrayLength(tableTreeExample + tableRow);
+            await expect(rowLength).toEqual(1);
+        });
+
+        it('should check checkboxes', async () => {
+            await tablePage.checkAllCheckbox(tableTreeExample);
+        });
+
+        it('should check expanded table row', async () => {
+            await scrollIntoView(tableTreeExample);
+            const arrowButtonLength = await getElementArrayLength(tableTreeExample + arrowButton);
+            for (let i = 0; i < arrowButtonLength; i++) {
+                await click(tableTreeExample + arrowButton, i);
+            }
+            await expect(await getElementArrayLength(tableTreeExample + tableRow)).toEqual(20);
+        });
+    });
+
+    runCommonTests(allInputFields, tablePage);
+});
diff --git a/libs/docs/platform/table/e2e/table.e2e-spec.ts b/libs/docs/platform/table/e2e/table.e2e-spec.ts
index 842a088bb4d..41a5e4a1333 100644
--- a/libs/docs/platform/table/e2e/table.e2e-spec.ts
+++ b/libs/docs/platform/table/e2e/table.e2e-spec.ts
@@ -67,8 +67,6 @@ describe('Table component test suite', () => {
         tableRowInitialState,
         tableCellInitialState,
         synchronizeButton,
-        tableTreeExample,
-        arrowButton,
         tableWrapExample,
         tableNoOuterBordersExample
     } = tablePage;
@@ -225,29 +223,6 @@ describe('Table component test suite', () => {
         });
     });
 
-    describe('Check Tree Table', () => {
-        it('should check table item single selection', async () => {
-            await scrollIntoView(tableTreeExample);
-            await setValue(tableTreeExample + input, 'Laptops');
-            await click(tableTreeExample + buttonSearch);
-            const rowLength = await getElementArrayLength(tableTreeExample + tableRow);
-            await expect(rowLength).toEqual(1);
-        });
-
-        it('should check checkboxes', async () => {
-            await tablePage.checkAllCheckbox(tableTreeExample);
-        });
-
-        it('should check expanded table row', async () => {
-            await scrollIntoView(tableTreeExample);
-            const arrowButtonLength = await getElementArrayLength(tableTreeExample + arrowButton);
-            for (let i = 0; i < arrowButtonLength; i++) {
-                await click(tableTreeExample + arrowButton, i);
-            }
-            await expect(await getElementArrayLength(tableTreeExample + tableRow)).toEqual(20);
-        });
-    });
-
     describe('Checks for all examples', () => {
         it('should check placeholders in all input fields', async () => {
             const inputLength = await getElementArrayLength(inputFields);

From b1f84e2a556586ca4ecf2752bbbe54d0110840ec Mon Sep 17 00:00:00 2001
From: Mike O'Donnell <mikerodonnell89@gmail.com>
Date: Fri, 26 May 2023 08:16:40 -0600
Subject: [PATCH 4/7] fix(platform): try adding debounceTime to virtual scroll

---
 libs/platform/src/lib/table/table.component.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/libs/platform/src/lib/table/table.component.ts b/libs/platform/src/lib/table/table.component.ts
index 7ad57cbd4fc..feb6c190aaf 100644
--- a/libs/platform/src/lib/table/table.component.ts
+++ b/libs/platform/src/lib/table/table.component.ts
@@ -2375,7 +2375,10 @@ export class TableComponent<T = any>
         this._subscriptions.add(
             this._tableScrollDispatcher
                 .verticallyScrolled()
-                .pipe(filter(() => this.virtualScroll && !!this.bodyHeight))
+                .pipe(
+                    filter(() => this.virtualScroll && !!this.bodyHeight),
+                    debounceTime(50)
+                )
                 .subscribe(() => {
                     this._calculateVirtualScrollRows();
                 })

From a3564c01a36426698158aa3bd545db86a7161c37 Mon Sep 17 00:00:00 2001
From: Mike O'Donnell <mikerodonnell89@gmail.com>
Date: Fri, 26 May 2023 14:57:02 -0600
Subject: [PATCH 5/7] fix(platform): improve tree table docs

---
 .../platform-documentation-data.ts            |  1 +
 .../tree-table/tree-table-docs.component.html | 51 +++++++++++++++++++
 .../tree-table/tree-table-docs.component.ts   | 34 +++++++++++++
 ...platform-table-tree-example.component.html |  3 +-
 .../platform-table-tree-example.component.ts  |  4 +-
 .../table/platform-table-docs.component.html  | 50 ------------------
 .../platform/table/platform-table.module.ts   |  3 ++
 7 files changed, 94 insertions(+), 52 deletions(-)
 create mode 100644 libs/docs/platform/table/child-docs/tree-table/tree-table-docs.component.html
 create mode 100644 libs/docs/platform/table/child-docs/tree-table/tree-table-docs.component.ts

diff --git a/apps/docs/src/app/platform/documentation/platform-documentation-data.ts b/apps/docs/src/app/platform/documentation/platform-documentation-data.ts
index 261f5fcb335..37881e90c18 100644
--- a/apps/docs/src/app/platform/documentation/platform-documentation-data.ts
+++ b/apps/docs/src/app/platform/documentation/platform-documentation-data.ts
@@ -37,6 +37,7 @@ export const components: SectionInterfaceContent[] = [
         name: 'Table',
         subItems: [
             { url: 'platform/table/basic', name: 'Basic examples' },
+            { url: 'platform/table/tree-table', name: 'Tree Table' },
             { url: 'platform/table/p13-dialog-table', name: 'Personalization dialog' },
             { url: 'platform/table/settings-dialog-table', name: 'Settings dialog' },
             { url: 'platform/table/row-selection', name: 'Row selection' },
diff --git a/libs/docs/platform/table/child-docs/tree-table/tree-table-docs.component.html b/libs/docs/platform/table/child-docs/tree-table/tree-table-docs.component.html
new file mode 100644
index 00000000000..4e0912350d4
--- /dev/null
+++ b/libs/docs/platform/table/child-docs/tree-table/tree-table-docs.component.html
@@ -0,0 +1,51 @@
+<fd-docs-section-title id="tree" componentName="table"> Tree Table</fd-docs-section-title>
+<description>
+    This example shows tree table usage. To setup tree table use next properties:
+
+    <ul>
+        <li><code>[isTreeTable]</code> Whether tree mode enabled or no.</li>
+        <li><code>[relationKey]</code> Name of the field in the object which contains children nodes.</li>
+    </ul>
+
+    <h3>Drag & Drop</h3>
+
+    <p>Tree table supports mouse Drag & Drop by default, so rows can be moved & placed inside other rows.</p>
+    <p>
+        Drag & Drop events are simply client-side events and any desired backend changes must be handled by catching the
+        <code>(rowsRearrange)</code> event.
+    </p>
+
+    <p>
+        Drag and drop is available via keyboard by focusing a row or cell, holding the alt/option key and using the up
+        or down arrows.
+    </p>
+    <p>
+        By default, keyboard drag & drop works in shift mode, which means that focused item will ne moved on the same
+        level as it's siblings.
+    </p>
+    <p>
+        By pressing alt/option + shift key, drag & drop will use 'group' mode with the next sibling based on the
+        direction of drag & drop.
+    </p>
+    <p>Drag and drop can be disabled by setting the <code>[enableRowReordering]</code> input to <code>false</code>.</p>
+
+    <h3>Tree initialization</h3>
+    <p>
+        Tree can be initialized and and its state can be controlled by the application. In order to do this tree needs
+        be instantiated using <code>TableRow</code> interface, where application set initial state. Selection can be set
+        by using the <code>[selectedKey]</code> and <code>[selectableKey]</code> inputs. See
+        <a routerLink="/platform/table/row-selection">row selection</a> for more information.
+    </p>
+    <p>
+        You can also set <code>[enableTristateMode]</code>, to propagate selection from children to parents and parent
+        to children.
+    </p>
+    <p>
+        Tree row expansion can be handled by using the <code>[expandedStateKey]</code> input. The table also has the
+        <code>[expandOnInit]</code> boolean input which will expand all rows when the table first loads.
+    </p>
+</description>
+<component-example>
+    <fdp-platform-table-tree-example></fdp-platform-table-tree-example>
+</component-example>
+<code-example [exampleFiles]="treeTableFiles"></code-example>
diff --git a/libs/docs/platform/table/child-docs/tree-table/tree-table-docs.component.ts b/libs/docs/platform/table/child-docs/tree-table/tree-table-docs.component.ts
new file mode 100644
index 00000000000..d523bda87ce
--- /dev/null
+++ b/libs/docs/platform/table/child-docs/tree-table/tree-table-docs.component.ts
@@ -0,0 +1,34 @@
+import { ChangeDetectionStrategy, Component, inject, ViewEncapsulation } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { ExampleChildService, ExampleFile, getAssetFromModuleAssets } from '@fundamental-ngx/docs/shared';
+
+const platformTableTreeTableSrc = 'platform-table-tree-example.component.html';
+const platformTableTreeTableTsSrc = 'platform-table-tree-example.component.ts';
+@Component({
+    selector: 'fd-tree-table-docs',
+    templateUrl: './tree-table-docs.component.html',
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TreeTableDocsComponent {
+    childService = inject(ExampleChildService);
+    route = inject(ActivatedRoute);
+    treeTableFiles: ExampleFile[] = [
+        {
+            language: 'html',
+            code: getAssetFromModuleAssets(platformTableTreeTableSrc),
+            fileName: 'platform-table--tree-table-example',
+            name: 'platform-table-example.component.html'
+        },
+        {
+            language: 'typescript',
+            code: getAssetFromModuleAssets(platformTableTreeTableTsSrc),
+            fileName: 'platform-table--tree-table-example',
+            component: 'PlatformTableTreeTableExampleComponent',
+            name: 'platform-table-example.component.ts'
+        }
+    ];
+    constructor() {
+        this.childService.setLink(this.route.snapshot.routeConfig?.path);
+    }
+}
diff --git a/libs/docs/platform/table/examples/platform-table-tree-example.component.html b/libs/docs/platform/table/examples/platform-table-tree-example.component.html
index 20d8d1e4002..53267fafd75 100644
--- a/libs/docs/platform/table/examples/platform-table-tree-example.component.html
+++ b/libs/docs/platform/table/examples/platform-table-tree-example.component.html
@@ -8,8 +8,9 @@
     (rowSelectionChange)="onRowSelectionChange($event)"
     (rowToggleOpenState)="onRowToggleOpenState($event)"
     (rowsRearrange)="onRowsRearrange($event)"
+    expandedStateKey="expanded"
 >
-    <fdp-table-toolbar title="Order Line Items" [hideItemCount]="false" [showExpandCollapseButtons]="true">
+    <fdp-table-toolbar title="Order Line Items" [hideItemCount]="false">
         <fdp-table-toolbar-actions>
             <fdp-button label="Toggle first row" (click)="toggleFirstRow()"></fdp-button>
         </fdp-table-toolbar-actions>
diff --git a/libs/docs/platform/table/examples/platform-table-tree-example.component.ts b/libs/docs/platform/table/examples/platform-table-tree-example.component.ts
index e46959c1fc5..e4376f97fcd 100644
--- a/libs/docs/platform/table/examples/platform-table-tree-example.component.ts
+++ b/libs/docs/platform/table/examples/platform-table-tree-example.component.ts
@@ -62,6 +62,7 @@ export interface ExampleItem {
     date?: FdDate;
     verified?: boolean;
     children?: ExampleItem[];
+    expanded?: boolean;
 }
 
 /**
@@ -125,7 +126,7 @@ function convertToTree(parent: TableRow | null, items: ExampleItem[], level = 0)
             value,
             parent,
             level,
-            expanded: false
+            expanded: value.expanded
         });
 
         if (value.children && value.children.length > 0) {
@@ -171,6 +172,7 @@ const ITEMS: ExampleItem[] = [
     },
     {
         name: 'Screens',
+        expanded: true,
         children: [
             {
                 name: 'Bending Screen 21HD',
diff --git a/libs/docs/platform/table/platform-table-docs.component.html b/libs/docs/platform/table/platform-table-docs.component.html
index aadb1d40415..b7245fac769 100644
--- a/libs/docs/platform/table/platform-table-docs.component.html
+++ b/libs/docs/platform/table/platform-table-docs.component.html
@@ -113,56 +113,6 @@
 
 <separator></separator>
 
-<fd-docs-section-title id="tree" componentName="table"> Tree Table</fd-docs-section-title>
-<description>
-    This example shows tree table usage. To setup tree table use next properties:
-
-    <ul>
-        <li><code>[isTreeTable]</code> Whether tree mode enabled or no.</li>
-        <li><code>[relationKey]</code> Name of the field in the object which contains children nodes.</li>
-    </ul>
-
-    <h3>Drag & Drop</h3>
-
-    <p>Tree table supports mouse Drag & Drop by default, so rows can be moved & placed inside other rows.</p>
-    <p>
-        Drag & Drop events are simply client-side events and any desired backend changes must be handled by catching the
-        <code>(rowsRearrange)</code> event.
-    </p>
-
-    <br />
-
-    <p>
-        Drag and drop is available via keyboard by focusing a row or cell, holding the alt/option key and using the up
-        or down arrows.
-    </p>
-    <p>
-        By default, keyboard drag & drop works in shift mode, which means that focused item will ne moved on the same
-        level as it's siblings.
-    </p>
-    <p>
-        By pressing alt/option + shift key, drag & drop will use 'group' mode with the next sibling based on the
-        direction of drag & drop.
-    </p>
-    <p>Drag and drop can be disabled by setting the <code>[enableRowReordering]</code> input to <code>false</code>.</p>
-
-    <h3>Tree initialization</h3>
-    <p>
-        Tree can be initialized and and its state can be controlled by the application. In order to do this tree needs
-        be instantiated using <code>TableRow</code> interface, where application set initial state.
-    </p>
-    <p>
-        You can also set <code>[enableTristateMode]</code>, to propagate selection from children to parents and parent
-        to children.
-    </p>
-</description>
-<component-example>
-    <fdp-platform-table-tree-example></fdp-platform-table-tree-example>
-</component-example>
-<code-example [exampleFiles]="treeTableFiles"></code-example>
-
-<separator></separator>
-
 <fd-docs-section-title id="no-data-custom-element" componentName="table">
     Custom component to render "No data" message
 </fd-docs-section-title>
diff --git a/libs/docs/platform/table/platform-table.module.ts b/libs/docs/platform/table/platform-table.module.ts
index 78b4b5e9eeb..f275bc9d6e4 100644
--- a/libs/docs/platform/table/platform-table.module.ts
+++ b/libs/docs/platform/table/platform-table.module.ts
@@ -67,6 +67,7 @@ import { PlatformMenuModule } from '@fundamental-ngx/platform/menu';
 import { P13DialogDocsComponent } from './child-docs/p13-dialog/p13-dialog-docs.component';
 import { SettingsDialogDocsComponent } from './child-docs/settings-dialog/settings-dialog-docs.component';
 import { RowSelectionDocsComponent } from './child-docs/row-selection/row-selection-docs.component';
+import { TreeTableDocsComponent } from './child-docs/tree-table/tree-table-docs.component';
 import { TableScrollingDocsComponent } from './child-docs/scrolling/table-scrolling-docs.component';
 import { ClickableRowsDocsComponent } from './child-docs/clickable-rows/clickable-rows-docs.component';
 import { PreservedStateDocsComponent } from './child-docs/preserving-state/preserved-state-docs.component';
@@ -85,6 +86,7 @@ const routes: Routes = [
             { path: 'settings-dialog-table', component: SettingsDialogDocsComponent },
             { path: 'scrolling', component: TableScrollingDocsComponent },
             { path: 'row-selection', component: RowSelectionDocsComponent },
+            { path: 'tree-table', component: TreeTableDocsComponent },
             { path: 'clickable-rows', component: ClickableRowsDocsComponent },
             { path: 'preserved-state', component: PreservedStateDocsComponent }
         ]
@@ -152,6 +154,7 @@ const routes: Routes = [
         P13DialogDocsComponent,
         SettingsDialogDocsComponent,
         RowSelectionDocsComponent,
+        TreeTableDocsComponent,
         TableScrollingDocsComponent,
         ClickableRowsDocsComponent,
         PreservedStateDocsComponent,

From 625a900dbd5c00944ed23c0ed10148f515805d1d Mon Sep 17 00:00:00 2001
From: Mike O'Donnell <mikerodonnell89@gmail.com>
Date: Fri, 26 May 2023 15:52:06 -0600
Subject: [PATCH 6/7] fix(platform): e2e

---
 .../platform/table/e2e/table-tree.e2e-spec.ts | 57 +++++++++++++++++++
 .../docs/platform/table/e2e/table.e2e-spec.ts | 25 --------
 2 files changed, 57 insertions(+), 25 deletions(-)
 create mode 100644 libs/docs/platform/table/e2e/table-tree.e2e-spec.ts

diff --git a/libs/docs/platform/table/e2e/table-tree.e2e-spec.ts b/libs/docs/platform/table/e2e/table-tree.e2e-spec.ts
new file mode 100644
index 00000000000..44ae18bcce4
--- /dev/null
+++ b/libs/docs/platform/table/e2e/table-tree.e2e-spec.ts
@@ -0,0 +1,57 @@
+import { runCommonTests } from './table-common-tests';
+import { TablePo } from './table.po';
+import {
+    browserIsSafari,
+    click,
+    refreshPage,
+    getElementArrayLength,
+    scrollIntoView,
+    setValue,
+    waitForElDisplayed,
+    waitForPresent
+} from '../../../../../e2e';
+
+describe('Table component test suite', () => {
+    const tablePage = new TablePo('/table/tree-table');
+    const { tableRow, tableTreeExample, allInputFields, input, buttonSearch, arrowButton } = tablePage;
+
+    beforeAll(async () => {
+        await tablePage.open();
+    }, 1);
+
+    afterEach(async () => {
+        await refreshPage();
+        await waitForPresent(tablePage.root);
+        await waitForElDisplayed(tablePage.title);
+    }, 1);
+
+    if (browserIsSafari()) {
+        // skip due to unknown error where browser closes halfway through the test
+        return;
+    }
+
+    describe('Check Tree Table', () => {
+        it('should check table item single selection', async () => {
+            await scrollIntoView(tableTreeExample);
+            await setValue(tableTreeExample + input, 'Laptops');
+            await click(tableTreeExample + buttonSearch);
+            const rowLength = await getElementArrayLength(tableTreeExample + tableRow);
+            await expect(rowLength).toEqual(1);
+        });
+
+        it('should check checkboxes', async () => {
+            await tablePage.checkAllCheckbox(tableTreeExample);
+        });
+
+        it('should check expanded table row', async () => {
+            await scrollIntoView(tableTreeExample);
+            const arrowButtonLength = await getElementArrayLength(tableTreeExample + arrowButton);
+            for (let i = 0; i < arrowButtonLength; i++) {
+                await click(tableTreeExample + arrowButton, i);
+            }
+            await expect(await getElementArrayLength(tableTreeExample + tableRow)).toEqual(20);
+        });
+    });
+
+    runCommonTests(allInputFields, tablePage);
+});
diff --git a/libs/docs/platform/table/e2e/table.e2e-spec.ts b/libs/docs/platform/table/e2e/table.e2e-spec.ts
index 842a088bb4d..41a5e4a1333 100644
--- a/libs/docs/platform/table/e2e/table.e2e-spec.ts
+++ b/libs/docs/platform/table/e2e/table.e2e-spec.ts
@@ -67,8 +67,6 @@ describe('Table component test suite', () => {
         tableRowInitialState,
         tableCellInitialState,
         synchronizeButton,
-        tableTreeExample,
-        arrowButton,
         tableWrapExample,
         tableNoOuterBordersExample
     } = tablePage;
@@ -225,29 +223,6 @@ describe('Table component test suite', () => {
         });
     });
 
-    describe('Check Tree Table', () => {
-        it('should check table item single selection', async () => {
-            await scrollIntoView(tableTreeExample);
-            await setValue(tableTreeExample + input, 'Laptops');
-            await click(tableTreeExample + buttonSearch);
-            const rowLength = await getElementArrayLength(tableTreeExample + tableRow);
-            await expect(rowLength).toEqual(1);
-        });
-
-        it('should check checkboxes', async () => {
-            await tablePage.checkAllCheckbox(tableTreeExample);
-        });
-
-        it('should check expanded table row', async () => {
-            await scrollIntoView(tableTreeExample);
-            const arrowButtonLength = await getElementArrayLength(tableTreeExample + arrowButton);
-            for (let i = 0; i < arrowButtonLength; i++) {
-                await click(tableTreeExample + arrowButton, i);
-            }
-            await expect(await getElementArrayLength(tableTreeExample + tableRow)).toEqual(20);
-        });
-    });
-
     describe('Checks for all examples', () => {
         it('should check placeholders in all input fields', async () => {
             const inputLength = await getElementArrayLength(inputFields);

From 49074e4112b85ec292098ac41022220479241bf1 Mon Sep 17 00:00:00 2001
From: Mike O'Donnell <mikerodonnell89@gmail.com>
Date: Tue, 30 May 2023 16:12:44 -0600
Subject: [PATCH 7/7] fix: test

---
 libs/docs/platform/table/e2e/table-tree.e2e-spec.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/libs/docs/platform/table/e2e/table-tree.e2e-spec.ts b/libs/docs/platform/table/e2e/table-tree.e2e-spec.ts
index 924d4426ae8..44ae18bcce4 100644
--- a/libs/docs/platform/table/e2e/table-tree.e2e-spec.ts
+++ b/libs/docs/platform/table/e2e/table-tree.e2e-spec.ts
@@ -49,7 +49,6 @@ describe('Table component test suite', () => {
             for (let i = 0; i < arrowButtonLength; i++) {
                 await click(tableTreeExample + arrowButton, i);
             }
-            tick(100);
             await expect(await getElementArrayLength(tableTreeExample + tableRow)).toEqual(20);
         });
     });