We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Maximize productivity with
30% off* for a limited time
using BOOSTDEV30.
Includes 3- and 5-packs.
*Some exclusions may apply.
New Product LaunchBoldDesk: Help desk ticketing software starts at $10 for 3 agents.
Try it for free.|
<template>
<div>
<ejs-grid
ref="grid"
:columns="sourceColumns"
:dataSource="rows"
:allowGrouping="true"
:groupSettings="groupSettings"
:aggregates="aggregates"
/>
</div>
</template>
<script>
import Vue from "vue";
import {
GridPlugin,
Aggregate,
ExcelExport,
Group,
PdfExport,
Resize,
VirtualScroll
} from "@syncfusion/ej2-vue-grids";
Vue.use(GridPlugin);
export default {
name: "Grid",
data() {
return {
columns: [],
rows: [],
sourceColumns: [
{
field: "name",
headerText: "Name"
},
{
field: "location",
headerText: "Location"
},
{
field: "purchase",
headerText: "Purchase"
}
],
sourceRows: [
{
name: "John Doe",
location: "Paris",
purchase: 3
},
{
name: "John Doe",
location: "Paris",
purchase: 5
},
{
name: "John Doe",
location: "London",
purchase: 7
},
{
name: "Jane Doe",
location: "London",
purchase: 9
}
],
groupBy: ["name"],
aggregates: {
columns: []
}
};
},
computed: {
groupSettings() {
return {
showDropArea: false,
columns: this.groupBy
};
}
},
mounted() {
// it requires no time delay
//here you can change the columns and dataSource
this.columns = this.sourceColumns;
this.rows = this.sourceRows;
this.groupBy = ["location", "name"];
},
provide: {
grid: [Aggregate, ExcelExport, Group, PdfExport, Resize, VirtualScroll]
}
};
</script>
<style>
</style>
|
