primevue 2.5.0 → 2.8.0

package/datatable/FooterCell.vue

@@ -0,0 +1,82 @@
+<template>
+    <td :style="containerStyle" :class="containerClass" role="cell"
+        :colspan="columnProp('colspan')" :rowspan="columnProp('rowspan')">
+        <ColumnSlot :data="column.$scopedSlots.footer" :column="column" type="footer" v-if="column.$scopedSlots && column.$scopedSlots.footer"/>
+        {{columnProp('footer')}}
+    </td>
+</template>
+
+<script>
+import ColumnSlot from './ColumnSlot';
+import DomHandler from '../utils/DomHandler';
+import ObjectUtils from '../utils/ObjectUtils';
+
+export default {
+    props: {
+        column: {
+            type: null,
+            default: null
+        }
+    },
+    data() {
+        return {
+            styleObject: {
+                left: '',
+                right: ''
+            }
+        }
+    },
+    mounted() {
+        if (this.columnProp('frozen')) {
+            this.updateStickyPosition();
+        }
+    },
+    updated() {
+        if (this.columnProp('frozen')) {
+            this.updateStickyPosition();
+        }
+    },
+    methods: {
+        columnProp(prop) {
+            return ObjectUtils.getVNodeProp(this.column, prop);
+        },
+        updateStickyPosition() {
+            if (this.columnProp('frozen')) {
+                let align = this.columnProp('alignFrozen');
+                if (align === 'right') {
+                    let right = 0;
+                    let next = this.$el.nextElementSibling;
+                    if (next) {
+                        right = DomHandler.getOuterWidth(next) + parseFloat(next.style.left);
+                    }
+                    this.styleObject.right = right + 'px';
+                }
+                else {
+                    let left = 0;
+                    let prev = this.$el.previousElementSibling;
+                    if (prev) {
+                        left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left);
+                    }
+                    this.styleObject.left = left + 'px';
+                }
+            }
+        }
+    },
+    computed: {
+        containerClass() {
+            return [this.columnProp('footerClass'), this.columnProp('className'), {
+                'p-frozen-column': this.columnProp('frozen')
+            }];
+        },
+        containerStyle() {
+            let bodyStyle = this.columnProp('footerStyle');
+            let columnStyle = this.columnProp('styles');
+
+            return this.columnProp('frozen') ? [columnStyle, bodyStyle, this.styleObject]: [columnStyle, bodyStyle];
+        }
+    },
+    components: {
+        'ColumnSlot': ColumnSlot
+    }
+}
+</script>

package/datatable/HeaderCell.vue

@@ -0,0 +1,246 @@
+<template>
+    <th :style="containerStyle" :class="containerClass" :tabindex="columnProp('sortable') ? '0' : null" role="cell"
+        @click="onClick" @keydown="onKeyDown" @mousedown="onMouseDown"
+        @dragstart="onDragStart" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop"
+        :colspan="columnProp('colspan')" :rowspan="columnProp('rowspan')" :aria-sort="ariaSort">
+        <span class="p-column-resizer" @mousedown="onResizeStart" v-if="resizableColumns && !columnProp('frozen')"></span>
+        <div class="p-column-header-content">
+            <ColumnSlot :data="column.$scopedSlots.header" :column="column" type="header" v-if="column.$scopedSlots && column.$scopedSlots.header"/>
+            <span class="p-column-title" v-if="columnProp('header')">{{columnProp('header')}}</span>
+            <span v-if="columnProp('sortable')" :class="sortableColumnIcon"></span>
+            <span v-if="isMultiSorted()" class="p-sortable-column-badge">{{getBadgeValue()}}</span>
+            <DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange" :disabled="empty" v-if="columnProp('selectionMode') ==='multiple' && filterDisplay !== 'row'" />
+            <DTColumnFilter v-if="filterDisplay === 'menu' && column.$scopedSlots.filter" :field="columnProp('filterField')||columnProp('field')" :type="columnProp('dataType')" display="menu"
+            :showMenu="columnProp('showFilterMenu')" :filterElement="column.$scopedSlots.filter" :templates="column.$scopedSlots"
+            :filterHeaderTemplate="column.$scopedSlots.filterheader" :filterFooterTemplate="column.$scopedSlots.filterfooter"
+            :filterClearTemplate="column.$scopedSlots.filterclear" :filterApplyTemplate="column.$scopedSlots.filterapply"
+            :filters="filters" :filtersStore="filtersStore" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')" :filterMenuStyle="columnProp('filterMenuStyle')" :filterMenuClass="columnProp('filterMenuClass')"
+            :showOperator="columnProp('showFilterOperator')" :showClearButton="columnProp('showClearButton')" :showApplyButton="columnProp('showApplyButton')"
+            :showMatchModes="columnProp('showFilterMatchModes')" :showAddButton="columnProp('showAddButton')" :matchModeOptions="columnProp('filterMatchModeOptions')" :maxConstraints="columnProp('maxConstraints')"
+            @operator-change="$emit('operator-change',$event)" @matchmode-change="$emit('matchmode-change', $event)" @constraint-add="$emit('constraint-add', $event)" @constraint-remove="$emit('constraint-remove', $event)" @apply-click="$emit('apply-click',$event)"/>
+        </div>
+    </th>
+</template>
+
+<script>
+import DomHandler from '../utils/DomHandler';
+import ObjectUtils from '../utils/ObjectUtils';
+import ColumnSlot from './ColumnSlot.vue';
+import HeaderCheckbox from './HeaderCheckbox.vue';
+import ColumnFilter from './ColumnFilter.vue';
+
+export default {
+    props: {
+        column: {
+            type: Object,
+            default: null
+        },
+        resizableColumns: {
+            type: Boolean,
+            default: false
+        },
+        groupRowsBy: {
+            type: [Array,String],
+            default: null
+        },
+        sortMode: {
+            type: String,
+            default: 'single'
+        },
+        groupRowSortField: {
+            type: [String, Function],
+            default: null
+        },
+        sortField: {
+            type: [String, Function],
+            default: null
+        },
+        sortOrder: {
+            type: Number,
+            default: null
+        },
+        multiSortMeta: {
+            type: Array,
+            default: null
+        },
+        allRowsSelected: {
+            type: Boolean,
+            default: false
+        },
+        empty: {
+            type: Boolean,
+            default: false
+        },
+        filterDisplay: {
+            type: String,
+            default: null
+        },
+        filters: {
+            type: Object,
+            default: null
+        },
+        filtersStore: {
+            type: Object,
+            default: null
+        },
+        filterColumn: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {
+            styleObject: {
+                left: '',
+                right: ''
+            }
+        }
+    },
+    mounted() {
+        if (this.columnProp('frozen')) {
+            this.updateStickyPosition();
+        }
+    },
+    updated() {
+        if (this.columnProp('frozen')) {
+            this.updateStickyPosition();
+        }
+    },
+    methods: {
+        columnProp(prop) {
+            return ObjectUtils.getVNodeProp(this.column, prop);
+        },
+        onClick(event) {
+            this.$emit('column-click', {originalEvent: event, column: this.column});
+        },
+        onKeyDown(event) {
+            if (event.which === 13 && event.currentTarget.nodeName === 'TH' && DomHandler.hasClass(event.currentTarget, 'p-sortable-column')) {
+                this.$emit('column-click', {originalEvent: event, column: this.column});
+            }
+        },
+        onMouseDown(event) {
+            this.$emit('column-mousedown', {originalEvent: event, column: this.column});
+        },
+        onDragStart(event) {
+            this.$emit('column-dragstart', event);
+        },
+        onDragOver(event) {
+            this.$emit('column-dragover', event);
+        },
+        onDragLeave(event) {
+            this.$emit('column-dragleave', event);
+        },
+        onDrop(event) {
+            this.$emit('column-drop', event);
+        },
+        onResizeStart(event) {
+            this.$emit('column-resizestart', event);
+        },
+        getMultiSortMetaIndex() {
+            return this.multiSortMeta.findIndex(meta => (meta.field === this.columnProp('field') || meta.field === this.columnProp('sortField')));
+        },
+        getBadgeValue() {
+            let index = this.getMultiSortMetaIndex();
+
+            return (this.groupRowsBy && this.groupRowsBy === this.groupRowSortField) && index > -1 ? index : index + 1;
+        },
+        isMultiSorted() {
+            return this.sortMode === 'multiple' && this.columnProp('sortable') && this.getMultiSortMetaIndex() > -1
+        },
+        isColumnSorted() {
+            return this.sortMode === 'single' ? (this.sortField && (this.sortField === this.columnProp('field') || this.sortField === this.columnProp('sortField'))) : this.isMultiSorted();
+        },
+        updateStickyPosition() {
+            if (this.columnProp('frozen')) {
+                let align = this.columnProp('alignFrozen');
+                if (align === 'right') {
+                    let right = 0;
+                    let next = this.$el.nextElementSibling;
+                    if (next) {
+                        right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
+                    }
+                    this.styleObject.right = right + 'px';
+                }
+                else {
+                    let left = 0;
+                    let prev = this.$el.previousElementSibling;
+                    if (prev) {
+                        left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+                    }
+                    this.styleObject.left = left + 'px';
+                }
+
+                let filterRow = this.$el.parentElement.nextElementSibling;
+                if (filterRow) {
+                    let index = DomHandler.index(this.$el);
+                    filterRow.children[index].style.left = this.styleObject.left;
+                    filterRow.children[index].style.right = this.styleObject.right;
+                }
+            }
+        },
+        onHeaderCheckboxChange(event) {
+            this.$emit('checkbox-change', event);
+        }
+    },
+    computed: {
+        containerClass() {
+            return [this.filterColumn ? this.columnProp('filterHeaderClass') : this.columnProp('headerClass'), this.columnProp('className'), {
+                    'p-sortable-column': this.columnProp('sortable'),
+                    'p-resizable-column': this.resizableColumns,
+                    'p-highlight': this.isColumnSorted(),
+                    'p-filter-column': this.filterColumn,
+                    'p-frozen-column': this.columnProp('frozen')
+            }];
+        },
+        containerStyle() {
+            let headerStyle = this.filterColumn ? this.columnProp('filterHeaderStyle'): this.columnProp('headerStyle');
+            let columnStyle = this.columnProp('styles');
+
+            return this.columnProp('frozen') ? [columnStyle, headerStyle, this.styleObject]: [columnStyle, headerStyle];
+        },
+        sortableColumnIcon() {
+            let sorted = false;
+            let sortOrder = null;
+
+            if (this.sortMode === 'single') {
+                sorted = this.sortField && (this.sortField === this.columnProp('field') || this.sortField === this.columnProp('sortField'));
+                sortOrder = sorted ? this.sortOrder: 0;
+            }
+            else if (this.sortMode === 'multiple') {
+                let metaIndex = this.getMultiSortMetaIndex();
+                if (metaIndex > -1) {
+                    sorted = true;
+                    sortOrder = this.multiSortMeta[metaIndex].order;
+                }
+            }
+
+            return [
+                'p-sortable-column-icon pi pi-fw', {
+                    'pi-sort-alt': !sorted,
+                    'pi-sort-amount-up-alt': sorted && sortOrder > 0,
+                    'pi-sort-amount-down': sorted && sortOrder < 0
+                }
+            ];
+        },
+        ariaSort() {
+            if (this.columnProp('sortable')) {
+                const sortIcon = this.sortableColumnIcon;
+                if (sortIcon[1]['pi-sort-amount-down'])
+                    return 'descending';
+                else if (sortIcon[1]['pi-sort-amount-up-alt'])
+                    return 'ascending';
+                else
+                    return 'none';
+            }
+            else {
+                return null;
+            }
+        }
+    },
+    components: {
+        'DTHeaderCheckbox': HeaderCheckbox,
+        'DTColumnFilter': ColumnFilter,
+        'ColumnSlot': ColumnSlot
+    }
+}
+</script>

package/datatable/TableBody.vue

@@ -1,42 +1,42 @@
 <template>
-    <tbody class="p-datatable-tbody">
+    <tbody class="p-datatable-tbody" role="rowgroup">
         <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">
+                <tr class="p-rowgroup-header" :style="rowGroupHeaderStyle" v-if="templates['groupheader'] && rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, index)" :key="getRowKey(rowData, index) + '_subheader' + index" role="row">
+                    <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>
                         <DTRowExpansionTemplate :template="templates['groupheader']" :data="rowData" :index="index" />
                     </td>
                 </tr>
-                <tr :class="getRowClass(rowData)" :key="getRowKey(rowData, index)"
+                <tr :class="getRowClass(rowData)" :style="rowStyle" :key="getRowKey(rowData, index)"
                     v-if="expandableRowGroups ? isRowGroupExpanded(rowData): true"
-                    @click="onRowClick($event, rowData, index)" @dblclick="onRowDblClick($event, rowData, index)" @contextmenu="onRowRightClick($event, rowData, index)" @touchend="onRowTouchEnd($event)"
-                    @keydown="onRowKeyDown($event, rowData, index)" :tabindex="selectionMode || contextMenu ? '0' : null"
-                    @mousedown="onRowMouseDown($event)" @dragstart="onRowDragStart($event, index)" @dragover="onRowDragOver($event,index)" @dragleave="onRowDragLeave($event)" @dragend="onRowDragEnd($event)" @drop="onRowDrop($event)">
+                    @click="onRowClick($event, rowData, index)" @dblclick="onRowDblClick($event, rowData, index)" @contextmenu="onRowRightClick($event, rowData, index)" @touchend="onRowTouchEnd($event)" @keydown="onRowKeyDown($event, rowData, index)" :tabindex="selectionMode || contextMenu ? '0' : null"
+                    @mousedown="onRowMouseDown($event)" @dragstart="onRowDragStart($event, index)" @dragover="onRowDragOver($event,index)" @dragleave="onRowDragLeave($event)" @dragend="onRowDragEnd($event)" @drop="onRowDrop($event)" role="row">
                     <template v-for="(col,i) of columns">
-                        <DTBodyCell v-if="shouldRenderBodyCell(value, col, index)" :key="col.columnKey||col.field||i" :rowData="rowData" :column="col" :index="index" :selected="isSelected(rowData)"
-                            :rowTogglerIcon="col.expander ? rowTogglerIcon(rowData): null"
+                        <DTBodyCell v-if="shouldRenderBodyCell(value, col, index)" :rowData="rowData" :column="col" :rowIndex="index" :index="i" :selected="isSelected(rowData)" :key="columnProp(col,'columnKey')+i||columnProp(col,'field')+i||i"
+                            :rowTogglerIcon="columnProp(col,'expander') ? rowTogglerIcon(rowData): null" :frozenRow="frozenRow"
                             :rowspan="rowGroupMode === 'rowspan' ? calculateRowGroupSize(value, col, index) : null"
-                            :editMode="editMode" :editing="editMode === 'row' && isRowEditing(rowData)"
+                            :editMode="editMode" :editing="editMode === 'row' && isRowEditing(rowData)" :responsiveLayout="responsiveLayout"
                             @radio-change="onRadioChange($event)" @checkbox-change="onCheckboxChange($event)" @row-toggle="onRowToggle($event)"
                             @cell-edit-init="onCellEditInit($event)" @cell-edit-complete="onCellEditComplete($event)" @cell-edit-cancel="onCellEditCancel($event)"
-                            @row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)"/>
+                            @row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)"
+                            :editingMeta="editingMeta" @editing-meta-change="onEditingMetaChange"/>
                     </template>
                 </tr>
-                <tr class="p-datatable-row-expansion" v-if="templates['expansion'] && expandedRows && isRowExpanded(rowData)" :key="getRowKey(rowData, index) + '_expansion'">
-                    <td :colspan="columns.length">
+                <tr class="p-datatable-row-expansion" v-if="templates['expansion'] && expandedRows && isRowExpanded(rowData)" :key="getRowKey(rowData, index) + '_expansion' + index" role="row">
+                    <td :colspan="columnsLength">
                         <DTRowExpansionTemplate :template="templates['expansion']" :data="rowData" :index="index" />
                     </td>
                 </tr>
-                <tr class="p-rowgroup-footer" v-if="templates['groupfooter'] && rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, index)" :key="getRowKey(rowData, index) + '_subfooter'">
+                <tr class="p-rowgroup-footer" v-if="templates['groupfooter'] && rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, index)" :key="getRowKey(rowData, index) + '_subfooter' + index" role="row">
                     <DTRowExpansionTemplate :template="templates['groupfooter']" :data="rowData" :index="index" />
                 </tr>
             </template>
         </template>
         <tr v-else class="p-datatable-emptymessage">
-            <td :colspan="columns.length">
+            <td :colspan="columnsLength">
                 <DTSlotTemplate :template="templates.empty" v-if="templates.empty && !loading"/>
                 <DTSlotTemplate :template="templates.loading" v-if="templates.loading && loading"/>
             </td>
@@ -45,6 +45,7 @@
 </template>
 
 <script>
+import DomHandler from '../utils/DomHandler';
 import ObjectUtils from '../utils/ObjectUtils';
 import BodyCell from './BodyCell.vue';
 
@@ -101,6 +102,10 @@ export default {
             type: null,
             default: null
         },
+        frozenRow: {
+            type: Boolean,
+            default: false
+        },
         empty: {
             type: Boolean,
             default: false
@@ -165,6 +170,10 @@ export default {
             type: null,
             default: null
         },
+        rowStyle: {
+            type: null,
+            default: null
+        },
         editMode: {
             type: String,
             default: null
@@ -181,6 +190,10 @@ export default {
             type: null,
             default: null
         },
+        editingMeta: {
+            type: Object,
+            default: null
+        },
         loading: {
             type: Boolean,
             default: false
@@ -188,9 +201,43 @@ export default {
         templates: {
             type: null,
             default: null
+        },
+        scrollable: {
+            type: Boolean,
+            default: false
+        },
+        responsiveLayout: {
+            type: String,
+            default: 'stack'
+        }
+    },
+    mounted() {
+        if (this.frozenRow) {
+            this.updateFrozenRowStickyPosition();
+        }
+
+        if (this.scrollable && this.rowGroupMode === 'subheader') {
+            this.updateFrozenRowGroupHeaderStickyPosition();
+        }
+    },
+    updated() {
+        if (this.frozenRow) {
+            this.updateFrozenRowStickyPosition();
+        }
+
+        if (this.scrollable && this.rowGroupMode === 'subheader') {
+            this.updateFrozenRowGroupHeaderStickyPosition();
+        }
+    },
+    data() {
+        return {
+            rowGroupHeaderStyleObject: {}
         }
     },
     methods: {
+        columnProp(col, prop) {
+            return ObjectUtils.getVNodeProp(col, prop);
+        },
         shouldRenderRowGroupHeader(value, rowData, i) {
             let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
             let prevRowData = value[i - 1];
@@ -208,7 +255,7 @@ export default {
         getRowClass(rowData) {
             let rowStyleClass = [];
             if (this.selectionMode) {
-                 rowStyleClass.push('p-selectable-row');
+                rowStyleClass.push('p-selectable-row');
             }
 
             if (this.selection) {
@@ -252,14 +299,14 @@ export default {
         shouldRenderBodyCell(value, column, i) {
             if (this.rowGroupMode) {
                 if (this.rowGroupMode === 'subheader') {
-                    return this.groupRowsBy !== column.field;
+                    return this.groupRowsBy !== this.columnProp(column, 'field');
                 }
                 else if (this.rowGroupMode === 'rowspan') {
                     if (this.isGrouped(column)) {
                         let prevRowData = value[i - 1];
                         if (prevRowData) {
-                            let currentRowFieldData = ObjectUtils.resolveFieldData(value[i], column.field);
-                            let previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, column.field);
+                            let currentRowFieldData = ObjectUtils.resolveFieldData(value[i], this.columnProp(column, 'field'));
+                            let previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, this.columnProp(column, 'field'));
                             return currentRowFieldData !== previousRowFieldData;
                         }
                         else {
@@ -272,12 +319,12 @@ export default {
                 }
             }
             else {
-                return true;
+                return !this.columnProp(column, 'hidden');
             }
         },
         calculateRowGroupSize(value, column, index) {
             if (this.isGrouped(column)) {
-                let currentRowFieldData = ObjectUtils.resolveFieldData(value[index], column.field);
+                let currentRowFieldData = ObjectUtils.resolveFieldData(value[index], this.columnProp(column, 'field'));
                 let nextRowFieldData = currentRowFieldData;
                 let groupRowSpan = 0;
 
@@ -285,7 +332,7 @@ export default {
                     groupRowSpan++;
                     let nextRowData = value[++index];
                     if (nextRowData) {
-                        nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, column.field);
+                        nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, this.columnProp(column, 'field'));
                     }
                     else {
                         break;
@@ -307,7 +354,7 @@ export default {
             return ['p-row-toggler-icon pi', icon];
         },
         isGrouped(column) {
-            if (this.groupRowsBy) {
+            if (this.groupRowsBy && this.columnProp(column, 'field')) {
                 if (Array.isArray(this.groupRowsBy))
                     return this.groupRowsBy.indexOf(column.field) > -1;
                 else
@@ -447,6 +494,28 @@ export default {
         },
         onRowEditCancel(event) {
             this.$emit('row-edit-cancel', event);
+        },
+        onEditingMetaChange(event) {
+            this.$emit('editing-meta-change', event);
+        },
+        updateFrozenRowStickyPosition() {
+            this.$el.style.top = DomHandler.getOuterHeight(this.$el.previousElementSibling) + 'px';
+        },
+        updateFrozenRowGroupHeaderStickyPosition() {
+            let tableHeaderHeight = DomHandler.getOuterHeight(this.$el.previousElementSibling);
+            this.rowGroupHeaderStyleObject.top = tableHeaderHeight + 'px';
+        }
+    },
+    computed: {
+        columnsLength() {
+            return this.columns ? this.columns.length : 0;
+        },
+        rowGroupHeaderStyle() {
+            if (this.scrollable) {
+                return {top: this.rowGroupHeaderStyleObject.top};
+            }
+
+            return null;
         }
     },
     components: {

package/datatable/TableFooter.vue

@@ -1,26 +1,23 @@
 <template>
-    <tfoot class="p-datatable-tfoot" v-if="hasFooter">
-        <tr v-if="!columnGroup">
-            <td v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.footerStyle" :class="col.footerClass"
-                :colspan="col.colspan" :rowspan="col.rowspan">
-                <DTColumnSlot :column="col" type="footer" v-if="col.$scopedSlots.footer" />
-                {{col.footer}}
-            </td>
+    <tfoot class="p-datatable-tfoot" v-if="hasFooter" role="rowgroup">
+        <tr v-if="!columnGroup" role="row">
+            <template v-for="(col,i) of columns">
+                <DTFooterCell :column="col" v-if="!columnProp(col,'hidden')" :key="columnProp(col,'columnKey')||columnProp(col,'field')||i"/>
+            </template>
         </tr>
         <template v-else>
-            <tr v-for="(row,i) of columnGroup.rows" :key="i">
-                <td v-for="(col,i) of row.columns" :key="col.columnKey||col.field||i" :style="col.footerStyle" :class="col.footerClass"
-                    :colspan="col.colspan" :rowspan="col.rowspan">
-                    <DTColumnSlot :column="col" type="footer" v-if="col.$scopedSlots.footer" />
-                    {{col.footer}}
-                </td>
+            <tr v-for="(row,i) of columnGroup.$scopedSlots.default()" role="row" :key="i">
+                <template v-for="(col,j) of getFooterColumns(row)">
+                    <DTFooterCell :column="col.child" v-if="!columnProp(col,'hidden')" :key="columnProp(col,'columnKey')||columnProp(col,'field')||j"/>
+                </template>
             </tr>
         </template>
     </tfoot>
 </template>
 
 <script>
-import ColumnSlot from './ColumnSlot.vue';
+import FooterCell from './FooterCell.vue';
+import ObjectUtils from '../utils/ObjectUtils';
 
 export default {
     props: {
@@ -33,6 +30,25 @@ export default {
             default: null
         },
     },
+    methods: {
+        columnProp(col, prop) {
+            return ObjectUtils.getVNodeProp(col, prop);
+        },
+        getFooterColumns(row){
+            let cols = [];
+
+            if (row.child && row.child.$scopedSlots.default) {
+                row.child.$scopedSlots.default().forEach(child => {
+                    if (child.child && child.child.children && child.child.children instanceof Array)
+                        cols = [...cols, ...child.child.children];
+                    else if (child.componentOptions.tag === 'Column')
+                        cols.push(child);
+                });
+
+                return cols;
+            }
+        }
+    },
     computed: {
         hasFooter() {
             let hasFooter = false;
@@ -40,9 +56,9 @@ export default {
             if (this.columnGroup) {
                 hasFooter = true;
             }
-            else {
+            else if (this.columns) {
                 for (let col of this.columns) {
-                    if (col.footer || col.$scopedSlots.footer) {
+                    if (this.columnProp(col, 'footer') || (col.$scopedSlots && col.$scopedSlots.footer)) {
                         hasFooter = true;
                         break;
                     }
@@ -53,7 +69,7 @@ export default {
         }
     },
     components: {
-        'DTColumnSlot': ColumnSlot
+        'DTFooterCell': FooterCell
     }
 }
-</script>
+</script>