vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 08:52:34 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactor #4149 - For DataTable & Column & ColumnGroup

Browse source
This commit is contained in:
Tuğçe Küçükoğlu 2023-07-19 15:05:06 +03:00
parent dcd76d09cc
commit 97d112a2e0
13 changed files with 195 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

46
components/lib/datatable/TableBody.vue
View file

@ -1,5 +1,5 @@
<template>
<tbody :ref="bodyRef" :class="cx('tbody')" role="rowgroup" :style="bodyStyle" v-bind="ptm('tbody')">
<tbody :ref="bodyRef" :class="cx('tbody')" role="rowgroup" :style="bodyStyle" v-bind="ptm('tbody', ptmTBodyOptions)">
<template v-if="!empty">
<template v-for="(rowData, index) of value">
<tr
@ -10,14 +10,14 @@
role="row"
v-bind="ptm('rowGroupHeader')"
>
<td :colspan="columnsLength - 1" v-bind="{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }">
<button v-if="expandableRowGroups" :class="cx('rowGroupToggler')" @click="onRowGroupToggle($event, rowData)" type="button" v-bind="getColumnPT('rowGroupToggler')">
<td :colspan="columnsLength - 1" v-bind="{ ...ptm('column.root'), ...ptm('column.bodyCell') }" data-pc-section="bodycell">
<button v-if="expandableRowGroups" :class="cx('rowGroupToggler')" @click="onRowGroupToggle($event, rowData)" type="button" v-bind="ptm('rowGroupToggler')">
<component v-if="templates['rowgrouptogglericon']" :is="templates['rowgrouptogglericon']" :expanded="isRowGroupExpanded(rowData)" />
<template v-else>
<span v-if="isRowGroupExpanded(rowData) && expandedRowIcon" :class="[cx('rowGroupTogglerIcon'), expandedRowIcon]" v-bind="getColumnPT('rowGroupTogglerIcon')" />
<ChevronDownIcon v-else-if="isRowGroupExpanded(rowData) && !expandedRowIcon" :class="cx('rowGroupTogglerIcon')" v-bind="getColumnPT('rowGroupTogglerIcon')" />
<span v-else-if="!isRowGroupExpanded(rowData) && collapsedRowIcon" :class="[cx('rowGroupTogglerIcon'), collapsedRowIcon]" v-bind="getColumnPT('rowGroupTogglerIcon')" />
<ChevronRightIcon v-else-if="!isRowGroupExpanded(rowData) && !collapsedRowIcon" :class="cx('rowGroupTogglerIcon')" v-bind="getColumnPT('rowGroupTogglerIcon')" />
<span v-if="isRowGroupExpanded(rowData) && expandedRowIcon" :class="[cx('rowGroupTogglerIcon'), expandedRowIcon]" v-bind="ptm('rowGroupTogglerIcon')" />
<ChevronDownIcon v-else-if="isRowGroupExpanded(rowData) && !expandedRowIcon" :class="cx('rowGroupTogglerIcon')" v-bind="ptm('rowGroupTogglerIcon')" />
<span v-else-if="!isRowGroupExpanded(rowData) && collapsedRowIcon" :class="[cx('rowGroupTogglerIcon'), collapsedRowIcon]" v-bind="ptm('rowGroupTogglerIcon')" />
<ChevronRightIcon v-else-if="!isRowGroupExpanded(rowData) && !collapsedRowIcon" :class="cx('rowGroupTogglerIcon')" v-bind="ptm('rowGroupTogglerIcon')" />
</template>
</button>
<component :is="templates['groupheader']" :data="rowData" :index="getRowIndex(index)" />
@ -42,7 +42,7 @@
@dragleave="onRowDragLeave($event)"
@dragend="onRowDragEnd($event)"
@drop="onRowDrop($event)"
v-bind="ptm('bodyRow')"
v-bind="getBodyRowPTOptions('bodyRow', rowData, index)"
:data-p-selectable-row="selectionMode ? true : false"
:data-p-highlight="selection && isSelected(rowData)"
:data-p-highlight-contextmenu="contextMenuSelection && isSelectedWithContextMenu(rowData)"
@ -102,7 +102,7 @@
role="row"
v-bind="ptm('rowGroupFooter')"
>
<td :colspan="columnsLength - 1" v-bind="{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }">
<td :colspan="columnsLength - 1" v-bind="{ ...ptm('column.root'), ...ptm('column.footerCell') }" data-pc-section="footercell">
<component :is="templates['groupfooter']" :data="rowData" :index="getRowIndex(index)" />
</td>
</tr>
@ -121,6 +121,7 @@ import BaseComponent from 'primevue/basecomponent';
import ChevronDownIcon from 'primevue/icons/chevrondown';
import ChevronRightIcon from 'primevue/icons/chevronright';
import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
import { mergeProps } from 'vue';
import BodyCell from './BodyCell.vue';
export default {
@ -306,18 +307,30 @@ export default {
columnProp(col, prop) {
return ObjectUtils.getVNodeProp(col, prop);
},
getColumnPT(column, key) {
return this.ptmo(this.getColumnProp(column), key, {
props: column.props,
getColumnPT(currentColumn, key) {
const columnMetaData = {
props: currentColumn.props,
parent: {
props: this.$props,
state: this.$data
}
});
};
return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(currentColumn), 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];
@ -609,6 +622,13 @@ export default {
},
nameAttributeSelector() {
return UniqueComponentId();
},
ptmTBodyOptions() {
return {
context: {
scrollable: this.$parentInstance?.$parentInstance?.scrollable
}
};
}
},
components: {