Add scrollable row group
Cagatay Civici
parent
5f870bdf7a
commit
fe96ac1377
|
|
@ -25,7 +25,7 @@
|
|||
@column-dragstart="onColumnHeaderDragStart($event)" @column-dragover="onColumnHeaderDragOver($event)" @column-dragleave="onColumnHeaderDragLeave($event)" @column-drop="onColumnHeaderDrop($event)"
|
||||
@column-resizestart="onColumnResizeStart($event)" @checkbox-change="toggleRowsWithCheckbox($event)" />
|
||||
<DTTableBody v-if="frozenValue" :value="frozenValue" :frozenRow="true" class="p-datatable-frozen-tbody" :columns="columns" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
|
||||
:rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy"
|
||||
:rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy" :scrollable="scrollable"
|
||||
:expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
|
||||
:editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$slots" :loading="loading"
|
||||
@rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-rightclick="onRowRightClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
@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)"/>
|
||||
<DTTableBody :value="dataToRender" :columns="columns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
|
||||
:rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy"
|
||||
:rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy" :scrollable="scrollable"
|
||||
:expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
|
||||
:editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$slots" :loading="loading"
|
||||
@rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-rightclick="onRowRightClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
|
||||
|
|
@ -1826,7 +1826,6 @@ export default {
|
|||
.p-datatable-flex-scrollable {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -1837,6 +1836,10 @@ export default {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.p-datatable-scrollable .p-rowgroup-header {
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
/* Resizable */
|
||||
.p-datatable-resizable > .p-datatable-wrapper {
|
||||
overflow-x: auto;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<tbody class="p-datatable-tbody" role="rowgroup">
|
||||
<template v-if="!empty">
|
||||
<template v-for="(rowData, index) of value" :key="getRowKey(rowData, index) + '_subheader'">
|
||||
<tr class="p-rowgroup-header" v-if="templates['groupheader'] && rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, index)" role="row">
|
||||
<tr class="p-rowgroup-header" :style="rowGroupHeaderStyle" v-if="templates['groupheader'] && rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, index)" role="row">
|
||||
<td :colspan="columnsLength - 1">
|
||||
<button class="p-row-toggler p-link" @click="onRowGroupToggle($event, rowData)" v-if="expandableRowGroups" type="button">
|
||||
<span :class="rowGroupTogglerIcon(rowData)"></span>
|
||||
|
|
@ -152,16 +152,33 @@ export default {
|
|||
templates: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
scrollable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.frozenRow) {
|
||||
this.updateStickyPosition();
|
||||
this.updateFrozenRowStickyPosition();
|
||||
}
|
||||
|
||||
if (this.scrollable && this.rowGroupMode === 'subheader') {
|
||||
this.updateFrozenRowGroupHeaderStickyPosition();
|
||||
}
|
||||
},
|
||||
updated() {
|
||||
if (this.frozenRow) {
|
||||
this.updateStickyPosition();
|
||||
this.updateFrozenRowStickyPosition();
|
||||
}
|
||||
|
||||
if (this.scrollable && this.rowGroupMode === 'subheader') {
|
||||
this.updateFrozenRowGroupHeaderStickyPosition();
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
rowGroupHeaderStyleObject: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -422,13 +439,24 @@ export default {
|
|||
onRowEditCancel(event) {
|
||||
this.$emit('row-edit-cancel', event);
|
||||
},
|
||||
updateStickyPosition() {
|
||||
updateFrozenRowStickyPosition() {
|
||||
this.$el.style.top = DomHandler.getOuterHeight(this.$el.previousElementSibling) + 'px';
|
||||
},
|
||||
updateFrozenRowGroupHeaderStickyPosition() {
|
||||
let tableHeaderHeight = DomHandler.getOuterHeight(this.$el.previousElementSibling);
|
||||
this.rowGroupHeaderStyleObject.top = tableHeaderHeight + 'px'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
columnsLength() {
|
||||
return this.columns ? this.columns.length : 0;
|
||||
},
|
||||
rowGroupHeaderStyle() {
|
||||
if (this.scrollable) {
|
||||
return {top: this.rowGroupHeaderStyleObject.top};
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<h5>Subheader Grouping</h5>
|
||||
<p>Group customers by their representative.</p>
|
||||
<DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name"
|
||||
sortMode="single" sortField="representative.name" :sortOrder="1">
|
||||
sortMode="single" sortField="representative.name" :sortOrder="1" scrollable scrollHeight="400px">
|
||||
<Column field="representative.name" header="Representative"></Column>
|
||||
<Column field="name" header="Name"></Column>
|
||||
<Column field="country" header="Country">
|
||||
|
|
|
|||
|
|
@ -118,6 +118,35 @@
|
|||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Subheader Grouping</h5>
|
||||
<DataTable :value="customersGrouped" rowGroupMode="subheader" groupRowsBy="representative.name"
|
||||
sortMode="single" sortField="representative.name" :sortOrder="1" scrollable scrollHeight="400px">
|
||||
<Column field="representative.name" header="Representative"></Column>
|
||||
<Column field="name" header="Name"></Column>
|
||||
<Column field="country" header="Country">
|
||||
<template #body="slotProps">
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
|
||||
<span class="image-text">{{slotProps.data.country.name}}</span>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="company" header="Company"></Column>
|
||||
<Column field="status" header="Status">
|
||||
<template #body="slotProps">
|
||||
<span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="date" header="Date"></Column>
|
||||
<template #groupheader="slotProps">
|
||||
<img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
|
||||
<span class="image-text">{{slotProps.data.representative.name}}</span>
|
||||
</template>
|
||||
<template #groupfooter="slotProps">
|
||||
<td style="text-align: right" class="p-text-bold p-pr-6">Total Customers: {{calculateCustomerTotal(slotProps.data.representative.name)}}</td>
|
||||
</template>
|
||||
</DataTable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section documentation">
|
||||
|
|
@ -338,6 +367,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
customers: null,
|
||||
customersGrouped: null,
|
||||
virtualCustomers: null,
|
||||
lazyTotalRecords: 0,
|
||||
frozenValue: null,
|
||||
|
|
@ -570,6 +600,7 @@ export default {
|
|||
this.customers = data;
|
||||
this.loading = false;
|
||||
});
|
||||
this.customerService.getCustomersMedium().then(data => this.customersGrouped = data);
|
||||
this.customerService.getCustomersXLarge().then(data => this.inmemoryData = data);
|
||||
|
||||
this.frozenValue = [
|
||||
|
|
@ -638,6 +669,19 @@ export default {
|
|||
},
|
||||
formatCurrency(value) {
|
||||
return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
|
||||
},
|
||||
calculateCustomerTotal(name) {
|
||||
let total = 0;
|
||||
|
||||
if (this.customersGrouped) {
|
||||
for (let customer of this.customersGrouped) {
|
||||
if (customer.representative.name === name) {
|
||||
total++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return total;
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue