Use functional components for TreeTable rendering

src/components/treetable/TreeTable.vue

@@ -46,7 +46,7 @@
 
 <script>
 import TreeTableColumnSlot from './TreeTableColumnSlot';
-import TreeTableRow from './TreeTableRow';
+import TreeTableRowLoader from './TreeTableRowLoader';
 
 export default {
     props: {
@@ -243,7 +243,7 @@ export default {
     },
     components: {
         'TTColumnSlot': TreeTableColumnSlot,
-        'TTRow': TreeTableRow
+        'TTRow': TreeTableRowLoader
     }
 }
 </script>

src/components/treetable/TreeTableRow.vue

@@ -13,7 +13,6 @@
 <script>
 import ObjectUtils from '../utils/ObjectUtils';
 import TreeTableColumnSlot from './TreeTableColumnSlot';
-import { Fragment } from 'vue-fragment';
 
 export default {
     name: 'sub-ttnode',
@@ -83,14 +82,10 @@ export default {
         },
         childLevel() {
             return this.level + 1;
-        },
-        childrenToRender() {
-            return this.expanded ? this.node.children: null;
         }
     },
     components: {
-        'TTColumnSlot': TreeTableColumnSlot,
-        'TTFragment': Fragment
+        'TTColumnSlot': TreeTableColumnSlot
     }
 }
 </script>

src/components/treetable/TreeTableRowLoader.vue

@@ -0,0 +1,65 @@
+<script>
+import TreeTableRow from './TreeTableRow';
+import TreeTableRowRecursiveLoader from './TreeTableRowRecursiveLoader';
+
+export default {
+    functional: true,
+    props: {
+        node: {
+            type: null,
+            default: null
+        },
+        columns: {
+            type: null,
+            default: null
+        },
+        expandedKeys: {
+            type: null,
+            default: null
+        },
+        selectionKeys: {
+            type: null,
+            default: null
+        },
+        selectionMode: {
+            type: String,
+            default: null
+        },
+        level: {
+            type: Number,
+            default: 0
+        }
+    },
+    render(createElement, context) {
+        const root = createElement(TreeTableRow, { 
+            props: context.props,
+            on: {
+                'node-toggle': context.listeners['node-toggle']
+            }
+        });
+
+        let element = [root];
+        const node = context.props.node;
+        const expanded = context.props.expandedKeys && context.props.expandedKeys[node.key] === true;
+
+        if (expanded) {
+            for (let childNode of node.children) {
+                let childNodeProps = {...context.props};
+                childNodeProps.node = childNode;
+                childNodeProps.level = context.props.level + 1;
+
+                let childNodeElement = createElement(TreeTableRowRecursiveLoader, { 
+                    props: childNodeProps,
+                    on: {
+                        'node-toggle': context.listeners['node-toggle']
+                    }
+                });
+
+                element.push(childNodeElement);
+            }
+        }
+
+        return element;
+    }
+};
+</script>

src/components/treetable/TreeTableRowRecursiveLoader.vue

@@ -0,0 +1,66 @@
+<script>
+/* Workaround as functional vue component does not allow recursive call and vue fragments are only available in 3.0 */
+import TreeTableRow from './TreeTableRow';
+import TreeTableRowLoader from './TreeTableRowLoader';
+
+export default {
+    functional: true,
+    props: {
+        node: {
+            type: null,
+            default: null
+        },
+        columns: {
+            type: null,
+            default: null
+        },
+        expandedKeys: {
+            type: null,
+            default: null
+        },
+        selectionKeys: {
+            type: null,
+            default: null
+        },
+        selectionMode: {
+            type: String,
+            default: null
+        },
+        level: {
+            type: Number,
+            default: 0
+        }
+    },
+    render(createElement, context) {
+        const root = createElement(TreeTableRow, { 
+            props: context.props,
+            on: {
+                'node-toggle': context.listeners['node-toggle']
+            }
+        });
+
+        let element = [root];
+        const node = context.props.node;
+        const expanded = context.props.expandedKeys && context.props.expandedKeys[node.key] === true;
+
+        if (expanded) {
+            for (let childNode of node.children) {
+                let childNodeProps = {...context.props};
+                childNodeProps.node = childNode;
+                childNodeProps.level = context.props.level + 1;
+
+                let childNodeElement = createElement(TreeTableRowLoader, { 
+                    props: childNodeProps,
+                    on: {
+                        'node-toggle': context.listeners['node-toggle']
+                    }
+                });
+
+                element.push(childNodeElement);
+            }
+        }
+
+        return element;
+    }
+};
+</script>