Hi petercaogx,
Thanks for contacting Syncfusion support.
The attached YouTube video is used to create the Vue 2 project with Syncfusion component. Kindly refer to the below documentation to get starts Syncfusion component with Vue 3.
Vue 3 Grid:
The way of defining the features like Paging, Filtering, etc., in the EJ2 Grid is same in both Vue 2 and Vue 3. The only difference between Vue 2 and Vue 3 is component registration and template registration. Other than that all are same in both Vue 2 and Vue 3. Kindly refer to the below documentation for more information.
So, you can refer below documentation to implement Paging and Filtering feature in the Vue 3 Grid.
We have prepared a sample for your reference. You can get it from the below link,
<template>
<div id="app">
<ejs-grid :dataSource='data' :allowPaging="true" :allowSorting=‘true’ :allowFiltering='true' :filterSettings='filterOptions' > // enable the feature as you want
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' :isPrimaryKey='true' width=100></e-column>
---
</e-columns>
</ejs-grid>
</div>
</template>
<script>
// import the modules
import { GridComponent, ColumnsDirective, ColumnDirective, Page, Filter, Sort } from '@syncfusion/ej2-vue-grids';
export default {
name: 'App',
// Register the components
components: {
'ejs-grid' : GridComponent,
'e-columns' : ColumnsDirective,
'e-column' : ColumnDirective,
},
data() {
return {
data: data,
filterOptions: { type: 'Excel' } // define the Grid properties
};
},
// module injection
provide: {
grid: [Page, Filter, Sort], // inject the Grid Feature modules
}
};
</script>
|
Please get back to us if you require further assistance.
Regards,
Rajapandiyan S
