<template>
<div id="app">
<ejs-grid id="Grid" :columns="columns" ref="grid" :dataSource="data" :allowPaging="true"></ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Page } from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource";
Vue.use(GridPlugin);
export default {
data() {
debugger;
return {
data: data,
columns: [
{
field: "OrderID",
headerText: "Order ID",
width: 120,
textAlign: "Right"
},
{
field: "CustomerID",
headerText: "Customer ID",
width: 150,
showInColumnChooser: false
},
{
field: "EmployeeID",
template:
'<div class="image"> <img src="https://ej2.syncfusion.com/vue/demos/src/grid/images/${EmployeeID}.png" alt="${EmployeeID}" /></div>',
headerText: "Employee ID",
width: 130
}
]
};
},
provide: {
grid: [Page]
},
methods: {}
};
</script>
<style>
.image img {
height: 55px;
width: 55px;
border-radius: 50px;
box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0, 0, 0, 0.2);
}
</style> |