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

@@ -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 => {
+            const cols = this.recursiveGetChildren(children, []);
-                if (child.children && child.children instanceof Array)
-                    cols = [...cols, ...child.children];
-                else if (child.type.name === 'Column')
-                    cols.push(child);
-            });
 
             if (this.reorderableColumns && this.d_columnOrder) {
                 let orderedColumns = [];