Fixed #749 - DataTable throws error when there are no columns

src/components/datatable/DataTable.vue

@@ -1644,6 +1644,9 @@ export default {
         },
         hasGlobalFilter() {
             return this.filters && Object.prototype.hasOwnProperty.call(this.filters, 'global');
+        },
+        getChildren() {
+            return this.$slots.default ? this.$slots.default() : null;
         }
     },
     computed: {
@@ -1662,7 +1665,11 @@ export default {
         },
         columns() {
             let cols = [];
-            let children = this.$slots.default();
+            let children = this.getChildren();
+
+            if (!children) {
+                return;
+            }
 
             children.forEach(child => {
                 if (child.dynamicChildren)
@@ -1713,42 +1720,50 @@ export default {
             return this.frozenColumns.length > 0;
         },
         headerColumnGroup() {
-            const children = this.$slots.default();
-            for (let child of children) {
-                if (child.type.name === 'columngroup' && child.props?.type === 'header') {
-                    return child;
+            const children = this.getChildren();
+            if (children) {
+                for (let child of children) {
+                    if (child.type.name === 'columngroup' && child.props?.type === 'header') {
+                        return child;
+                    }
                 }
             }
 
             return null;
         },
         frozenHeaderColumnGroup() {
-            const children = this.$slots.default();
-            for (let child of children) {
-                if (child.type.name === 'columngroup' && child.props?.type === 'frozenheader') {
-                    return child;
+            const children = this.getChildren();
+            if (children) {
+                for (let child of children) {
+                    if (child.type.name === 'columngroup' && child.props?.type === 'frozenheader') {
+                        return child;
+                    }
                 }
             }
 
             return null;
         },
         footerColumnGroup() {
-            const children = this.$slots.default();
-            for (let child of children) {
-                if (child.type.name === 'columngroup' && child.props?.type === 'footer') {
-                    return child;
+            const children = this.getChildren();
+            if (children) {
+                for (let child of children) {
+                    if (child.type.name === 'columngroup' && child.props?.type === 'footer') {
+                        return child;
+                    }
                 }
             }
 
             return null;
         },
         frozenFooterColumnGroup() {
-           const children = this.$slots.default();
-            for (let child of children) {
-                if (child.type.name === 'columngroup' && child.props?.type === 'frozenfooter') {
-                    return child;
+           const children = this.getChildren();
+            if (children) {
+                for (let child of children) {
+                    if (child.type.name === 'columngroup' && child.props?.type === 'frozenfooter') {
+                        return child;
+                    }
                 }
-            }
+           }
 
             return null;
         },

src/components/datatable/TableBody.vue

@@ -3,7 +3,7 @@
         <template v-if="!empty">
             <template v-for="(rowData, index) of value">
                 <tr class="p-rowgroup-header" v-if="templates['groupheader'] && rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, index)" :key="getRowKey(rowData, index) + '_subheader'">
-                    <td :colspan="columns.length - 1">
+                    <td :colspan="columnsLength - 1">
                         <button class="p-row-toggler p-link" @click="onRowGroupToggle($event, rowData)" v-if="expandableRowGroups" type="button">
                             <span :class="rowGroupTogglerIcon(rowData)"></span>
                         </button>
@@ -25,7 +25,7 @@
                     </template>
                 </tr>
                 <tr class="p-datatable-row-expansion" v-if="templates['expansion'] && expandedRows && isRowExpanded(rowData)" :key="getRowKey(rowData, index) + '_expansion'">
-                    <td :colspan="columns.length">
+                    <td :colspan="columnsLength">
                         <component :is="templates['expansion']" :data="rowData" :index="index" />
                     </td>
                 </tr>
@@ -35,7 +35,7 @@
             </template>
         </template>
         <tr v-else class="p-datatable-emptymessage">
-            <td :colspan="columns.length">
+            <td :colspan="columnsLength">
                 <component :is="templates.empty" v-if="templates.empty && !loading" />
                 <component :is="templates.loading" v-if="templates.loading && loading" />
             </td>
@@ -406,6 +406,11 @@ export default {
             this.$emit('row-edit-cancel', event);
         }
     },
+    computed: {
+        columnsLength() {
+            return this.columns ? this.columns.length : 0;
+        }
+    },
     components: {
         'DTBodyCell': BodyCell
     }

src/components/datatable/TableFooter.vue

@@ -38,7 +38,7 @@ export default {
             if (this.columnGroup) {
                 hasFooter = true;
             }
-            else {
+            else if (this.columns) {
                 for (let col of this.columns) {
                     if (col.props?.footer || (col.children && col.children.footer)) {
                         hasFooter = true;