|
<!-- src/components/Hello.vue -->
<template>
<div class="col-lg-12 control-section">
<div>
<ejs-grid :dataSource="data" :allowFiltering="true" :allowGrouping="true" :allowSorting="true"
:allowPaging="true" :pageSettings="pageSettings" :columns="columns"></ejs-grid>
</div>
</div>
</template>
<script lang="ts">
import Vue from "vue";
import { GridPlugin, Filter, Page, FilterSettingsModel,PageSettingsModel, IFilter, Group, Sort } from "@syncfusion/ej2-vue-grids";
Vue.use(GridPlugin);
var demoTemplate = Vue.component("demo", {
template: "<ejs-button>{{data.ShipCountry}}</ejs-button>",
data() {
return {
data: {}
};
}
});
export default Vue.extend({
data: () => {
let pageModel: PageSettingsModel ={ pageSize:10, pageSizes: true}
return {
pageSettings:pageModel,
data: [{
...
},
...
],
columns: [ { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },
{ field: 'CustomerID', headerText: 'Customer Name', width: 150 },
{ field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' },
{ field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' },
{ field: 'ShipCountry', headerText: 'Ship Country', width: 150 }]
};
},
provide: {
grid: [Filter, Page, Group, Sort]
}
});
</script>
<style>
</style>
|
