vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Colspan based grouping initiated

pull/104/head
cagataycivici 2019-10-21 14:43:48 +03:00
parent 4ebe8cd4a5
commit cb0cedbc77
1 changed files with 67 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/components/datatable/DataTable.vue
View File

@ -64,9 +64,10 @@
@click="onRowClick($event, rowData, index)" @touchend="onRowTouchEnd($event)" @keydown="onRowKeyDown($event, rowData, index)" :tabindex="selectionMode ? '0' : null" @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)"> @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"> <template v-for="(col,i) of columns">
<DTBodyCell v-if="rowGroupMode === 'subheader' ? (groupRowsBy !== col.field) : true" :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" :selected="isSelected(rowData)"
:rowTogglerIcon="col.expander ? rowTogglerIcon(rowData): null" @row-toggle="toggleRow" :rowTogglerIcon="col.expander ? rowTogglerIcon(rowData): null" @row-toggle="toggleRow"
@radio-change="toggleRowWithRadio" @checkbox-change="toggleRowWithCheckbox" /> @radio-change="toggleRowWithRadio" @checkbox-change="toggleRowWithCheckbox"
:rowspan="rowGroupMode === 'rowspan' ? calculateRowGroupSize(dataToRender, col, index) : null" />
</template> </template>
</tr> </tr>
<tr class="p-datatable-row-expansion" v-if="expandedRows && isRowExpanded(rowData)" :key="getRowKey(rowData, index) + '_expansion'"> <tr class="p-datatable-row-expansion" v-if="expandedRows && isRowExpanded(rowData)" :key="getRowKey(rowData, index) + '_expansion'">
@ -1246,25 +1247,77 @@ export default {
return ['p-row-toggler-icon pi pi-fw p-clickable', icon]; return ['p-row-toggler-icon pi pi-fw p-clickable', icon];
}, },
shouldRenderRowGroupHeader(value, rowData, i) { shouldRenderRowGroupHeader(value, rowData, i) {
if (i === 0) { let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
return true; let prevRowData = value[i - 1];
if (prevRowData) {
let previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, this.groupRowsBy);
return currentRowFieldData !== previousRowFieldData;
} }
else { else {
let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy); return true;
let previousRowFieldData = ObjectUtils.resolveFieldData(value[i - 1], this.groupRowsBy);
return currentRowFieldData !== previousRowFieldData;
} }
}, },
shouldRenderRowGroupFooter(value, rowData, i) { shouldRenderRowGroupFooter(value, rowData, i) {
if (i === (value.length - 1)) { let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
return true; let nextRowData = value[i + 1];
if (nextRowData) {
let nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, this.groupRowsBy);
return currentRowFieldData !== nextRowFieldData;
} }
else { else {
let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy); return true;
let nextRowFieldData = ObjectUtils.resolveFieldData(value[i + 1], this.groupRowsBy); }
},
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) {
return this.groupRowsBy != null && (this.groupRowsBy === column.field || this.groupRowsBy.indexOf(column.field) > -1);
},
calculateRowGroupSize(value, column, index) {
if (this.isGrouped(column)) {
let currentRowFieldData = ObjectUtils.resolveFieldData(value[index], column.field);
let nextRowFieldData = currentRowFieldData;
let groupRowSpan = 0;
return currentRowFieldData !== nextRowFieldData; 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;
} }
} }
}, },