Fixed row expansion

src/components/datatable/DataTable.vue

@@ -30,7 +30,7 @@
                 <DTTableBody :value="dataToRender" :columns="columns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode"
                     :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy"
                     :expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
-                    :editingRows="editingRows" :editingRowKeys="d_editingRowKeys"
+                    :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$scopedSlots"
                     @rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
                     @row-mousedown="onRowMouseDown" @row-dragstart="onRowDragStart($event)" @row-dragover="onRowDragOver($event)" @row-dragleave="onRowDragLeave($event)" @row-dragend="onRowDragEnd($event)" @row-drop="onRowDrop($event)"
                     @row-toggle="toggleRow($event)" @radio-change="toggleRowWithRadio($event)" @checkbox-change="toggleRowWithCheckbox($event)"
@@ -1209,6 +1209,13 @@ export default {
                 this.$emit('rowgroup-expand', {originalEvent: event, data: groupFieldValue});
             }
         },
+        isRowGroupExpanded(rowData) {
+            if (this.expandableRowGroups && this.expandedRowGroups) {
+                let groupFieldValue = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
+                return this.expandedRowGroups.indexOf(groupFieldValue) > -1;
+            }
+            return false;
+        },
         isStateful() {
             return this.stateKey != null;
         },

src/components/datatable/TableBody.vue

@@ -7,7 +7,7 @@
                         <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>
+                        <DTRowExpansionTemplate :template="templates['groupheader']" :data="rowData" :index="index" />
                     </td>
                 </tr>
                 <tr :class="getRowClass(rowData)" :key="getRowKey(rowData, index)"
@@ -26,8 +26,7 @@
                 </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">
+                        <DTRowExpansionTemplate :template="templates['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'">
@@ -47,6 +46,35 @@
 import ObjectUtils from '../utils/ObjectUtils';
 import BodyCell from './BodyCell.vue';
 
+const RowExpansionTemplate = {
+    functional: true,
+    props: {
+        name: {
+            type: String,
+            default: null
+        },
+        data: {
+            type: null,
+            default: null
+        },
+        index: {
+            type: Number,
+            default: null
+        },
+        template: {
+            type: null,
+            default: null
+        }
+    },
+    render(createElement, context) {
+        const content = context.props.template({
+            'data': context.props.data,
+            'index': context.props.index
+        });
+        return [content];
+    }
+}
+
 export default {
     props: {
         value: {
@@ -128,6 +156,10 @@ export default {
         editingRowKeys: {
             type: null,
             default: null
+        },
+        templates: {
+            type: null,
+            default: null
         }
     },
     methods: {
@@ -365,12 +397,10 @@ export default {
         onRowEditCancel(event) {
             this.$emit('row-edit-cancel', event);
         }
-    },
-    computed: {
-
     },
     components: {
-        'DTBodyCell': BodyCell
+        'DTBodyCell': BodyCell,
+        'DTRowExpansionTemplate': RowExpansionTemplate
     }
 }
 </script>