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

Update row group demo

pull/358/head
cagataycivici 2020-06-30 17:37:40 +03:00
parent ffbc27b7f3
commit ee76eef2ca
3 changed files with 228 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/datatable/DataTableDemo.vue
View File

@ -179,8 +179,8 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.image-text { .image-text {
visibility: middle; vertical-align: middle;
margin-left: 5rem; margin-left: .5rem;
} }
.customer-badge { .customer-badge {

4
src/views/datatable/DataTableFilterDemo.vue
View File

@ -333,8 +333,8 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.image-text { .image-text {
visibility: middle; vertical-align: middle;
margin-left: 5rem; margin-left: .5rem;
} }
.customer-badge { .customer-badge {

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

@ -10,58 +10,97 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<h5>Subheader Grouping</h5> <h5>Subheader Grouping</h5>
<DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand" <p>Group customers by their representative.</p>
sortMode="single" sortField="brand" :sortOrder="1"> <DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name"
<Column field="brand" header="Brand"></Column> sortMode="single" sortField="representative.name" :sortOrder="1">
<Column field="vin" header="Vin"></Column> <Column field="representative.name" header="Representative"></Column>
<Column field="year" header="Year"></Column> <Column field="name" header="Name"></Column>
<Column field="color" header="Color"></Column> <Column field="country" header="Country">
<Column field="price" header="Price"></Column> <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"> <template #groupheader="slotProps">
<span>{{slotProps.data.brand}}</span> <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>
<template #groupfooter="slotProps"> <template #groupfooter="slotProps">
<td colspan="3" style="text-align: right">Total Price</td> <td colspan="4" style="text-align: right">Total Customers</td>
<td>{{calculateGroupTotal(slotProps.data.brand)}}</td> <td>{{calculateCustomerTotal(slotProps.data.representative.name)}}</td>
</template> </template>
</DataTable> </DataTable>
</div> </div>
<div class="card"> <div class="card">
<h5>Expandable Row Groups</h5> <h5>Expandable Row Groups</h5>
<DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand" <p>Group customers by their representative.</p>
sortMode="single" sortField="brand" :sortOrder="1" <DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name"
sortMode="single" sortField="representative.name" :sortOrder="1"
:expandableRowGroups="true" :expandedRowGroups.sync="expandedRowGroups" :expandableRowGroups="true" :expandedRowGroups.sync="expandedRowGroups"
@rowgroup-expand="onRowGroupExpand" @rowgroup-collapse="onRowGroupCollapse"> @rowgroup-expand="onRowGroupExpand" @rowgroup-collapse="onRowGroupCollapse">
<Column field="brand" header="Brand"></Column> <Column field="representative.name" header="Representative"></Column>
<Column field="vin" header="Vin"></Column> <Column field="name" header="Name"></Column>
<Column field="year" header="Year"></Column> <Column field="country" header="Country">
<Column field="color" header="Color"></Column> <template #body="slotProps">
<Column field="price" header="Price"></Column> <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"> <template #groupheader="slotProps">
<span>{{slotProps.data.brand}}</span> <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>
<template #groupfooter="slotProps"> <template #groupfooter="slotProps">
<td colspan="3" style="text-align: right">Total Price</td> <td colspan="4" style="text-align: right">Total Customers</td>
<td>{{calculateGroupTotal(slotProps.data.brand)}}</td> <td>{{calculateCustomerTotal(slotProps.data.representative.name)}}</td>
</template> </template>
</DataTable> </DataTable>
</div> </div>
<div class="card"> <div class="card">
<h5>RowSpan Grouping</h5> <h5>RowSpan Grouping</h5>
<DataTable :value="cars" rowGroupMode="rowspan" groupRowsBy="brand" <DataTable :value="customers" rowGroupMode="rowspan" groupRowsBy="representative.name"
sortMode="single" sortField="brand" :sortOrder="1"> sortMode="single" sortField="representative.name" :sortOrder="1">
<Column header="#" headerStyle="width:3em"> <Column header="#" headerStyle="width:3em">
<template #body="slotProps"> <template #body="slotProps">
{{slotProps.index}} {{slotProps.index}}
</template> </template>
</Column> </Column>
<Column field="brand" header="Brand"></Column> <Column field="representative.name" header="Representative">
<Column field="year" header="Year"></Column> <template #body="slotProps">
<Column field="vin" header="Vin"></Column> <img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<Column field="color" header="Color"></Column> <span class="image-text">{{slotProps.data.representative.name}}</span>
<Column field="price" header="Price"></Column> </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> </DataTable>
</div> </div>
</div> </div>
@ -71,75 +110,120 @@
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;h3&gt;Subheader Grouping&lt;/h3&gt; &lt;div class="card"&gt;
&lt;DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand" &lt;h5&gt;Subheader Grouping&lt;/h5&gt;
sortMode="single" sortField="brand" :sortOrder="1"&gt; &lt;p&gt;Group customers by their representative.&lt;/p&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt; &lt;DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name"
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; sortMode="single" sortField="representative.name" :sortOrder="1"&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt; &lt;Column field="representative.name" header="Representative"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="price" header="Price"&gt;&lt;/Column&gt; &lt;Column field="country" header="Country"&gt;
&lt;template #groupheader="slotProps"&gt;
&lt;span&gt;&#123;&#123;slotProps.data.brand&#125;&#125;&lt;/span&gt;
&lt;/template&gt;
&lt;template #groupfooter="slotProps"&gt;
&lt;td colspan="3" style="text-align: right"&gt;Total Price&lt;/td&gt;
&lt;td&gt;&#123;&#123;calculateGroupTotal(slotProps.data.brand)&#125;&#125;&lt;/td&gt;
&lt;/template&gt;
&lt;/DataTable&gt;
&lt;h3&gt;Expandable Row Groups&lt;/h3&gt;
&lt;DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
sortMode="single" sortField="brand" :sortOrder="1"
:expandableRowGroups="true" :expandedRowGroups.sync="expandedRowGroups"
@rowgroup-expand="onRowExpand" @rowgroup-collapse="onRowCollapse"&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;Column field="price" header="Price"&gt;&lt;/Column&gt;
&lt;template #groupheader="slotProps"&gt;
&lt;span&gt;&#123;&#123;slotProps.data.brand&#125;&#125;&lt;/span&gt;
&lt;/template&gt;
&lt;template #groupfooter="slotProps"&gt;
&lt;td colspan="3" style="text-align: right"&gt;Total Price&lt;/td&gt;
&lt;td&gt;&#123;&#123;calculateGroupTotal(slotProps.data.brand)&#125;&#125;&lt;/td&gt;
&lt;/template&gt;
&lt;/DataTable&gt;
&lt;h3&gt;RowSpan Grouping&lt;/h3&gt;
&lt;DataTable :value="cars" rowGroupMode="rowspan" groupRowsBy="brand"
sortMode="single" sortField="brand" :sortOrder="1"&gt;
&lt;Column header="#" headerStyle="width:3em"&gt;
&lt;template #body="slotProps"&gt; &lt;template #body="slotProps"&gt;
&#123;&#123;slotProps.index&#125;&#125; &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;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt; &lt;Column field="company" header="Company"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt; &lt;Column field="status" header="Status"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;template #body="slotProps"&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;span :class="'customer-badge status-' + slotProps.data.status"&gt;{{slotProps.data.status}}&lt;/span&gt;
&lt;Column field="price" header="Price"&gt;&lt;/Column&gt; &lt;/template&gt;
&lt;/DataTable&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" :expandedRowGroups.sync="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> </template>
</CodeHighlight> </CodeHighlight>
<CodeHighlight lang="javascript"> <CodeHighlight lang="javascript">
import CarService from '../../service/CarService'; import CustomerService from '../../service/CustomerService';
export default { export default {
data() { data() {
return { return {
cars: null, customers: null,
expandedRowGroups: null expandedRowGroups: null
} }
}, },
carService: null, customerService: null,
created() { created() {
this.carService = new CarService(); this.customerService = new CustomerService();
}, },
mounted() { mounted() {
this.carService.getCarsMedium().then(data => this.cars = data); this.customerService.getCustomersMedium().then(data => this.customers = data);
}, },
methods: { methods: {
onRowGroupExpand(event) { onRowGroupExpand(event) {
@ -148,13 +232,13 @@ export default {
onRowGroupCollapse(event) { onRowGroupCollapse(event) {
this.$toast.add({severity: 'success', summary: 'Row Group Collapsed', detail: 'Value: ' + event.data, life: 3000}); this.$toast.add({severity: 'success', summary: 'Row Group Collapsed', detail: 'Value: ' + event.data, life: 3000});
}, },
calculateGroupTotal(brand) { calculateCustomerTotal(name) {
let total = 0; let total = 0;
if (this.cars) { if (this.customers) {
for (let car of this.cars) { for (let customer of this.customers) {
if (car.brand === brand) { if (customer.representative.name === name) {
total += car.price; total++;
} }
} }
} }
@ -171,21 +255,21 @@ export default {
</template> </template>
<script> <script>
import CarService from '../../service/CarService'; import CustomerService from '../../service/CustomerService';
export default { export default {
data() { data() {
return { return {
cars: null, customers: null,
expandedRowGroups: null expandedRowGroups: null
} }
}, },
carService: null, customerService: null,
created() { created() {
this.carService = new CarService(); this.customerService = new CustomerService();
}, },
mounted() { mounted() {
this.carService.getCarsMedium().then(data => this.cars = data); this.customerService.getCustomersMedium().then(data => this.customers = data);
}, },
methods: { methods: {
onRowGroupExpand(event) { onRowGroupExpand(event) {
@ -194,13 +278,13 @@ export default {
onRowGroupCollapse(event) { onRowGroupCollapse(event) {
this.$toast.add({severity: 'success', summary: 'Row Group Collapsed', detail: 'Value: ' + event.data, life: 3000}); this.$toast.add({severity: 'success', summary: 'Row Group Collapsed', detail: 'Value: ' + event.data, life: 3000});
}, },
calculateGroupTotal(brand) { calculateCustomerTotal(name) {
let total = 0; let total = 0;
if (this.cars) { if (this.customers) {
for (let car of this.cars) { for (let customer of this.customers) {
if (car.brand === brand) { if (customer.representative.name === name) {
total += car.price; total++;
} }
} }
} }
@ -212,6 +296,50 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.customer-badge {
border-radius: 2px;
padding: .25em .5rem;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
letter-spacing: .3px;
&.status-qualified {
background-color: #C8E6C9;
color: #256029;
}
&.status-unqualified {
background-color: #FFCDD2;
color: #C63737;
}
&.status-negotiation {
background-color: #FEEDAF;
color: #8A5340;
}
&.status-new {
background-color: #B3E5FC;
color: #23547B;
}
&.status-renewal {
background-color: #ECCFFF;
color: #694382;
}
&.status-proposal {
background-color: #FFD8B2;
color: #805B36;
}
}
.image-text {
vertical-align: middle;
margin-left: .5rem;
}
.p-rowgroup-footer td { .p-rowgroup-footer td {
font-weight: 700; font-weight: 700;
} }
@ -226,6 +354,4 @@ export default {
margin-right: .25rem; margin-right: .25rem;
} }
} }
</style> </style>