I'm a newbie in Vue and Im tryig to integrate data grid component in an existing project I had. Unfortunatelly I have a problem apparently related to the component registration way. I'm using (this is the only changed I have done):
<template>
<div>
<page-title :heading=heading :subheading=subheading :icon=icon></page-title>
<ejs-grid>
<e-columns>
<e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column>
<e-column field='CustomerName' headerText='Customer Name' width='150'></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import PageTitle from "../../Layout/Components/PageTitle.vue";
import VuePerfectScrollbar from 'vue-perfect-scrollbar'
import Utils from "../../Helpers/Utils";
import { Grid } from '@syncfusion/ej2-grids';
import {GridPlugin} from "@syncfusion/ej2-vue-grids";
// import chart1 from './Analytics/chart1';
// import chart2 from './Analytics/chart2';
// import chart3 from './Analytics/chart3';
import {
library
} from '@fortawesome/fontawesome-svg-core'
import {
faTrashAlt,
faCheck,
faCalendarAlt,
faAngleDown,
faAngleUp,
faTh,
} from '@fortawesome/free-solid-svg-icons'
import {
FontAwesomeIcon
} from '@fortawesome/vue-fontawesome'
library.add(
faTrashAlt,
faCheck,
faAngleDown,
faAngleUp,
faTh,
faCalendarAlt,
);
export default {
components: {
PageTitle,
GridPlugin
},
data: () => ({
heading: 'Mando Central',
subheading: '',
icon: 'pe-7s-plugin icon-gradient bg-tempting-azure',
columDefs: null,
rowData: null
}),
mounted() {
},
beforeMount() {
},
methods: {},
}
</script>
