Add toast to row group
parent
67a8b4e7b1
commit
acd0e815b6
|
@ -30,7 +30,8 @@
|
||||||
<h3>Expandable Row Groups</h3>
|
<h3>Expandable Row Groups</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"
|
||||||
:expandableRowGroups="true" :expandedRowGroups.sync="expandedRowGroups">
|
:expandableRowGroups="true" :expandedRowGroups.sync="expandedRowGroups"
|
||||||
|
@rowgroup-expand="onRowGroupExpand" @rowgroup-collapse="onRowGroupCollapse">
|
||||||
<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>
|
||||||
|
@ -86,7 +87,8 @@
|
||||||
<h3>Expandable Row Groups</h3>
|
<h3>Expandable Row Groups</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"
|
||||||
:expandableRowGroups="true" :expandedRowGroups.sync="expandedRowGroups">
|
:expandableRowGroups="true" :expandedRowGroups.sync="expandedRowGroups"
|
||||||
|
@rowgroup-expand="onRowExpand" @rowgroup-collapse="onRowCollapse">
|
||||||
<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>
|
||||||
|
@ -134,6 +136,14 @@ export default {
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.carService.getCarsMedium().then(data => this.cars = data);
|
this.carService.getCarsMedium().then(data => this.cars = 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});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
@ -161,6 +171,14 @@ export default {
|
||||||
mounted() {
|
mounted() {
|
||||||
this.carService.getCarsMedium().then(data => this.cars = data);
|
this.carService.getCarsMedium().then(data => this.cars = 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});
|
||||||
|
}
|
||||||
|
},
|
||||||
components: {
|
components: {
|
||||||
'DataTableSubMenu': DataTableSubMenu
|
'DataTableSubMenu': DataTableSubMenu
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue