Demo refactor

src/components/datatable/BodyCell.vue

@@ -1,6 +1,6 @@
 <template>
     <td :style="column.bodyStyle" :class="column.bodyClass">
-        <ColumnSlot :data="rowData" :column="column" type="body" v-if="column.$scopedSlots.body" />
+        <ColumnSlot :data="rowData" :column="column" :index="index" type="body" v-if="column.$scopedSlots.body" />
         <template v-else-if="column.selectionMode">
             <DTRadioButton :value="rowData" :checked="selected" @change="toggleRowWithRadio" v-if="column.selectionMode === 'single'" />
             <DTCheckbox :value="rowData" :checked="selected" @change="toggleRowWithCheckbox" v-else-if="column.selectionMode ==='multiple'" />
@@ -33,6 +33,10 @@ export default {
             type: Object,
             default: null
         },
+        index: {
+            type: Number,
+            default: null
+        },
         rowTogglerIcon: {
             type: Array,
             default: null

src/components/datatable/ColumnSlot.vue

@@ -10,6 +10,10 @@ export default {
             type: null,
             default: null
         },
+        index: {
+            type: Number,
+            default: null
+        },
         type: {
             type: String,
             default: null
@@ -18,6 +22,7 @@ export default {
     render(createElement, context) {
         const content = context.props.column.$scopedSlots[context.props.type]({
             'data': context.props.data,
+            'index': context.props.index,
             'column': context.props.column
         });
         return [content];

src/components/datatable/DataTable.vue

@@ -64,7 +64,7 @@
                                 @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" :selected="isSelected(rowData)"
+                                    <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" />
@@ -130,8 +130,6 @@ import ObjectUtils from '../utils/ObjectUtils';
 import FilterUtils from '../utils/FilterUtils';
 import DomHandler from '../utils/DomHandler';
 import Paginator from '../paginator/Paginator';
-import RowRadioButton from './RowRadioButton';
-import RowCheckbox from './RowCheckbox.vue';
 import HeaderCheckbox from './HeaderCheckbox.vue';
 import ColumnSlot from './ColumnSlot.vue';
 import BodyCell from './BodyCell.vue';
@@ -1295,7 +1293,15 @@ export default {
             }
         },
         isGrouped(column) {
-            return this.groupRowsBy != null && (this.groupRowsBy === column.field || this.groupRowsBy.indexOf(column.field) > -1);
+            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)) {
@@ -1469,8 +1475,6 @@ export default {
     components: {
         'ColumnSlot': ColumnSlot,
         'DTPaginator': Paginator,
-        'DTRadioButton': RowRadioButton,
-        'DTCheckbox': RowCheckbox,
         'DTHeaderCheckbox': HeaderCheckbox,
         'DTBodyCell': BodyCell
     }

src/views/datatable/DataTableRowGroupDemo.vue

@@ -27,9 +27,31 @@
                 </template>
             </DataTable>
 
+            <h3>Expandable Row Groups</h3>
+			<DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand" 
+                sortMode="single" sortField="brand" :sortOrder="1">
+                <Column field="brand" header="Brand"></Column>
+                <Column field="vin" header="Vin"></Column>
+                <Column field="year" header="Year"></Column>
+                <Column field="color" header="Color"></Column>
+                <Column field="price" header="Price"></Column>
+                <template #groupheader="slotProps">
+                    <span>{{slotProps.data.brand}}</span>
+                </template>
+                <template #groupfooter="slotProps">
+                    <td colspan="3" style="text-align: right">Total Price</td>
+                    <td>20000</td>
+                </template>
+            </DataTable>
+
             <h3>RowSpan Grouping</h3>
-			<DataTable :value="cars" rowGroupMode="rowspan" :groupRowsBy="['brand', 'year']" 
+			<DataTable :value="cars" rowGroupMode="rowspan" groupRowsBy="brand" 
                 sortMode="multiple" :multiSortMeta="multiSortMeta">
+                <Column header="#" headerStyle="width:3em">
+                    <template #body="slotProps">
+                        {{slotProps.index}}
+                    </template>
+                </Column>
                 <Column field="brand" header="Brand"></Column>               
                 <Column field="year" header="Year"></Column>
                 <Column field="vin" header="Vin"></Column>