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

Initiated RowGrouping

pull/104/head
cagataycivici 2019-10-21 13:51:06 +03:00
parent 4526fe6a3d
commit 1e39ba09b0
2 changed files with 63 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,17 +23,20 @@
<table ref="table"> <table ref="table">
<thead class="p-datatable-thead"> <thead class="p-datatable-thead">
<tr v-if="!headerColumnGroup"> <tr v-if="!headerColumnGroup">
<th v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" :class="getColumnHeaderClass(col)" <template v-for="(col,i) of columns">
@click="onColumnHeaderClick($event, col)" @mousedown="onColumnHeaderMouseDown($event, col)" <th v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== col.field)"
@dragstart="onColumnHeaderDragStart($event)" @dragover="onColumnHeaderDragOver($event)" @dragleave="onColumnHeaderDragLeave($event)" @drop="onColumnHeaderDrop($event)" :key="col.columnKey||col.field||i" :style="col.headerStyle" :class="getColumnHeaderClass(col)"
:colspan="col.colspan" :rowspan="col.rowspan"> @click="onColumnHeaderClick($event, col)" @mousedown="onColumnHeaderMouseDown($event, col)"
<span class="p-column-resizer p-clickable" @mousedown="onColumnResizeStart" v-if="resizableColumns"></span> @dragstart="onColumnHeaderDragStart($event)" @dragover="onColumnHeaderDragOver($event)" @dragleave="onColumnHeaderDragLeave($event)" @drop="onColumnHeaderDrop($event)"
<ColumnSlot :column="col" type="header" v-if="col.$scopedSlots.header" /> :colspan="col.colspan" :rowspan="col.rowspan">
<span class="p-column-title" v-if="col.header">{{col.header}}</span> <span class="p-column-resizer p-clickable" @mousedown="onColumnResizeStart" v-if="resizableColumns"></span>
<span v-if="col.sortable" :class="getSortableColumnIcon(col)"></span> <ColumnSlot :column="col" type="header" v-if="col.$scopedSlots.header" />
<ColumnSlot :column="col" type="filter" v-if="col.$scopedSlots.filter" /> <span class="p-column-title" v-if="col.header">{{col.header}}</span>
<DTHeaderCheckbox :checked="allRowsSelected" @change="toggleRowsWithCheckbox" :disabled="empty" v-if="col.selectionMode ==='multiple'" /> <span v-if="col.sortable" :class="getSortableColumnIcon(col)"></span>
</th> <ColumnSlot :column="col" type="filter" v-if="col.$scopedSlots.filter" />
<DTHeaderCheckbox :checked="allRowsSelected" @change="toggleRowsWithCheckbox" :disabled="empty" v-if="col.selectionMode ==='multiple'" />
</th>
</template>
</tr> </tr>
<template v-else> <template v-else>
<tr v-for="(row,i) of headerColumnGroup.rows" :key="i"> <tr v-for="(row,i) of headerColumnGroup.rows" :key="i">
@ -52,17 +55,19 @@
<tbody class="p-datatable-tbody"> <tbody class="p-datatable-tbody">
<template v-if="!empty"> <template v-if="!empty">
<template v-for="(rowData, index) of dataToRender"> <template v-for="(rowData, index) of dataToRender">
<tr class="p-rowgroup-header" v-if="rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(dataToRender, rowData, index)" :key="getRowKey(rowData, index)"> <tr class="p-rowgroup-header" v-if="rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(dataToRender, rowData, index)" :key="getRowKey(rowData, index) + '_subheader'">
<td :colspan="columns.length"> <td :colspan="columns.length - 1">
<slot name="groupheader" :data="rowData"></slot> <slot name="groupheader" :data="rowData"></slot>
</td> </td>
</tr> </tr>
<tr :class="getRowClass(rowData)" :key="getRowKey(rowData, index)" <tr :class="getRowClass(rowData)" :key="getRowKey(rowData, index)"
@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)">
<DTBodyCell v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :rowData="rowData" :column="col" :selected="isSelected(rowData)" <template v-for="(col,i) of columns">
:rowTogglerIcon="col.expander ? rowTogglerIcon(rowData): null" @row-toggle="toggleRow" <DTBodyCell v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== col.field)" :key="col.columnKey||col.field||i" :rowData="rowData" :column="col" :selected="isSelected(rowData)"
@radio-change="toggleRowWithRadio" @checkbox-change="toggleRowWithCheckbox" /> :rowTogglerIcon="col.expander ? rowTogglerIcon(rowData): null" @row-toggle="toggleRow"
@radio-change="toggleRowWithRadio" @checkbox-change="toggleRowWithCheckbox" />
</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'">
<td :colspan="columns.length"> <td :colspan="columns.length">
@ -70,6 +75,9 @@
</slot> </slot>
</td> </td>
</tr> </tr>
<tr class="p-rowgroup-footer" v-if="rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(dataToRender, rowData, index)" :key="getRowKey(rowData, index) + '_subfooter'">
<slot name="groupfooter" :data="rowData"></slot>
</tr>
</template> </template>
</template> </template>
<tr v-else class="p-datatable-emptymessage"> <tr v-else class="p-datatable-emptymessage">
@ -1247,6 +1255,17 @@ export default {
return currentRowFieldData !== previousRowFieldData; return currentRowFieldData !== previousRowFieldData;
} }
},
shouldRenderRowGroupFooter(value, rowData, i) {
if (i === (value.length - 1)) {
return true;
}
else {
let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
let nextRowFieldData = ObjectUtils.resolveFieldData(value[i + 1], this.groupRowsBy);
return currentRowFieldData !== nextRowFieldData;
}
} }
}, },
computed: { computed: {

34
src/views/datatable/DataTableRowGroupDemo.vue
View File

@ -10,23 +10,32 @@
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<h3>Subheader Grouping</h3>
<DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand" <DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
sortMode="single" sortField="brand" :sortOrder="1"> sortMode="single" sortField="brand" :sortOrder="1">
<template #header>
Subheader Grouping
</template>
<Column field="brand" header="Brand"></Column> <Column field="brand" header="Brand"></Column>
<Column field="vin" header="Vin"></Column> <Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column> <Column field="year" header="Year"></Column>
<Column field="color" header="Color"></Column> <Column field="color" header="Color"></Column>
<Column field="price" header="Price"></Column>
<template #groupheader="slotProps"> <template #groupheader="slotProps">
<strong>{{slotProps.data.brand}}</strong> <span>{{slotProps.data.brand}}</span>
</template> </template>
<template #groupfooter="slotProps"> <template #groupfooter="slotProps">
<td colspan="3" style="text-align: right">Total Price</td> <td colspan="3" style="text-align: right">Total Price</td>
<td>20000</td> <td>20000</td>
</template> </template>
</DataTable> </DataTable>
<h3>RowSpan Grouping</h3>
<DataTable :value="cars" rowGroupMode="rowspan" :groupRowsBy="['brand', 'year']"
sortMode="multiple" :multiSortMeta="multiSortMeta">
<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>
</DataTable>
</div> </div>
<div class="content-section documentation"> <div class="content-section documentation">
@ -54,12 +63,18 @@ import DataTableSubMenu from './DataTableSubMenu';
export default { export default {
data() { data() {
return { return {
cars: null cars: null,
multiSortMeta: null
} }
}, },
carService: null, carService: null,
created() { created() {
this.carService = new CarService(); this.carService = new CarService();
this.multiSortMeta = [
{field: 'brand', order: 1},
{field: 'year', order: 1}
];
}, },
mounted() { mounted() {
this.carService.getCarsMedium().then(data => this.cars = data); this.carService.getCarsMedium().then(data => this.cars = data);
@ -68,4 +83,11 @@ export default {
'DataTableSubMenu': DataTableSubMenu 'DataTableSubMenu': DataTableSubMenu
} }
} }
</script> </script>
<style lang="scss" scoped>
.p-rowgroup-header span,
.p-rowgroup-footer td {
font-weight: 700;
}
</style>