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

489 lines
23 KiB
Vue
Executable File
Raw Blame History

<template>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1>DataTable <span>Row Group</span></h1>
<p>Rows can either be grouped by a separate grouping row or using rowspan.</p>
</div>
</div>
<div class="content-section implementation">
<div class="card">
<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" 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 colspan="4" style="text-align: right">Total Customers</td>
<td>{{calculateCustomerTotal(slotProps.data.representative.name)}}</td>
</template>
</DataTable>
</div>
<div class="card">
<h5>Expandable Row Groups</h5>
<p>Group customers by their representative.</p>
<DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name"
sortMode="single" sortField="representative.name" :sortOrder="1"
:expandableRowGroups="true" v-model:expandedRowGroups="expandedRowGroups"
@rowgroup-expand="onRowGroupExpand" @rowgroup-collapse="onRowGroupCollapse">
<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 colspan="4" style="text-align: right">Total Customers</td>
<td>{{calculateCustomerTotal(slotProps.data.representative.name)}}</td>
</template>
</DataTable>
</div>
<div class="card">
<h5>RowSpan Grouping</h5>
<DataTable :value="customers" rowGroupMode="rowspan" groupRowsBy="representative.name"
sortMode="single" sortField="representative.name" :sortOrder="1">
<Column header="#" headerStyle="width:3em">
<template #body="slotProps">
{{slotProps.index}}
</template>
</Column>
<Column field="representative.name" header="Representative">
<template #body="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>
</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>
</DataTable>
</div>
</div>
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<div class="p-d-flex p-jc-end">
<LiveEditor name="DataTableDemo" :sources="sources" :toastService="true" service="CustomerService" data="customers-medium" :components="['Column']" />
</div>
<pre v-code><code><template v-pre>
&lt;div class="card"&gt;
&lt;h5&gt;Subheader Grouping&lt;/h5&gt;
&lt;p&gt;Group customers by their representative.&lt;/p&gt;
&lt;DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name"
sortMode="single" sortField="representative.name" :sortOrder="1"&gt;
&lt;Column field="representative.name" header="Representative"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="country" header="Country"&gt;
&lt;template #body="slotProps"&gt;
&lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" /&gt;
&lt;span class="image-text"&gt;{{slotProps.data.country.name}}&lt;/span&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="company" header="Company"&gt;&lt;/Column&gt;
&lt;Column field="status" header="Status"&gt;
&lt;template #body="slotProps"&gt;
&lt;span :class="'customer-badge status-' + slotProps.data.status"&gt;{{slotProps.data.status}}&lt;/span&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="date" header="Date"&gt;&lt;/Column&gt;
&lt;template #groupheader="slotProps"&gt;
&lt;img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /&gt;
&lt;span class="image-text"&gt;{{slotProps.data.representative.name}}&lt;/span&gt;
&lt;/template&gt;
&lt;template #groupfooter="slotProps"&gt;
&lt;td colspan="4" style="text-align: right"&gt;Total Customers&lt;/td&gt;
&lt;td&gt;{{calculateCustomerTotal(slotProps.data.representative.name)}}&lt;/td&gt;
&lt;/template&gt;
&lt;/DataTable&gt;
&lt;/div&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Expandable Row Groups&lt;/h5&gt;
&lt;p&gt;Group customers by their representative.&lt;/p&gt;
&lt;DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name"
sortMode="single" sortField="representative.name" :sortOrder="1"
:expandableRowGroups="true" v-model:expandedRowGroups="expandedRowGroups"
@rowgroup-expand="onRowGroupExpand" @rowgroup-collapse="onRowGroupCollapse"&gt;
&lt;Column field="representative.name" header="Representative"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="country" header="Country"&gt;
&lt;template #body="slotProps"&gt;
&lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" /&gt;
&lt;span class="image-text"&gt;{{slotProps.data.country.name}}&lt;/span&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="company" header="Company"&gt;&lt;/Column&gt;
&lt;Column field="status" header="Status"&gt;
&lt;template #body="slotProps"&gt;
&lt;span :class="'customer-badge status-' + slotProps.data.status"&gt;{{slotProps.data.status}}&lt;/span&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="date" header="Date"&gt;&lt;/Column&gt;
&lt;template #groupheader="slotProps"&gt;
&lt;img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /&gt;
&lt;span class="image-text"&gt;{{slotProps.data.representative.name}}&lt;/span&gt;
&lt;/template&gt;
&lt;template #groupfooter="slotProps"&gt;
&lt;td colspan="4" style="text-align: right"&gt;Total Customers&lt;/td&gt;
&lt;td&gt;{{calculateCustomerTotal(slotProps.data.representative.name)}}&lt;/td&gt;
&lt;/template&gt;
&lt;/DataTable&gt;
&lt;/div&gt;
&lt;div class="card"&gt;
&lt;h5&gt;RowSpan Grouping&lt;/h5&gt;
&lt;DataTable :value="customers" rowGroupMode="rowspan" groupRowsBy="representative.name"
sortMode="single" sortField="representative.name" :sortOrder="1"&gt;
&lt;Column header="#" headerStyle="width:3em"&gt;
&lt;template #body="slotProps"&gt;
{{slotProps.index}}
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="representative.name" header="Representative"&gt;
&lt;template #body="slotProps"&gt;
&lt;img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /&gt;
&lt;span class="image-text"&gt;{{slotProps.data.representative.name}}&lt;/span&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="country" header="Country"&gt;
&lt;template #body="slotProps"&gt;
&lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" /&gt;
&lt;span class="image-text"&gt;{{slotProps.data.country.name}}&lt;/span&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="company" header="Company"&gt;&lt;/Column&gt;
&lt;Column field="status" header="Status"&gt;
&lt;template #body="slotProps"&gt;
&lt;span :class="'customer-badge status-' + slotProps.data.status"&gt;{{slotProps.data.status}}&lt;/span&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="date" header="Date"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;/div&gt;
</template>
</code></pre>
<pre v-code.script><code>
import CustomerService from '../../service/CustomerService';
export default {
data() {
return {
customers: null,
expandedRowGroups: null
}
},
customerService: null,
created() {
this.customerService = new CustomerService();
},
mounted() {
this.customerService.getCustomersMedium().then(data => this.customers = data);
},
methods: {
onRowGroupExpand(event) {
this.$toast.add({severity: 'info', summary: 'Row Group Expanded', detail: 'Value: ' + event.data, life: 3000});
},
onRowGroupCollapse(event) {
this.$toast.add({severity: 'success', summary: 'Row Group Collapsed', detail: 'Value: ' + event.data, life: 3000});
},
calculateCustomerTotal(name) {
let total = 0;
if (this.customers) {
for (let customer of this.customers) {
if (customer.representative.name === name) {
total++;
}
}
}
return total;
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
</div>
</template>
<script>
import CustomerService from '../../service/CustomerService';
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
customers: null,
expandedRowGroups: null,
sources: {
'template': {
content: `<template>
<div class="layout-content">
<Toast />
<div class="content-section implementation">
<div class="card">
<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">
<Column field="representative.name" header="Representative"></Column>
<Column field="name" header="Name"></Column>
<Column field="country" header="Country">
<template #body="slotProps">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="20" />
<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="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="20" style="vertical-align: middle" />
<span class="image-text">{{slotProps.data.representative.name}}</span>
</template>
<template #groupfooter="slotProps">
<td colspan="4" style="text-align: right">Total Customers</td>
<td>{{calculateCustomerTotal(slotProps.data.representative.name)}}</td>
</template>
</DataTable>
</div>
<div class="card">
<h5>Expandable Row Groups</h5>
<p>Group customers by their representative.</p>
<DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name"
sortMode="single" sortField="representative.name" :sortOrder="1"
:expandableRowGroups="true" v-model:expandedRowGroups="expandedRowGroups"
@rowgroupExpand="onRowGroupExpand" @rowgroupCollapse="onRowGroupCollapse">
<Column field="representative.name" header="Representative"></Column>
<Column field="name" header="Name"></Column>
<Column field="country" header="Country">
<template #body="slotProps">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="20" />
<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="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="20" style="vertical-align: middle" />
<span class="image-text">{{slotProps.data.representative.name}}</span>
</template>
<template #groupfooter="slotProps">
<td colspan="4" style="text-align: right">Total Customers</td>
<td>{{calculateCustomerTotal(slotProps.data.representative.name)}}</td>
</template>
</DataTable>
</div>
<div class="card">
<h5>RowSpan Grouping</h5>
<DataTable :value="customers" rowGroupMode="rowspan" groupRowsBy="representative.name"
sortMode="single" sortField="representative.name" :sortOrder="1">
<Column header="#" headerStyle="width:3em">
<template #body="slotProps">
{{slotProps.index}}
</template>
</Column>
<Column field="representative.name" header="Representative">
<template #body="slotProps">
<img :alt="slotProps.data.representative.name" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="20" style="vertical-align: middle" />
<span class="image-text">{{slotProps.data.representative.name}}</span>
</template>
</Column>
<Column field="name" header="Name"></Column>
<Column field="country" header="Country">
<template #body="slotProps">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="20" />
<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>
</DataTable>
</div>
</div>
</div>
</template>
<script>
import CustomerService from '../service/CustomerService';
export default {
data() {
return {
customers: null,
expandedRowGroups: null
}
},
customerService: null,
created() {
this.customerService = new CustomerService();
},
mounted() {
this.customerService.getCustomersMedium().then(data => this.customers = data);
},
methods: {
onRowGroupExpand(event) {
this.$toast.add({severity: 'info', summary: 'Row Group Expanded', detail: 'Value: ' + event.data, life: 3000});
},
onRowGroupCollapse(event) {
this.$toast.add({severity: 'success', summary: 'Row Group Collapsed', detail: 'Value: ' + event.data, life: 3000});
},
calculateCustomerTotal(name) {
let total = 0;
if (this.customers) {
for (let customer of this.customers) {
if (customer.representative.name === name) {
total++;
}
}
}
return total;
}
}
}`,
style: `
<style lang="scss" scoped>
.p-rowgroup-footer td {
font-weight: 700;
}
::v-deep(.p-rowgroup-header) {
span {
font-weight: 700;
}
.p-row-toggler {
vertical-align: middle;
margin-right: .25rem;
}
}
.image-text {
vertical-align: middle;
}
img {
vertical-align: middle;
}
</style>`
}
}
}
},
customerService: null,
created() {
this.customerService = new CustomerService();
},
mounted() {
this.customerService.getCustomersMedium().then(data => this.customers = data);
},
methods: {
onRowGroupExpand(event) {
this.$toast.add({severity: 'info', summary: 'Row Group Expanded', detail: 'Value: ' + event.data, life: 3000});
},
onRowGroupCollapse(event) {
this.$toast.add({severity: 'success', summary: 'Row Group Collapsed', detail: 'Value: ' + event.data, life: 3000});
},
calculateCustomerTotal(name) {
let total = 0;
if (this.customers) {
for (let customer of this.customers) {
if (customer.representative.name === name) {
total++;
}
}
}
return total;
}
},
components: {
LiveEditor
}
}
</script>
<style lang="scss" scoped>
.p-rowgroup-footer td {
font-weight: 700;
}
::v-deep(.p-rowgroup-header) {
span {
font-weight: 700;
}
.p-row-toggler {
vertical-align: middle;
margin-right: .25rem;
}
}
</style>
View Git Blame Copy Permalink