Initiated TableBody component

src/components/datatable/DataTable.vue

@@ -24,51 +24,17 @@
                 <DTTableHeader :columnGroup="headerColumnGroup" :columns="columns" :rowGroupMode="rowGroupMode"
                         :groupRowsBy="groupRowsBy" :resizableColumns="resizableColumns" :allRowsSelected="allRowsSelected" :empty="empty"
                         :sortMode="sortMode" :sortField="d_sortField" :sortOrder="d_sortOrder" :multiSortMeta="d_multiSortMeta"
-                        @column-click="onColumnHeaderClick($event)"  @column-mousedown="onColumnHeaderMouseDown($event)"
+                        @column-click="onColumnHeaderClick($event)" @column-mousedown="onColumnHeaderMouseDown($event)"
                         @column-dragstart="onColumnHeaderDragStart($event)" @column-dragover="onColumnHeaderDragOver($event)" @column-dragleave="onColumnHeaderDragLeave($event)" @column-drop="onColumnHeaderDrop($event)"
                         @column-resizestart="onColumnResizeStart($event)" @checkbox-change="toggleRowsWithCheckbox($event)" />
-                <tbody class="p-datatable-tbody">
+                <DTTableBody :value="dataToRender" :columns="columns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionMode="selectionMode"
-                    <template v-if="!empty">
+                    :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode"
-                        <template v-for="(rowData, index) of dataToRender">
+                    :expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowGroups="expandedRowGroups"
-                            <tr class="p-rowgroup-header" v-if="rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(dataToRender, rowData, index)" :key="getRowKey(rowData, index) + '_subheader'">
+                    @rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
-                                <td :colspan="columns.length - 1">
+                    @row-mousedown="onRowMouseDown" @row-dragstart="onRowDragStart($event)" @row-dragover="onRowDragOver($event)" @row-dragleave="onRowDragLeave($event)" @row-dragend="onRowDragEnd($event)" @row-drop="onRowDrop($event)"
-                                    <button class="p-row-toggler p-link" @click="toggleRowGroup($event, rowData)" v-if="expandableRowGroups">
+                    @row-toggle="toggleRow($event)" @radio-change="toggleRowWithRadio($event)" @checkbox-change="toggleRowWithCheckbox($event)"
-                                        <span :class="rowGroupTogglerIcon(rowData)"></span>
+                    @cell-edit-init="onCellEditInit($event)" @cell-edit-complete="onCellEditComplete($event)" @cell-edit-cancel="onCellEditCancel($event)"
-                                    </button>
+                    @row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)"/>
-                                    <slot name="groupheader" :data="rowData"></slot>
-                                </td>
-                            </tr>
-                            <tr :class="getRowClass(rowData)" :key="getRowKey(rowData, index)"
-                                v-if="expandableRowGroups ? isRowGroupExpanded(rowData): true"
-                                @click="onRowClick($event, rowData, index)" @touchend="onRowTouchEnd($event)" @keydown="onRowKeyDown($event, rowData, index)" :tabindex="selectionMode ? '0' : null"
-                                @mousedown="onRowMouseDown($event)" @dragstart="onRowDragStart($event, index)" @dragover="onRowDragOver($event,index)" @dragleave="onRowDragLeave($event)" @dragend="onRowDragEnd($event)" @drop="onRowDrop($event)">
-                                <template v-for="(col,i) of columns">
-                                    <DTBodyCell v-if="shouldRenderBodyCell(dataToRender, col, index)" :key="col.columnKey||col.field||i" :rowData="rowData" :column="col" :index="index" :selected="isSelected(rowData)"
-                                        :rowTogglerIcon="col.expander ? rowTogglerIcon(rowData): null" @row-toggle="toggleRow"
-                                        @radio-change="toggleRowWithRadio" @checkbox-change="toggleRowWithCheckbox"
-                                        :rowspan="rowGroupMode === 'rowspan' ? calculateRowGroupSize(dataToRender, col, index) : null"
-                                        :editMode="editMode" :editing="editMode === 'row' && isRowEditing(rowData)"
-                                        @cell-edit-init="onCellEditInit" @cell-edit-complete="onCellEditComplete" @cell-edit-cancel="onCellEditCancel"
-                                        @row-edit-init="onRowEditInit" @row-edit-save="onRowEditSave" @row-edit-cancel="onRowEditCancel"/>
-                                </template>
-                            </tr>
-                            <tr class="p-datatable-row-expansion" v-if="expandedRows && isRowExpanded(rowData)" :key="getRowKey(rowData, index) + '_expansion'">
-                                <td :colspan="columns.length">
-                                    <slot name="expansion" :data="rowData" :index="index">
-                                    </slot>
-                                </td>
-                            </tr>
-                            <tr class="p-rowgroup-footer" v-if="rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(dataToRender, rowData, index)" :key="getRowKey(rowData, index) + '_subfooter'">
-                                <slot name="groupfooter" :data="rowData"></slot>
-                            </tr>
-                        </template>
-                    </template>
-                    <tr v-else class="p-datatable-emptymessage">
-                        <td :colspan="columns.length">
-                            <slot name="empty"></slot>
-                        </td>
-                    </tr>
-                </tbody>
                 <DTTableFooter :columnGroup="footerColumnGroup" :columns="columns" />
             </table>
         </div>
@@ -95,9 +61,9 @@ import ObjectUtils from '../utils/ObjectUtils';
 import FilterUtils from '../utils/FilterUtils';
 import DomHandler from '../utils/DomHandler';
 import Paginator from '../paginator/Paginator';
-import BodyCell from './BodyCell.vue';
 //import ScrollableView from './ScrollableView.vue';
 import TableHeader from './TableHeader.vue';
+import TableBody from './TableBody.vue';
 import TableFooter from './TableFooter.vue';
 
 export default {
@@ -545,7 +511,11 @@ export default {
 
             return filteredValue;
         },
-        onRowClick(event, rowData, rowIndex) {
+        onRowClick(e) {
+            const event = e.originalEvent;
+            const rowData = e.data;
+            const rowIndex = e.index;
+
             if (this.selectionMode) {
                 let target = event.target;
                 let targetNode = target.nodeName;
@@ -629,7 +599,11 @@ export default {
         onRowTouchEnd() {
             this.rowTouched = true;
         },
-        onRowKeyDown(event, rowData, rowIndex) {
+        onRowKeyDown(e) {
+            const event = e.originalEvent;
+            const rowData = e.data;
+            const rowIndex = e.index;
+
             if (this.selectionMode) {
                 const row = event.target;
 
@@ -801,44 +775,6 @@ export default {
         equals(data1, data2) {
             return this.compareSelectionBy === 'equals' ? (data1 === data2) : ObjectUtils.equals(data1, data2, this.dataKey);
         },
-        isRowExpanded(rowData) {
-            if (rowData && this.expandedRows) {
-                if (this.dataKey)
-                    return this.d_expandedRowKeys ? this.d_expandedRowKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
-                else
-                    return this.findIndex(rowData, this.expandedRows) > -1;
-            }
-
-            return false;
-        },
-        isRowGroupExpanded(rowData) {
-            if (this.expandableRowGroups && this.expandedRowGroups) {
-                let groupFieldValue = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
-                return this.expandedRowGroups.indexOf(groupFieldValue) > -1;
-            }
-            return false;
-        },
-        getRowKey(rowData, index) {
-            return this.dataKey ? ObjectUtils.resolveFieldData(rowData, this.dataKey): index;
-        },
-        getRowClass(rowData) {
-            let rowStyleClass = ['p-datatable-row'];
-            if (this.selection) {
-                rowStyleClass.push({
-                    'p-highlight': this.isSelected(rowData)
-                });
-            }
-
-            if (this.rowClass) {
-                let rowClassValue = this.rowClass(rowData);
-
-                if (rowClassValue) {
-                    rowStyleClass.push(rowClassValue);
-                }
-            }
-
-            return rowStyleClass;
-        },
         selectRange(event) {
             let rangeStart, rangeEnd;
 
@@ -1152,12 +1088,17 @@ export default {
             else
                 event.currentTarget.draggable = false;
         },
-        onRowDragStart(event, index) {
+        onRowDragStart(e) {
+            const event = e.originalEvent;
+            const index = e.rowIndex;
             this.rowDragging = true;
             this.draggedRowIndex = index;
             event.dataTransfer.setData('text', 'b');    // For firefox
         },
-        onRowDragOver(event, index) {
+        onRowDragOver(e) {
+            const event = e.originalEvent;
+            const index = e.rowIndex;
+
             if (this.rowDragging && this.draggedRowIndex !== index) {
                 let rowElement = event.currentTarget;
                 let rowY = DomHandler.getOffset(rowElement).top + DomHandler.getWindowScrollTop();
@@ -1250,8 +1191,10 @@ export default {
                 this.$emit('row-expand', event);
             }
         },
-        toggleRowGroup(event, data) {
+        toggleRowGroup(e) {
-            let groupFieldValue = ObjectUtils.resolveFieldData(data, this.groupRowsBy);
+            const event = e.originalEvent;
+            const data = e.data;
+            const groupFieldValue = ObjectUtils.resolveFieldData(data, this.groupRowsBy);
             let _expandedRowGroups = this.expandedRowGroups ? [...this.expandedRowGroups] : [];
 
             if (this.isRowGroupExpanded(data)) {
@@ -1265,101 +1208,6 @@ export default {
                 this.$emit('rowgroup-expand', {originalEvent: event, data: groupFieldValue});
             }
         },
-        rowTogglerIcon(rowData) {
-            const icon = this.isRowExpanded(rowData) ? this.expandedRowIcon : this.collapsedRowIcon;
-            return ['p-row-toggler-icon pi pi-fw p-clickable', icon];
-        },
-        rowGroupTogglerIcon(rowData) {
-            const icon = this.isRowGroupExpanded(rowData) ? this.expandedRowIcon : this.collapsedRowIcon;
-            return ['p-row-toggler-icon pi pi-fw p-clickable', icon];
-        },
-        shouldRenderRowGroupHeader(value, rowData, i) {
-            let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
-            let prevRowData = value[i - 1];
-            if (prevRowData) {
-                let previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, this.groupRowsBy);
-                return currentRowFieldData !== previousRowFieldData;
-            }
-            else {
-                return true;
-            }
-        },
-        shouldRenderRowGroupFooter(value, rowData, i) {
-            if (this.expandableRowGroups && !this.isRowGroupExpanded(rowData)) {
-                return false;
-            }
-            else {
-                let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
-                let nextRowData = value[i + 1];
-                if (nextRowData) {
-                    let nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, this.groupRowsBy);
-                    return currentRowFieldData !== nextRowFieldData;
-                }
-                else {
-                    return true;
-                }
-            }
-        },
-        shouldRenderBodyCell(value, column, i) {
-            if (this.rowGroupMode) {
-                if (this.rowGroupMode === 'subheader') {
-                    return this.groupRowsBy !== 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);
-                            return currentRowFieldData !== previousRowFieldData;
-                        }
-                        else {
-                            return true;
-                        }
-                    }
-                    else {
-                        return true;
-                    }
-                }
-            }
-            else {
-                return true;
-            }
-        },
-        isGrouped(column) {
-            if (this.groupRowsBy) {
-                if (Array.isArray(this.groupRowsBy))
-                    return this.groupRowsBy.indexOf(column.field) > -1;
-                else
-                    return this.groupRowsBy === column.field;
-            }
-            else {
-                return false;
-            }
-        },
-        calculateRowGroupSize(value, column, index) {
-            if (this.isGrouped(column)) {
-                let currentRowFieldData = ObjectUtils.resolveFieldData(value[index], column.field);
-                let nextRowFieldData = currentRowFieldData;
-                let groupRowSpan = 0;
-
-                while (currentRowFieldData === nextRowFieldData) {
-                    groupRowSpan++;
-                    let nextRowData = value[++index];
-                    if (nextRowData) {
-                        nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, column.field);
-                    }
-                    else {
-                        break;
-                    }
-                }
-
-                return groupRowSpan === 1 ? null : groupRowSpan;
-            }
-            else {
-                return null;
-            }
-        },
         isStateful() {
             return this.stateKey != null;
         },
@@ -1527,16 +1375,6 @@ export default {
         onCellEditCancel(event) {
             this.$emit('cell-edit-cancel', event);
         },
-        isRowEditing(rowData) {
-            if (rowData && this.editingRows) {
-                if (this.dataKey)
-                    return this.d_editingRowKeys ? this.d_editingRowKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
-                else
-                    return this.findIndex(rowData, this.editingRows) > -1;
-            }
-
-            return false;
-        },
         onRowEditInit(event) {
             let _editingRows = this.editingRows ? [...this.editingRows] : [];
             _editingRows.push(event.data);
@@ -1640,7 +1478,7 @@ export default {
         dataToRender() {
             const data = this.processedData;
             
-            if (this.paginator) {
+            if (data && this.paginator) {
                 const first = this.lazy ? 0 : this.d_first;
                 return data.slice(first, first + this.d_rows);
             }
@@ -1686,10 +1524,10 @@ export default {
     },
     components: {
         'DTPaginator': Paginator,
-        'DTBodyCell': BodyCell,
         //'DTScrollableView': ScrollableView,
         'DTTableHeader': TableHeader,
-        'DTTableFooter': TableFooter
+        'DTTableBody': TableBody,
+        'DTTableFooter': TableFooter,
     }
 }
 </script>

src/components/datatable/TableBody.vue

@@ -0,0 +1,353 @@
+<template>
+    <tbody class="p-datatable-tbody">
+        <template v-if="!empty">
+            <template v-for="(rowData, index) of value">
+                <tr class="p-rowgroup-header" v-if="rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, index)" :key="getRowKey(rowData, index) + '_subheader'">
+                    <td :colspan="columns.length - 1">
+                        <button class="p-row-toggler p-link" @click="onRowGroupToggle($event, rowData)" v-if="expandableRowGroups">
+                            <span :class="rowGroupTogglerIcon(rowData)"></span>
+                        </button>
+                        <slot name="groupheader" :data="rowData"></slot>
+                    </td>
+                </tr>
+                <tr :class="getRowClass(rowData)" :key="getRowKey(rowData, index)"
+                    v-if="expandableRowGroups ? isRowGroupExpanded(rowData): true"
+                    @click="onRowClick($event, rowData, index)" @touchend="onRowTouchEnd($event)" @keydown="onRowKeyDown($event, rowData, index)" :tabindex="selectionMode ? '0' : null"
+                    @mousedown="onRowMouseDown($event)" @dragstart="onRowDragStart($event, index)" @dragover="onRowDragOver($event,index)" @dragleave="onRowDragLeave($event)" @dragend="onRowDragEnd($event)" @drop="onRowDrop($event)">
+                    <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" @row-toggle="onRowToggle($event)"
+                            @radio-change="onRadioChange($event)" @checkbox-change="onCheckboxChange($event)"
+                            :rowspan="rowGroupMode === 'rowspan' ? calculateRowGroupSize(value, col, index) : null"
+                            :editMode="editMode" :editing="editMode === 'row' && isRowEditing(rowData)"
+                            @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)"/>
+                    </template>
+                </tr>
+                <tr class="p-datatable-row-expansion" v-if="expandedRows && isRowExpanded(rowData)" :key="getRowKey(rowData, index) + '_expansion'">
+                    <td :colspan="columns.length">
+                        <slot name="expansion" :data="rowData" :index="index">
+                        </slot>
+                    </td>
+                </tr>
+                <tr class="p-rowgroup-footer" v-if="rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, index)" :key="getRowKey(rowData, index) + '_subfooter'">
+                    <slot name="groupfooter" :data="rowData"></slot>
+                </tr>
+            </template>
+        </template>
+        <tr v-else class="p-datatable-emptymessage">
+            <td :colspan="columns.length">
+                <slot name="empty"></slot>
+            </td>
+        </tr>
+    </tbody>
+</template>
+
+<script>
+import ObjectUtils from '../utils/ObjectUtils';
+import BodyCell from './BodyCell.vue';
+
+export default {
+    props: {
+        value: {
+            type: Array,
+            default: null
+        },
+        columns: {
+            type: null,
+            default: null
+        },
+        empty: {
+            type: Boolean,
+            default: false
+        },
+        rowGroupMode: {
+            type: String,
+            default: null
+        },
+        groupRowsBy: {
+            type: [Array,String],
+            default: null
+        },
+        expandableRowGroups: {
+            type: Boolean,
+            default: false
+        },
+        expandedRowGroups: {
+            type: Array,
+            default: null
+        },
+        dataKey: {
+            type: String,
+            default: null
+        },
+        expandedRowIcon: {
+            type: String,
+            default: null
+        },
+        collapsedRowIcon: {
+            type: String,
+            default: null
+        },
+        expandedRows: {
+            type: Array,
+            default: null
+        },
+        selection: {
+            type: [Array,Object],
+            default: null
+        },
+        selectionMode: {
+            type: String,
+            default: null
+        },
+        rowClass: {
+            type: null,
+            default: null
+        },
+        editMode: {
+            type: String,
+            default: null
+        },
+    },
+    methods: {
+        shouldRenderRowGroupHeader(value, rowData, i) {
+            let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
+            let prevRowData = value[i - 1];
+            if (prevRowData) {
+                let previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, this.groupRowsBy);
+                return currentRowFieldData !== previousRowFieldData;
+            }
+            else {
+                return true;
+            }
+        },
+        getRowKey(rowData, index) {
+            return this.dataKey ? ObjectUtils.resolveFieldData(rowData, this.dataKey): index;
+        },
+        getRowClass(rowData) {
+            let rowStyleClass = ['p-datatable-row'];
+            if (this.selection) {
+                rowStyleClass.push({
+                    'p-highlight': this.isSelected(rowData)
+                });
+            }
+
+            if (this.rowClass) {
+                let rowClassValue = this.rowClass(rowData);
+
+                if (rowClassValue) {
+                    rowStyleClass.push(rowClassValue);
+                }
+            }
+
+            return rowStyleClass;
+        },
+        shouldRenderRowGroupFooter(value, rowData, i) {
+            if (this.expandableRowGroups && !this.isRowGroupExpanded(rowData)) {
+                return false;
+            }
+            else {
+                let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
+                let nextRowData = value[i + 1];
+                if (nextRowData) {
+                    let nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, this.groupRowsBy);
+                    return currentRowFieldData !== nextRowFieldData;
+                }
+                else {
+                    return true;
+                }
+            }
+        },
+        shouldRenderBodyCell(value, column, i) {
+            if (this.rowGroupMode) {
+                if (this.rowGroupMode === 'subheader') {
+                    return this.groupRowsBy !== 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);
+                            return currentRowFieldData !== previousRowFieldData;
+                        }
+                        else {
+                            return true;
+                        }
+                    }
+                    else {
+                        return true;
+                    }
+                }
+            }
+            else {
+                return true;
+            }
+        },
+        calculateRowGroupSize(value, column, index) {
+            if (this.isGrouped(column)) {
+                let currentRowFieldData = ObjectUtils.resolveFieldData(value[index], column.field);
+                let nextRowFieldData = currentRowFieldData;
+                let groupRowSpan = 0;
+
+                while (currentRowFieldData === nextRowFieldData) {
+                    groupRowSpan++;
+                    let nextRowData = value[++index];
+                    if (nextRowData) {
+                        nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, column.field);
+                    }
+                    else {
+                        break;
+                    }
+                }
+
+                return groupRowSpan === 1 ? null : groupRowSpan;
+            }
+            else {
+                return null;
+            }
+        },
+        rowTogglerIcon(rowData) {
+            const icon = this.isRowExpanded(rowData) ? this.expandedRowIcon : this.collapsedRowIcon;
+            return ['p-row-toggler-icon pi pi-fw p-clickable', icon];
+        },
+        rowGroupTogglerIcon(rowData) {
+            const icon = this.isRowGroupExpanded(rowData) ? this.expandedRowIcon : this.collapsedRowIcon;
+            return ['p-row-toggler-icon pi pi-fw p-clickable', icon];
+        },
+        isGrouped(column) {
+            if (this.groupRowsBy) {
+                if (Array.isArray(this.groupRowsBy))
+                    return this.groupRowsBy.indexOf(column.field) > -1;
+                else
+                    return this.groupRowsBy === column.field;
+            }
+            else {
+                return false;
+            }
+        },
+        isRowEditing(rowData) {
+            if (rowData && this.editingRows) {
+                if (this.dataKey)
+                    return this.d_editingRowKeys ? this.d_editingRowKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
+                else
+                    return this.findIndex(rowData, this.editingRows) > -1;
+            }
+
+            return false;
+        },
+        isRowExpanded(rowData) {
+            if (rowData && this.expandedRows) {
+                if (this.dataKey)
+                    return this.d_expandedRowKeys ? this.d_expandedRowKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
+                else
+                    return this.findIndex(rowData, this.expandedRows) > -1;
+            }
+
+            return false;
+        },
+        isRowGroupExpanded(rowData) {
+            if (this.expandableRowGroups && this.expandedRowGroups) {
+                let groupFieldValue = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
+                return this.expandedRowGroups.indexOf(groupFieldValue) > -1;
+            }
+            return false;
+        },
+        isSelected(rowData) {
+            if (rowData && this.selection) {
+                if (this.dataKey) {
+                    return this.d_selectionKeys ? this.d_selectionKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
+                }
+                else {
+                    if (this.selection instanceof Array)
+                        return this.findIndexInSelection(rowData) > -1;
+                    else
+                        return this.equals(rowData, this.selection);
+                }
+            }
+
+            return false;
+        },
+        findIndexInSelection(rowData) {
+            return this.findIndex(rowData, this.selection);
+        },
+        findIndex(rowData, collection) {
+            let index = -1;
+            if (collection && collection.length) {
+                for (let i = 0; i < collection.length; i++) {
+                    if (this.equals(rowData, collection[i])) {
+                        index = i;
+                        break;
+                    }
+                }
+            }
+
+            return index;
+        },
+        onRowGroupToggle(event, data) {
+            this.$emit('rowgroup-toggle', {originalEvent: event, data: data});
+        },
+        onRowClick(event, rowData, rowIndex) {
+            this.$emit('row-click', {originalEvent: event, data: rowData, index: rowIndex});
+        },
+        onRowTouchEnd(event) {
+            this.$emit('row-touchend', event);
+        },
+        onRowKeyDown(event, rowData, rowIndex) {
+            this.$emit('row-keydown', {originalEvent: event, data: rowData, index: rowIndex});
+        },
+        onRowMouseDown(event) {
+            this.$emit('row-mousedown', event);
+        },
+        onRowDragStart(event, rowIndex) {
+            this.$emit('row-dragstart', {originalEvent: event, index: rowIndex});
+        },
+        onRowDragOver(event, rowIndex) {
+            this.$emit('row-dragover', {originalEvent: event, index: rowIndex});
+        },
+        onRowDragLeave(event) {
+            this.$emit('row-dragleave', event);
+        },
+        onRowDragEnd(event) {
+            this.$emit('row-dragend', event);
+        },
+        onRowDrop(event) {
+            this.$emit('row-drop', event);
+        },
+        onRowToggle(event) {
+            this.$emit('row-toggle', event);
+        },
+        onRadioChange(event) {
+            this.$emit('radio-change', event);
+        },
+        onCheckboxChange(event) {
+            this.$emit('checkbox-change', event);
+        },
+        onCellEditInit(event) {
+            this.$emit('cell-edit-init', event);
+        },
+        onCellEditComplete(event) {
+            this.$emit('cell-edit-complete', event);
+        },
+        onCellEditCancel(event) {
+            this.$emit('cell-edit-cancel', event);
+        },
+        onRowEditInit(event) {
+            this.$emit('row-edit-init', event);
+        },
+        onRowEditSave(event) {
+            this.$emit('row-edit-save', event);
+        },
+        onRowEditCancel(event) {
+            this.$emit('row-edit-cancel', event);
+        }
+    },
+    computed: {
+
+    },
+    components: {
+        'DTBodyCell': BodyCell
+    }
+}
+</script>

src/components/datatable/TableFooter.vue

@@ -50,7 +50,7 @@ export default {
             }
 
             return hasFooter;
-        },
+        }
     },
     components: {
         'DTColumnSlot': ColumnSlot