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

Fixed #4977 - Improve performance of row expansion feature on DataTable (#4978) 

* DataTable performance improvement (1)

* Refactor on DT performance

* Refactor

* Refactor

* Update RowExpansionDoc.vue

* Update RowExpansionDoc.vue

* Update RowExpansionDoc.vue
pull/4987/head
Mert Sincan 2023-12-18 14:16:35 +00:00 committed by GitHub
parent f6c5cda987
commit fb1fb60eab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 674 additions and 467 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/lib/datatable/BaseDataTable.vue
View File

@ -167,7 +167,7 @@ export default {
default: false default: false
}, },
expandedRows: { expandedRows: {
type: Array, type: [Array, Object],
default: null default: null
}, },
expandedRowIcon: { expandedRowIcon: {

575
components/lib/datatable/BodyRow.vue Normal file
View File

@ -0,0 +1,575 @@
<template>
<template v-if="!empty">
<tr v-if="templates['groupheader'] && rowGroupMode === 'subheader' && shouldRenderRowGroupHeader" :class="cx('rowGroupHeader')" :style="rowGroupHeaderStyle" role="row" v-bind="ptm('rowGroupHeader')">
<td :colspan="columnsLength - 1" v-bind="{ ...getColumnPT('bodycell'), ...ptm('rowGroupHeaderCell') }">
<button v-if="expandableRowGroups" :class="cx('rowGroupToggler')" @click="onRowGroupToggle" type="button" v-bind="ptm('rowGroupToggler')">
<component v-if="templates['rowgrouptogglericon']" :is="templates['rowgrouptogglericon']" :expanded="isRowGroupExpanded" />
<template v-else>
<span v-if="isRowGroupExpanded && expandedRowIcon" :class="[cx('rowGroupTogglerIcon'), expandedRowIcon]" v-bind="ptm('rowGroupTogglerIcon')" />
<ChevronDownIcon v-else-if="isRowGroupExpanded && !expandedRowIcon" :class="cx('rowGroupTogglerIcon')" v-bind="ptm('rowGroupTogglerIcon')" />
<span v-else-if="!isRowGroupExpanded && collapsedRowIcon" :class="[cx('rowGroupTogglerIcon'), collapsedRowIcon]" v-bind="ptm('rowGroupTogglerIcon')" />
<ChevronRightIcon v-else-if="!isRowGroupExpanded && !collapsedRowIcon" :class="cx('rowGroupTogglerIcon')" v-bind="ptm('rowGroupTogglerIcon')" />
</template>
</button>
<component :is="templates['groupheader']" :data="rowData" :index="rowIndex" />
</td>
</tr>
<tr
v-if="expandableRowGroups ? isRowGroupExpanded : true"
:class="rowClasses"
:style="rowStyles"
:tabindex="rowTabindex"
role="row"
:aria-selected="selectionMode ? isSelected : null"
@click="onRowClick"
@dblclick="onRowDblClick"
@contextmenu="onRowRightClick"
@touchend="onRowTouchEnd"
@keydown.self="onRowKeyDown"
@mousedown="onRowMouseDown"
@dragstart="onRowDragStart"
@dragover="onRowDragOver"
@dragleave="onRowDragLeave"
@dragend="onRowDragEnd"
@drop="onRowDrop"
v-bind="getBodyRowPTOptions('bodyRow')"
:data-p-selectable-row="selectionMode ? true : false"
:data-p-highlight="selection && isSelected"
:data-p-highlight-contextmenu="contextMenuSelection && isSelectedWithContextMenu"
>
<template v-for="(col, i) of columns">
<DTBodyCell
v-if="shouldRenderBodyCell(col)"
:key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i"
:rowData="rowData"
:column="col"
:rowIndex="rowIndex"
:index="i"
:selected="isSelected"
:frozenRow="frozenRow"
:rowspan="rowGroupMode === 'rowspan' ? calculateRowGroupSize(col) : null"
:editMode="editMode"
:editing="editMode === 'row' && isRowEditing"
:editingMeta="editingMeta"
:responsiveLayout="responsiveLayout"
:virtualScrollerContentProps="virtualScrollerContentProps"
:ariaControls="expandedRowId + '_' + rowIndex + '_expansion'"
:name="nameAttributeSelector"
:isRowExpanded="d_rowExpanded"
:expandedRowIcon="expandedRowIcon"
:collapsedRowIcon="collapsedRowIcon"
@radio-change="onRadioChange"
@checkbox-change="onCheckboxChange"
@row-toggle="onRowToggle"
@cell-edit-init="onCellEditInit"
@cell-edit-complete="onCellEditComplete"
@cell-edit-cancel="onCellEditCancel"
@row-edit-init="onRowEditInit"
@row-edit-save="onRowEditSave"
@row-edit-cancel="onRowEditCancel"
@editing-meta-change="onEditingMetaChange"
:unstyled="unstyled"
:pt="pt"
/>
</template>
</tr>
<tr v-if="templates['expansion'] && expandedRows && d_rowExpanded" :id="expandedRowId + '_' + rowIndex + '_expansion'" :class="cx('rowExpansion')" role="row" v-bind="ptm('rowExpansion')">
<td :colspan="columnsLength" v-bind="{ ...getColumnPT('bodycell'), ...ptm('rowExpansionCell') }">
<component :is="templates['expansion']" :data="rowData" :index="rowIndex" />
</td>
</tr>
<tr v-if="templates['groupfooter'] && rowGroupMode === 'subheader' && shouldRenderRowGroupFooter" :class="cx('rowGroupFooter')" role="row" v-bind="ptm('rowGroupFooter')">
<td :colspan="columnsLength - 1" v-bind="{ ...getColumnPT('bodycell'), ...ptm('rowGroupFooterCell') }">
<component :is="templates['groupfooter']" :data="rowData" :index="rowIndex" />
</td>
</tr>
</template>
<tr v-else :class="cx('emptyMessage')" role="row" v-bind="ptm('emptyMessage')">
<td :colspan="columnsLength" v-bind="{ ...getColumnPT('bodycell'), ...ptm('emptyMessageCell') }">
<component v-if="templates.empty" :is="templates.empty" />
</td>
</tr>
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import ChevronDownIcon from 'primevue/icons/chevrondown';
import ChevronRightIcon from 'primevue/icons/chevronright';
import { ObjectUtils } from 'primevue/utils';
import { mergeProps } from 'vue';
import BodyCell from './BodyCell.vue';
export default {
name: 'BodyRow',
hostName: 'DataTable',
extends: BaseComponent,
emits: [
'rowgroup-toggle',
'row-click',
'row-dblclick',
'row-rightclick',
'row-touchend',
'row-keydown',
'row-mousedown',
'row-dragstart',
'row-dragover',
'row-dragleave',
'row-dragend',
'row-drop',
'row-toggle',
'radio-change',
'checkbox-change',
'cell-edit-init',
'cell-edit-complete',
'cell-edit-cancel',
'row-edit-init',
'row-edit-save',
'row-edit-cancel',
'editing-meta-change'
],
props: {
rowData: {
type: Object,
default: null
},
index: {
type: Number,
default: 0
},
value: {
type: Array,
default: null
},
columns: {
type: null,
default: null
},
frozenRow: {
type: Boolean,
default: false
},
empty: {
type: Boolean,
default: false
},
rowGroupMode: {
type: String,
default: null
},
groupRowsBy: {
type: [Array, String, Function],
default: null
},
expandableRowGroups: {
type: Boolean,
default: false
},
expandedRowGroups: {
type: Array,
default: null
},
first: {
type: Number,
default: 0
},
dataKey: {
type: [String, Function],
default: null
},
expandedRowIcon: {
type: String,
default: null
},
collapsedRowIcon: {
type: String,
default: null
},
expandedRows: {
type: [Array, Object],
default: null
},
selection: {
type: [Array, Object],
default: null
},
selectionKeys: {
type: null,
default: null
},
selectionMode: {
type: String,
default: null
},
contextMenu: {
type: Boolean,
default: false
},
contextMenuSelection: {
type: Object,
default: null
},
rowClass: {
type: null,
default: null
},
rowStyle: {
type: null,
default: null
},
rowGroupHeaderStyle: {
type: null,
default: null
},
editMode: {
type: String,
default: null
},
compareSelectionBy: {
type: String,
default: 'deepEquals'
},
editingRows: {
type: Array,
default: null
},
editingRowKeys: {
type: null,
default: null
},
editingMeta: {
type: Object,
default: null
},
templates: {
type: null,
default: null
},
scrollable: {
type: Boolean,
default: false
},
responsiveLayout: {
type: String,
default: 'stack'
},
virtualScrollerContentProps: {
type: Object,
default: null
},
isVirtualScrollerDisabled: {
type: Boolean,
default: false
},
expandedRowId: {
type: String,
default: null
},
nameAttributeSelector: {
type: String,
default: null
}
},
data() {
return {
d_rowExpanded: false
};
},
watch: {
expandedRows(newValue) {
this.d_rowExpanded = this.dataKey ? newValue?.[ObjectUtils.resolveFieldData(this.rowData, this.dataKey)] !== undefined : newValue?.some((d) => this.equals(this.rowData, d));
}
},
methods: {
columnProp(col, prop) {
return ObjectUtils.getVNodeProp(col, prop);
},
//@todo - update this method
getColumnPT(key) {
const columnMetaData = {
parent: {
instance: this,
props: this.$props,
state: this.$data
}
};
return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.columnProp({}, 'pt'), key, columnMetaData));
},
//@todo - update this method
getBodyRowPTOptions(key) {
const datatable = this.$parentInstance?.$parentInstance?.$parentInstance;
return this.ptm(key, {
context: {
index: this.rowIndex,
selectable: datatable?.rowHover || datatable?.selectionMode,
selected: this.isSelected,
stripedRows: datatable?.stripedRows || false
}
});
},
shouldRenderBodyCell(column) {
if (this.rowGroupMode) {
const field = this.columnProp(column, 'field');
if (this.rowGroupMode === 'subheader') {
return this.groupRowsBy !== field;
} else if (this.rowGroupMode === 'rowspan') {
if (this.isGrouped(column)) {
let prevRowData = this.value[this.rowIndex - 1];
if (prevRowData) {
const currentRowFieldData = ObjectUtils.resolveFieldData(this.value[this.rowIndex], field);
const previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, field);
return currentRowFieldData !== previousRowFieldData;
} else {
return true;
}
} else {
return true;
}
}
} else {
return !this.columnProp(column, 'hidden');
}
},
calculateRowGroupSize(column) {
if (this.isGrouped(column)) {
let index = this.rowIndex;
const field = this.columnProp(column, 'field');
const currentRowFieldData = ObjectUtils.resolveFieldData(this.value[index], field);
let nextRowFieldData = currentRowFieldData;
let groupRowSpan = 0;
while (currentRowFieldData === nextRowFieldData) {
groupRowSpan++;
let nextRowData = this.value[++index];
if (nextRowData) {
nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, field);
} else {
break;
}
}
return groupRowSpan === 1 ? null : groupRowSpan;
} else {
return null;
}
},
isGrouped(column) {
const field = this.columnProp(column, 'field');
if (this.groupRowsBy && field) {
if (Array.isArray(this.groupRowsBy)) return this.groupRowsBy.indexOf(field) > -1;
else return this.groupRowsBy === field;
} else {
return false;
}
},
findIndexInSelection(data) {
return this.findIndex(data, this.selection);
},
findIndex(data, collection) {
let index = -1;
if (collection && collection.length) {
for (let i = 0; i < collection.length; i++) {
if (this.equals(data, collection[i])) {
index = i;
break;
}
}
}
return index;
},
equals(data1, data2) {
return this.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, this.dataKey);
},
onRowGroupToggle(event) {
this.$emit('rowgroup-toggle', { originalEvent: event, data: this.rowData });
},
onRowClick(event) {
this.$emit('row-click', { originalEvent: event, data: this.rowData, index: this.rowIndex });
},
onRowDblClick(event) {
this.$emit('row-dblclick', { originalEvent: event, data: this.rowData, index: this.rowIndex });
},
onRowRightClick(event) {
this.$emit('row-rightclick', { originalEvent: event, data: this.rowData, index: this.rowIndex });
},
onRowTouchEnd(event) {
this.$emit('row-touchend', event);
},
onRowKeyDown(event) {
this.$emit('row-keydown', { originalEvent: event, data: this.rowData, index: this.rowIndex });
},
onRowMouseDown(event) {
this.$emit('row-mousedown', event);
},
onRowDragStart(event) {
this.$emit('row-dragstart', { originalEvent: event, index: this.rowIndex });
},
onRowDragOver(event) {
this.$emit('row-dragover', { originalEvent: event, index: this.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.d_rowExpanded = !this.d_rowExpanded;
this.$emit('row-toggle', { ...event, expanded: this.d_rowExpanded });
},
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);
},
onEditingMetaChange(event) {
this.$emit('editing-meta-change', event);
},
getVirtualScrollerProp(option, options) {
options = options || this.virtualScrollerContentProps;
return options ? options[option] : null;
}
},
computed: {
rowIndex() {
const getItemOptions = this.getVirtualScrollerProp('getItemOptions');
return getItemOptions ? getItemOptions(this.index).index : this.index;
},
rowStyles() {
return this.rowStyle?.(this.rowData);
},
rowClasses() {
let rowStyleClass = [];
if (this.rowClass) {
let rowClassValue = this.rowClass(this.rowData);
if (rowClassValue) {
rowStyleClass.push(rowClassValue);
}
}
return [this.cx('row', { rowData: this.rowData }), rowStyleClass];
},
rowTabindex() {
if (this.selection === null && (this.selectionMode === 'single' || this.selectionMode === 'multiple')) {
return this.rowIndex === 0 ? 0 : -1;
}
return -1;
},
isRowEditing() {
if (this.rowData && this.editingRows) {
if (this.dataKey) return this.editingRowKeys ? this.editingRowKeys[ObjectUtils.resolveFieldData(this.rowData, this.dataKey)] !== undefined : false;
else return this.findIndex(this.rowData, this.editingRows) > -1;
}
return false;
},
isRowGroupExpanded() {
if (this.expandableRowGroups && this.expandedRowGroups) {
const groupFieldValue = ObjectUtils.resolveFieldData(this.rowData, this.groupRowsBy);
return this.expandedRowGroups.indexOf(groupFieldValue) > -1;
}
return false;
},
isSelected() {
if (this.rowData && this.selection) {
if (this.dataKey) {
return this.selectionKeys ? this.selectionKeys[ObjectUtils.resolveFieldData(this.rowData, this.dataKey)] !== undefined : false;
} else {
if (this.selection instanceof Array) return this.findIndexInSelection(this.rowData) > -1;
else return this.equals(this.rowData, this.selection);
}
}
return false;
},
isSelectedWithContextMenu() {
if (this.rowData && this.contextMenuSelection) {
return this.equals(this.rowData, this.contextMenuSelection, this.dataKey);
}
return false;
},
shouldRenderRowGroupHeader() {
const currentRowFieldData = ObjectUtils.resolveFieldData(this.rowData, this.groupRowsBy);
const prevRowData = this.value[this.rowIndex - 1];
if (prevRowData) {
const previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, this.groupRowsBy);
return currentRowFieldData !== previousRowFieldData;
} else {
return true;
}
},
shouldRenderRowGroupFooter() {
if (this.expandableRowGroups && !this.isRowGroupExpanded) {
return false;
} else {
let currentRowFieldData = ObjectUtils.resolveFieldData(this.rowData, this.groupRowsBy);
let nextRowData = this.value[this.rowIndex + 1];
if (nextRowData) {
let nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, this.groupRowsBy);
return currentRowFieldData !== nextRowFieldData;
} else {
return true;
}
}
},
columnsLength() {
let hiddenColLength = 0;
this.columns.forEach((column) => {
if (this.columnProp(column, 'selectionMode') === 'single') hiddenColLength--;
if (this.columnProp(column, 'hidden')) hiddenColLength++;
});
return this.columns ? this.columns.length - hiddenColLength : 0;
}
},
components: {
DTBodyCell: BodyCell,
ChevronDownIcon: ChevronDownIcon,
ChevronRightIcon: ChevronRightIcon
}
};
</script>

52
components/lib/datatable/DataTable.vue
View File

@ -124,7 +124,6 @@
:expandedRowIcon="expandedRowIcon" :expandedRowIcon="expandedRowIcon"
:collapsedRowIcon="collapsedRowIcon" :collapsedRowIcon="collapsedRowIcon"
:expandedRows="expandedRows" :expandedRows="expandedRows"
:expandedRowKeys="d_expandedRowKeys"
:expandedRowGroups="expandedRowGroups" :expandedRowGroups="expandedRowGroups"
:editingRows="editingRows" :editingRows="editingRows"
:editingRowKeys="d_editingRowKeys" :editingRowKeys="d_editingRowKeys"
@ -181,7 +180,6 @@
:expandedRowIcon="expandedRowIcon" :expandedRowIcon="expandedRowIcon"
:collapsedRowIcon="collapsedRowIcon" :collapsedRowIcon="collapsedRowIcon"
:expandedRows="expandedRows" :expandedRows="expandedRows"
:expandedRowKeys="d_expandedRowKeys"
:expandedRowGroups="expandedRowGroups" :expandedRowGroups="expandedRowGroups"
:editingRows="editingRows" :editingRows="editingRows"
:editingRowKeys="d_editingRowKeys" :editingRowKeys="d_editingRowKeys"
@ -345,7 +343,6 @@ export default {
d_multiSortMeta: this.multiSortMeta ? [...this.multiSortMeta] : [], d_multiSortMeta: this.multiSortMeta ? [...this.multiSortMeta] : [],
d_groupRowsSortMeta: null, d_groupRowsSortMeta: null,
d_selectionKeys: null, d_selectionKeys: null,
d_expandedRowKeys: null,
d_columnOrder: null, d_columnOrder: null,
d_editingRowKeys: null, d_editingRowKeys: null,
d_editingMeta: {}, d_editingMeta: {},
@ -396,11 +393,6 @@ export default {
} }
} }
}, },
expandedRows(newValue) {
if (this.dataKey) {
this.updateExpandedRowKeys(newValue);
}
},
editingRows: { editingRows: {
immediate: true, immediate: true,
handler(newValue) { handler(newValue) {
@ -1087,17 +1079,6 @@ export default {
this.d_selectionKeys[String(ObjectUtils.resolveFieldData(selection, this.dataKey))] = 1; this.d_selectionKeys[String(ObjectUtils.resolveFieldData(selection, this.dataKey))] = 1;
} }
}, },
updateExpandedRowKeys(expandedRows) {
if (expandedRows && expandedRows.length) {
this.d_expandedRowKeys = {};
for (let data of expandedRows) {
this.d_expandedRowKeys[String(ObjectUtils.resolveFieldData(data, this.dataKey))] = 1;
}
} else {
this.d_expandedRowKeys = null;
}
},
updateEditingRowKeys(editingRows) { updateEditingRowKeys(editingRows) {
if (editingRows && editingRows.length) { if (editingRows && editingRows.length) {
this.d_editingRowKeys = {}; this.d_editingRowKeys = {};
@ -1557,31 +1538,22 @@ export default {
event.preventDefault(); event.preventDefault();
}, },
toggleRow(event) { toggleRow(event) {
let rowData = event.data; const { expanded, ...rest } = event;
let expanded; const rowData = event.data;
let expandedRowIndex; let expandedRows;
let _expandedRows = this.expandedRows ? [...this.expandedRows] : [];
if (this.dataKey) { if (this.dataKey) {
expanded = this.d_expandedRowKeys ? this.d_expandedRowKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false; const value = ObjectUtils.resolveFieldData(rowData, this.dataKey);
expandedRows = this.expandedRows ? { ...this.expandedRows } : {};
expanded ? (expandedRows[value] = true) : delete expandedRows[value];
} else { } else {
expandedRowIndex = this.findIndex(rowData, this.expandedRows); expandedRows = this.expandedRows ? [...this.expandedRows] : [];
expanded = expandedRowIndex > -1; expanded ? expandedRows.push(rowData) : (expandedRows = expandedRows.filter((d) => !this.equals(rowData, d)));
} }
if (expanded) { this.$emit('update:expandedRows', expandedRows);
if (expandedRowIndex == null) { expanded ? this.$emit('row-expand', rest) : this.$emit('row-collapse', rest);
expandedRowIndex = this.findIndex(rowData, this.expandedRows);
}
_expandedRows.splice(expandedRowIndex, 1);
this.$emit('update:expandedRows', _expandedRows);
this.$emit('row-collapse', event);
} else {
_expandedRows.push(rowData);
this.$emit('update:expandedRows', _expandedRows);
this.$emit('row-expand', event);
}
}, },
toggleRowGroup(e) { toggleRowGroup(e) {
const event = e.originalEvent; const event = e.originalEvent;
@ -1655,7 +1627,6 @@ export default {
if (this.expandedRows) { if (this.expandedRows) {
state.expandedRows = this.expandedRows; state.expandedRows = this.expandedRows;
state.expandedRowKeys = this.d_expandedRowKeys;
} }
if (this.expandedRowGroups) { if (this.expandedRowGroups) {
@ -1717,7 +1688,6 @@ export default {
} }
if (restoredState.expandedRows) { if (restoredState.expandedRows) {
this.d_expandedRowKeys = restoredState.expandedRowKeys;
this.$emit('update:expandedRows', restoredState.expandedRows); this.$emit('update:expandedRows', restoredState.expandedRows);
} }

488
components/lib/datatable/TableBody.vue
View File

@ -1,128 +1,78 @@
<template> <template>
<tbody :ref="bodyRef" :class="cx('tbody')" role="rowgroup" :style="bodyStyle" v-bind="ptm('tbody', ptmTBodyOptions)"> <tbody :ref="bodyRef" :class="cx('tbody')" role="rowgroup" :style="bodyStyle" v-bind="ptm('tbody', ptmTBodyOptions)">
<template v-if="!empty"> <template v-if="!empty">
<template v-for="(rowData, index) of value"> <template v-for="(rowData, rowIndex) of value" :key="rowIndex">
<tr <DTBodyRow
v-if="templates['groupheader'] && rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(index))" :rowData="rowData"
:key="getRowKey(rowData, getRowIndex(index)) + '_subheader'" :index="rowIndex"
:class="cx('rowGroupHeader')" :value="value"
:style="rowGroupHeaderStyle" :columns="columns"
role="row" :frozenRow="frozenRow"
v-bind="ptm('rowGroupHeader')" :empty="empty"
> :first="first"
<td :colspan="columnsLength - 1" v-bind="{ ...getColumnPT('bodycell'), ...ptm('rowGroupHeaderCell') }"> :dataKey="dataKey"
<button v-if="expandableRowGroups" :class="cx('rowGroupToggler')" @click="onRowGroupToggle($event, rowData)" type="button" v-bind="ptm('rowGroupToggler')"> :selection="selection"
<component v-if="templates['rowgrouptogglericon']" :is="templates['rowgrouptogglericon']" :expanded="isRowGroupExpanded(rowData)" /> :selectionKeys="selectionKeys"
<template v-else> :selectionMode="selectionMode"
<span v-if="isRowGroupExpanded(rowData) && expandedRowIcon" :class="[cx('rowGroupTogglerIcon'), expandedRowIcon]" v-bind="ptm('rowGroupTogglerIcon')" /> :contextMenu="contextMenu"
<ChevronDownIcon v-else-if="isRowGroupExpanded(rowData) && !expandedRowIcon" :class="cx('rowGroupTogglerIcon')" v-bind="ptm('rowGroupTogglerIcon')" /> :contextMenuSelection="contextMenuSelection"
<span v-else-if="!isRowGroupExpanded(rowData) && collapsedRowIcon" :class="[cx('rowGroupTogglerIcon'), collapsedRowIcon]" v-bind="ptm('rowGroupTogglerIcon')" /> :rowGroupMode="rowGroupMode"
<ChevronRightIcon v-else-if="!isRowGroupExpanded(rowData) && !collapsedRowIcon" :class="cx('rowGroupTogglerIcon')" v-bind="ptm('rowGroupTogglerIcon')" /> :groupRowsBy="groupRowsBy"
</template> :expandableRowGroups="expandableRowGroups"
</button> :rowClass="rowClass"
<component :is="templates['groupheader']" :data="rowData" :index="getRowIndex(index)" /> :rowStyle="rowStyle"
</td> :editMode="editMode"
</tr> :compareSelectionBy="compareSelectionBy"
<tr :scrollable="scrollable"
v-if="expandableRowGroups ? isRowGroupExpanded(rowData) : true" :expandedRowIcon="expandedRowIcon"
:key="getRowKey(rowData, getRowIndex(index))" :collapsedRowIcon="collapsedRowIcon"
:class="getRowClass(rowData)" :expandedRows="expandedRows"
:style="getRowStyle(rowData)" :expandedRowGroups="expandedRowGroups"
:tabindex="setRowTabindex(index)" :editingRows="editingRows"
role="row" :editingRowKeys="editingRowKeys"
:aria-selected="selectionMode ? isSelected(rowData) : null" :templates="templates"
@click="onRowClick($event, rowData, getRowIndex(index))" :responsiveLayout="responsiveLayout"
@dblclick="onRowDblClick($event, rowData, getRowIndex(index))" :virtualScrollerContentProps="virtualScrollerContentProps"
@contextmenu="onRowRightClick($event, rowData, getRowIndex(index))" :isVirtualScrollerDisabled="isVirtualScrollerDisabled"
@touchend="onRowTouchEnd($event)" :editingMeta="editingMeta"
@keydown.self="onRowKeyDown($event, rowData, getRowIndex(index))" :rowGroupHeaderStyle="rowGroupHeaderStyle"
@mousedown="onRowMouseDown($event)" :expandedRowId="expandedRowId"
@dragstart="onRowDragStart($event, getRowIndex(index))" :nameAttributeSelector="nameAttributeSelector"
@dragover="onRowDragOver($event, getRowIndex(index))" @rowgroup-toggle="$emit('rowgroup-toggle', $event)"
@dragleave="onRowDragLeave($event)" @row-click="$emit('row-click', $event)"
@dragend="onRowDragEnd($event)" @row-dblclick="$emit('row-dblclick', $event)"
@drop="onRowDrop($event)" @row-rightclick="$emit('row-rightclick', $event)"
v-bind="getBodyRowPTOptions('bodyRow', rowData, index)" @row-touchend="$emit('row-touchend', $event)"
:data-p-selectable-row="selectionMode ? true : false" @row-keydown="$emit('row-keydown', $event)"
:data-p-highlight="selection && isSelected(rowData)" @row-mousedown="$emit('row-mousedown', $event)"
:data-p-highlight-contextmenu="contextMenuSelection && isSelectedWithContextMenu(rowData)" @row-dragstart="$emit('row-dragstart', $event)"
> @row-dragover="$emit('row-dragover', $event)"
<template v-for="(col, i) of columns"> @row-dragleave="$emit('row-dragleave', $event)"
<DTBodyCell @row-dragend="$emit('row-dragend', $event)"
v-if="shouldRenderBodyCell(value, col, getRowIndex(index))" @row-drop="$emit('row-drop', $event)"
:key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i" @row-toggle="$emit('row-toggle', $event)"
:rowData="rowData" @radio-change="$emit('radio-change', $event)"
:column="col" @checkbox-change="$emit('checkbox-change', $event)"
:rowIndex="getRowIndex(index)" @cell-edit-init="$emit('cell-edit-init', $event)"
:index="i" @cell-edit-complete="$emit('cell-edit-complete', $event)"
:selected="isSelected(rowData)" @cell-edit-cancel="$emit('cell-edit-cancel', $event)"
:frozenRow="frozenRow" @row-edit-init="$emit('row-edit-init', $event)"
:rowspan="rowGroupMode === 'rowspan' ? calculateRowGroupSize(value, col, getRowIndex(index)) : null" @row-edit-save="$emit('row-edit-save', $event)"
:editMode="editMode" @row-edit-cancel="$emit('row-edit-cancel', $event)"
:editing="editMode === 'row' && isRowEditing(rowData)" @editing-meta-change="$emit('editing-meta-change', $event)"
:editingMeta="editingMeta" :unstyled="unstyled"
:responsiveLayout="responsiveLayout" :pt="pt"
:virtualScrollerContentProps="virtualScrollerContentProps" />
:ariaControls="expandedRowId + '_' + index + '_expansion'"
:name="nameAttributeSelector"
:isRowExpanded="isRowExpanded(rowData)"
:expandedRowIcon="expandedRowIcon"
:collapsedRowIcon="collapsedRowIcon"
@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)"
@editing-meta-change="onEditingMetaChange"
:unstyled="unstyled"
:pt="pt"
/>
</template>
</tr>
<tr
v-if="templates['expansion'] && expandedRows && isRowExpanded(rowData)"
:key="getRowKey(rowData, getRowIndex(index)) + '_expansion'"
:id="expandedRowId + '_' + index + '_expansion'"
:class="cx('rowExpansion')"
role="row"
v-bind="ptm('rowExpansion')"
>
<td :colspan="columnsLength" v-bind="{ ...getColumnPT('bodycell'), ...ptm('rowExpansionCell') }">
<component :is="templates['expansion']" :data="rowData" :index="getRowIndex(index)" />
</td>
</tr>
<tr
v-if="templates['groupfooter'] && rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, getRowIndex(index))"
:key="getRowKey(rowData, getRowIndex(index)) + '_subfooter'"
:class="cx('rowGroupFooter')"
role="row"
v-bind="ptm('rowGroupFooter')"
>
<td :colspan="columnsLength - 1" v-bind="{ ...getColumnPT('bodycell'), ...ptm('rowGroupFooterCell') }">
<component :is="templates['groupfooter']" :data="rowData" :index="getRowIndex(index)" />
</td>
</tr>
</template> </template>
</template> </template>
<tr v-else :class="cx('emptyMessage')" role="row" v-bind="ptm('emptyMessage')"> <DTBodyRow v-else :empty="empty" :columns="columns" :templates="templates" />
<td :colspan="columnsLength" v-bind="{ ...getColumnPT('bodycell'), ...ptm('emptyMessageCell') }">
<component v-if="templates.empty" :is="templates.empty" />
</td>
</tr>
</tbody> </tbody>
</template> </template>
<script> <script>
import BaseComponent from 'primevue/basecomponent'; import BaseComponent from 'primevue/basecomponent';
import ChevronDownIcon from 'primevue/icons/chevrondown'; import { DomHandler, UniqueComponentId } from 'primevue/utils';
import ChevronRightIcon from 'primevue/icons/chevronright'; import BodyRow from './BodyRow.vue';
import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
import { mergeProps } from 'vue';
import BodyCell from './BodyCell.vue';
export default { export default {
name: 'TableBody', name: 'TableBody',
@ -202,11 +152,7 @@ export default {
default: null default: null
}, },
expandedRows: { expandedRows: {
type: Array, type: [Array, Object],
default: null
},
expandedRowKeys: {
type: null,
default: null default: null
}, },
selection: { selection: {
@ -280,9 +226,7 @@ export default {
}, },
data() { data() {
return { return {
rowGroupHeaderStyleObject: {}, rowGroupHeaderStyleObject: {}
tabindexArray: [],
isARowSelected: false
}; };
}, },
mounted() { mounted() {
@ -304,271 +248,6 @@ export default {
} }
}, },
methods: { methods: {
columnProp(col, prop) {
return ObjectUtils.getVNodeProp(col, prop);
},
getColumnPT(key) {
const columnMetaData = {
parent: {
instance: this,
props: this.$props,
state: this.$data
}
};
return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp({}), key, columnMetaData));
},
getColumnProp(column) {
return column.props && column.props.pt ? column.props.pt : undefined; //@todo
},
getBodyRowPTOptions(key, rowdata, index) {
return this.ptm(key, {
context: {
index,
selectable: this.$parentInstance?.$parentInstance?.rowHover || this.$parentInstance?.$parentInstance?.selectionMode,
selected: this.isSelected(rowdata),
stripedRows: this.$parentInstance?.$parentInstance?.stripedRows || false
}
});
},
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) : this.getRowIndex(index);
},
getRowIndex(index) {
const getItemOptions = this.getVirtualScrollerProp('getItemOptions');
return getItemOptions ? getItemOptions(index).index : index;
},
getRowStyle(rowData) {
if (this.rowStyle) {
return this.rowStyle(rowData);
}
},
getRowClass(rowData) {
let rowStyleClass = [];
if (this.rowClass) {
let rowClassValue = this.rowClass(rowData);
if (rowClassValue) {
rowStyleClass.push(rowClassValue);
}
}
return [this.cx('row', { rowData }), 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 !== 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], this.columnProp(column, 'field'));
let previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, this.columnProp(column, 'field'));
return currentRowFieldData !== previousRowFieldData;
} else {
return true;
}
} else {
return true;
}
}
} else {
return !this.columnProp(column, 'hidden');
}
},
calculateRowGroupSize(value, column, index) {
if (this.isGrouped(column)) {
let currentRowFieldData = ObjectUtils.resolveFieldData(value[index], this.columnProp(column, 'field'));
let nextRowFieldData = currentRowFieldData;
let groupRowSpan = 0;
while (currentRowFieldData === nextRowFieldData) {
groupRowSpan++;
let nextRowData = value[++index];
if (nextRowData) {
nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, this.columnProp(column, 'field'));
} else {
break;
}
}
return groupRowSpan === 1 ? null : groupRowSpan;
} else {
return null;
}
},
isGrouped(column) {
if (this.groupRowsBy && this.columnProp(column, 'field')) {
if (Array.isArray(this.groupRowsBy)) return this.groupRowsBy.indexOf(column.props.field) > -1;
else return this.groupRowsBy === column.props.field;
} else {
return false;
}
},
isRowEditing(rowData) {
if (rowData && this.editingRows) {
if (this.dataKey) return this.editingRowKeys ? this.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.expandedRowKeys ? this.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.selectionKeys ? this.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;
},
isSelectedWithContextMenu(rowData) {
if (rowData && this.contextMenuSelection) {
return this.equals(rowData, this.contextMenuSelection, this.dataKey);
}
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;
},
equals(data1, data2) {
return this.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, this.dataKey);
},
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 });
},
onRowDblClick(event, rowData, rowIndex) {
this.$emit('row-dblclick', { originalEvent: event, data: rowData, index: rowIndex });
},
onRowRightClick(event, rowData, rowIndex) {
this.$emit('row-rightclick', { 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);
},
onEditingMetaChange(event) {
this.$emit('editing-meta-change', event);
},
updateFrozenRowStickyPosition() { updateFrozenRowStickyPosition() {
this.$el.style.top = DomHandler.getOuterHeight(this.$el.previousElementSibling) + 'px'; this.$el.style.top = DomHandler.getOuterHeight(this.$el.previousElementSibling) + 'px';
}, },
@ -587,26 +266,9 @@ export default {
const contentRef = this.getVirtualScrollerProp('contentRef'); const contentRef = this.getVirtualScrollerProp('contentRef');
contentRef && contentRef(el); contentRef && contentRef(el);
},
setRowTabindex(index) {
if (this.selection === null && (this.selectionMode === 'single' || this.selectionMode === 'multiple')) {
return index === 0 ? 0 : -1;
}
return -1;
} }
}, },
computed: { computed: {
columnsLength() {
let hiddenColLength = 0;
this.columns.forEach((column) => {
if (this.columnProp(column, 'selectionMode') === 'single') hiddenColLength--;
if (this.columnProp(column, 'hidden')) hiddenColLength++;
});
return this.columns ? this.columns.length - hiddenColLength : 0;
},
rowGroupHeaderStyle() { rowGroupHeaderStyle() {
if (this.scrollable) { if (this.scrollable) {
return { top: this.rowGroupHeaderStyleObject.top }; return { top: this.rowGroupHeaderStyleObject.top };
@ -617,24 +279,22 @@ export default {
bodyStyle() { bodyStyle() {
return this.getVirtualScrollerProp('contentStyle'); return this.getVirtualScrollerProp('contentStyle');
}, },
expandedRowId() {
return UniqueComponentId();
},
nameAttributeSelector() {
return UniqueComponentId();
},
ptmTBodyOptions() { ptmTBodyOptions() {
return { return {
context: { context: {
scrollable: this.$parentInstance?.$parentInstance?.scrollable scrollable: this.$parentInstance?.$parentInstance?.scrollable
} }
}; };
},
expandedRowId() {
return UniqueComponentId();
},
nameAttributeSelector() {
return UniqueComponentId();
} }
}, },
components: { components: {
DTBodyCell: BodyCell, DTBodyRow: BodyRow
ChevronDownIcon: ChevronDownIcon,
ChevronRightIcon: ChevronRightIcon
} }
}; };
</script> </script>

6
components/lib/datatable/style/DataTableStyle.js
View File

@ -368,7 +368,7 @@ const classes = {
rowgroupHeader: 'p-rowgroup-header', rowgroupHeader: 'p-rowgroup-header',
rowGroupToggler: 'p-row-toggler p-link', rowGroupToggler: 'p-row-toggler p-link',
rowGroupTogglerIcon: 'p-row-toggler-icon', rowGroupTogglerIcon: 'p-row-toggler-icon',
row: ({ instance, props, rowData }) => { row: ({ instance, props }) => {
let rowStyleClass = []; let rowStyleClass = [];
if (props.selectionMode) { if (props.selectionMode) {
@ -377,13 +377,13 @@ const classes = {
if (props.selection) { if (props.selection) {
rowStyleClass.push({ rowStyleClass.push({
'p-highlight': instance.isSelected(rowData) 'p-highlight': instance.isSelected
}); });
} }
if (props.contextMenuSelection) { if (props.contextMenuSelection) {
rowStyleClass.push({ rowStyleClass.push({
'p-highlight-contextmenu': instance.isSelectedWithContextMenu(rowData) 'p-highlight-contextmenu': instance.isSelectedWithContextMenu
}); });
} }

12
components/lib/utils/ObjectUtils.js
View File

@ -203,13 +203,15 @@ export default {
}, },
getVNodeProp(vnode, prop) { getVNodeProp(vnode, prop) {
let props = vnode.props; if (vnode) {
let props = vnode.props;
if (props) { if (props) {
let kebabProp = prop.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(); let kebabProp = prop.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
let propName = Object.prototype.hasOwnProperty.call(props, kebabProp) ? kebabProp : prop; let propName = Object.prototype.hasOwnProperty.call(props, kebabProp) ? kebabProp : prop;
return vnode.type.extends.props[prop].type === Boolean && props[propName] === '' ? true : props[propName]; return vnode.type.extends.props[prop].type === Boolean && props[propName] === '' ? true : props[propName];
}
} }
return null; return null;

6
doc/datatable/RowExpansionDoc.vue
View File

@ -223,7 +223,7 @@ export default {
this.$toast.add({ severity: 'success', summary: 'Product Collapsed', detail: event.data.name, life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Product Collapsed', detail: event.data.name, life: 3000 });
}, },
expandAll() { expandAll() {
this.expandedRows = this.products.filter((p) => p.id); this.expandedRows = this.products.reduce((acc, p) => (acc[p.id] = true) && acc, {});
}, },
collapseAll() { collapseAll() {
this.expandedRows = null; this.expandedRows = null;
@ -352,7 +352,7 @@ const onRowCollapse = (event) => {
toast.add({ severity: 'success', summary: 'Product Collapsed', detail: event.data.name, life: 3000 }); toast.add({ severity: 'success', summary: 'Product Collapsed', detail: event.data.name, life: 3000 });
}; };
const expandAll = () => { const expandAll = () => {
expandedRows.value = products.value.filter((p) => p.id); expandedRows.value = products.value.reduce((acc, p) => (acc[p.id] = true) && acc, {});
}; };
const collapseAll = () => { const collapseAll = () => {
expandedRows.value = null; expandedRows.value = null;
@ -437,7 +437,7 @@ const getOrderSeverity = (order) => {
this.$toast.add({ severity: 'success', summary: 'Product Collapsed', detail: event.data.name, life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Product Collapsed', detail: event.data.name, life: 3000 });
}, },
expandAll() { expandAll() {
this.expandedRows = this.products.filter((p) => p.id); this.expandedRows = this.products.reduce((acc, p) => (acc[p.id] = true) && acc, {});
}, },
collapseAll() { collapseAll() {
this.expandedRows = null; this.expandedRows = null;