From 9b7db214b6625eabae93c4decdb4021572a08a0a Mon Sep 17 00:00:00 2001
From: Ryan O'Hern <ryanohern@gmail.com>
Date: Thu, 4 Nov 2021 14:14:39 -0400
Subject: [PATCH] Update DataTable.vue

When wrapping vue components, default slots get nested inside the slot's children array. So if you attempt to pass default slots down through multiple layers, they will be nested further. See link below. Currently, the DataTable component can only be wrapped once as the computed property for columns() only checks against the children array and is not recursive. If you attempt to wrap the components inside multiple layers, it does not work. Proposed is an update to the columns computed property to make it recursive.

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCBHcmFuZFBhcmVudCBmcm9tICcuL0dyYW5kUGFyZW50LnZ1ZSc7XG5cblxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPGgxPkdyZWF0R3JhbmRQYXJlbnQ8L2gxPlxuICA8R3JhbmRQYXJlbnQ+XG4gIFx0PHNwYW4+Q29sdW1uIDE8L3NwYW4+XG4gICAgPHNwYW4+Q29sdW1uIDI8L3NwYW4+XG4gICAgPHNwYW4+Q29sdW1uIDM8L3NwYW4+XG4gICAgPHRlbXBsYXRlICNjdXN0b20+XG4gICAgXHQ8c3Bhbj5DdXN0b20gMTwvc3Bhbj5cbiAgICAgIDxzcGFuPkN1c3RvbSAyPC9zcGFuPlxuICAgIDwvdGVtcGxhdGU+XG4gIDwvR3JhbmRQYXJlbnQ+XG48L3RlbXBsYXRlPiIsImltcG9ydC1tYXAuanNvbiI6IntcbiAgXCJpbXBvcnRzXCI6IHtcbiAgICBcInZ1ZVwiOiBcImh0dHBzOi8vdW5wa2cuY29tL0B2dWUvcnVudGltZS1kb21AMy4yLjIwL2Rpc3QvcnVudGltZS1kb20uZXNtLWJyb3dzZXIuanNcIlxuICB9XG59IiwiQ2hpbGQudnVlIjoiPHRlbXBsYXRlPlxuICA8aDM+XG4gICAgQ2hpbGRcbiAgPC9oMz5cbjwvdGVtcGxhdGU+XG5cbjxzY3JpcHQ+XG5leHBvcnQgZGVmYXVsdCB7XG4gIG5hbWU6ICdDaGlsZCcsXG4gIG1vdW50ZWQoKSB7XG4gICAgY29uc29sZS5sb2coJ0NoaWxkIGRlZmF1bHQgc2xvdHMnLCB0aGlzLiRzbG90cy5kZWZhdWx0KCkpO1xuICAgIGNvbnNvbGUubG9nKCdDaGlsZCBjdXN0b20gc2xvdHMnLCB0aGlzLiRzbG90cy5jdXN0b20oKSk7XG4gICAgY29uc29sZS5sb2coJ0dldCBjb2x1bW5zJywgdGhpcy5jb2x1bW5zKCkpO1xuICB9LFxuICBtZXRob2RzOiB7XG4gICAgY29sdW1ucygpIHtcbiAgICAgIGxldCBjb2xzID0gW107XG4gICAgICBsZXQgY2hpbGRyZW4gPSB0aGlzLiRzbG90cy5kZWZhdWx0KCk7XG5cbiAgICAgIGlmICghY2hpbGRyZW4pIHtcbiAgICAgICAgcmV0dXJuO1xuICAgICAgfVxuXG4gICAgICBjaGlsZHJlbi5mb3JFYWNoKGNoaWxkID0+IHtcbiAgICAgICAgaWYgKGNoaWxkLmNoaWxkcmVuICYmIGNoaWxkLmNoaWxkcmVuIGluc3RhbmNlb2YgQXJyYXkpXG4gICAgICAgICAgY29scyA9IFsuLi5jb2xzLCAuLi5jaGlsZC5jaGlsZHJlbl07XG4gICAgICAgIGVsc2UgaWYgKGNoaWxkLnR5cGUubmFtZSA9PT0gJ0NvbHVtbicpXG4gICAgICAgICAgY29scy5wdXNoKGNoaWxkKTtcbiAgICAgIH0pO1xuICAgICAgcmV0dXJuIGNvbHM7XG4gICAgfVxuICB9XG59XG48L3NjcmlwdD4iLCJQYXJlbnQudnVlIjoiPHRlbXBsYXRlPlxuXHQ8aDM+UGFyZW50PC9oMz5cbiAgPENoaWxkPlxuICAgIDx0ZW1wbGF0ZSB2LWZvcj1cIihpbmRleCwgbmFtZSkgaW4gJHNsb3RzXCIgdi1zbG90OltuYW1lXT5cbiAgICBcdDxzbG90IDpuYW1lPVwibmFtZVwiPjwvc2xvdD5cblx0XHQ8L3RlbXBsYXRlPlxuICA8L0NoaWxkPlxuPC90ZW1wbGF0ZT5cblxuPHNjcmlwdD5cbmltcG9ydCBDaGlsZCBmcm9tICcuL0NoaWxkLnZ1ZSc7XG5leHBvcnQgZGVmYXVsdCB7XG4gIG5hbWU6ICdQYXJlbnQnLFxuICBjb21wb25lbnRzOiB7IENoaWxkIH0sXG4gIG1vdW50ZWQoKSB7XG4gICAgY29uc29sZS5sb2coJ1BhcmVudCBkZWZhdWx0IHNsb3RzJywgdGhpcy4kc2xvdHMuZGVmYXVsdCgpKTtcbiAgICBjb25zb2xlLmxvZygnUGFyZW50IGN1c3RvbSBzbG90cycsIHRoaXMuJHNsb3RzLmN1c3RvbSgpKTtcbiAgfSxcbn1cbjwvc2NyaXB0PiIsIkdyYW5kUGFyZW50LnZ1ZSI6Ijx0ZW1wbGF0ZT5cblx0PGgzPkdyYW5kUGFyZW50PC9oMz5cbiAgPFBhcmVudD5cbiAgICA8dGVtcGxhdGUgdi1mb3I9XCIoaW5kZXgsIG5hbWUpIGluICRzbG90c1wiIHYtc2xvdDpbbmFtZV0+XG4gICAgXHQ8c2xvdCA6bmFtZT1cIm5hbWVcIj48L3Nsb3Q+XG5cdFx0PC90ZW1wbGF0ZT5cbiAgPC9QYXJlbnQ+XG48L3RlbXBsYXRlPlxuXG48c2NyaXB0PlxuaW1wb3J0IFBhcmVudCBmcm9tICcuL1BhcmVudC52dWUnO1xuZXhwb3J0IGRlZmF1bHQge1xuICBuYW1lOiAnR3JhbmRQYXJlbnQnLFxuICBjb21wb25lbnRzOiB7IFBhcmVudCB9LFxuICBtb3VudGVkKCkge1xuICAgIGNvbnNvbGUubG9nKCdHcmFuZFBhcmVudCBkZWZhdWx0IHNsb3RzJywgdGhpcy4kc2xvdHMuZGVmYXVsdCgpKTtcbiAgICBjb25zb2xlLmxvZygnR3JhbmRQYXJlbnQgY3VzdG9tIHNsb3RzJywgdGhpcy4kc2xvdHMuY3VzdG9tKCkpO1xuICB9LFxufVxuPC9zY3JpcHQ+In0=
---
 src/components/datatable/DataTable.vue | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index d5c823fba..c7701d4ce 100755
--- a/src/components/datatable/DataTable.vue
+++ b/src/components/datatable/DataTable.vue
@@ -1746,7 +1746,22 @@ export default {
                 document.head.removeChild(this.styleElement);
                 this.styleElement = null;
             }
-        }
+        },
+        recursiveGetChildren(children, results) {
+            if (!results) {
+                results = [];
+            }
+            if (children && children.length) {
+                children.forEach((child) => {
+                    if (child.children instanceof Array) {
+                        results.concat(this.recursiveGetChildren(child.children, results));
+                    } else if (child.type.name == 'Column') {
+                        results.push(child);
+                    }
+                });
+            }
+            return results;
+        },
     },
     computed: {
         containerClass() {
@@ -1771,19 +1786,13 @@ export default {
             ];
         },
         columns() {
-            let cols = [];
             let children = this.getChildren();
 
             if (!children) {
                 return;
             }
 
-            children.forEach(child => {
-                if (child.children && child.children instanceof Array)
-                    cols = [...cols, ...child.children];
-                else if (child.type.name === 'Column')
-                    cols.push(child);
-            });
+            const cols = this.recursiveGetChildren(children, []);
 
             if (this.reorderableColumns && this.d_columnOrder) {
                 let orderedColumns = [];