1. Home
  2. Forum
  3. Vue
  4. This is my first attempt at using Vue 3 and Data Grid

This is my first attempt at using Vue 3 and Data Grid

This is my first attempt at using Vue 3 and Data Grid. I would like to leverage CDN to reference JavaScript files in order to implement related functionalities. However, I haven't found any relevant tutorials in public knowledge bases. How should I get started? I'm looking to implement a relatively simple feature and don't want to use scaffolding as it feels too cumbersome.

Image_6784_1732263424827

Excel like filter in Vue Grid component | Syncfusion

I want to add filtering functionality similar to what you'd find in tables, but I'm unsure how to do it.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>排班审核</title>

    <link rel='nofollow' href="./css/material.css" rel="stylesheet" type="text/css" />
    <!-- Vue library file-->
    <script src="./js/vue.global.js"></script>
    <script src="./js/ej2-vue.min.js" type="text/javascript"></script>
    <script src="./js/syncfusion-helper.js" type="text/javascript"></script>

</head>

<body>


    <div id="app">
        <ejs-grid :data-source="data" :allow-sorting="true" :allowExcelExport="true" :allowFiltering="true"
            :allowGrouping="true">
            <e-columns>
                <e-column field="项目" header-text="项目" width="120"></e-column>
                <e-column field="店号" header-text="店号" width="80"></e-column>
                <e-column field="店名" header-text="店名" width="100"></e-column>

            </e-columns>
        </ejs-grid>
    </div>


    <script>
        Vue.createApp({
            el: '#app',
            components: {
                'ejs-grid': ejs.grids.GridComponent,
                'e-columns': ejs.grids.ColumnsDirective,
                'e-column': ejs.grids.ColumnDirective
            },
            provide: {
                grid: [ejs.grids.Page]
            },
            data() {
                return {

                    data: [
                        {
                            "项目": "AAAA",
                            "店号": "123",
                            "店名": "123",

                        },
                        {
                            "项目": "BBBB",
                            "店号": "456",
                            "店名": "456",

                        },
                        {
                            "项目": "CCC",
                            "店号": "789",
                            "店名": "789",

                        }

                    ],
                    pageSettings: { pageSize: 5 },
                    filterOptions: { type: "Excel" },
                }
            }
        }).mount('#app');
    </script>

</body>




</html>



1 Reply
VS Vikram Sundararajan Syncfusion Team November 25, 2024 10:45 AM UTC

Hi yu ma,


Greetings from Syncfusion support,


We understand that you are exploring Vue 3 and the Syncfusion Data Grid for the first time and prefer using direct scripts for simplicity. Below is an explanation of how to implement the Syncfusion Vue Data Grid using direct script references and enable Excel-like filtering.


Syncfusion provides a straightforward way to include Vue components via CDN links, bypassing the need for a build process. This approach is perfect for quick prototypes or simple projects.


Refer to the steps below to set up and use the Syncfusion Vue Grid with direct script inclusion:


  1. Include Required Scripts and Styles: Add the Vue library and Syncfusion component scripts to the <head> of your HTML file. Also, include the required CSS for styling.


[index.html]


<head>

    <title>Syncfusion Vue (ES5) UI Components</title>

    <!-- Essential JS2 for Vue (All components Styles) -->

    <link rel='nofollow' href="https://cdn.syncfusion.com/ej2/27.1.48/material.css" rel="stylesheet" type="text/css" />

    <!-- Vue library file -->

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <!-- Syncfusion Vue components script -->

    <script src="https://cdn.syncfusion.com/ej2/27.1.48/ej2-vue-es5/dist/ej2-vue.min.js" type="text/javascript"></script>

    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type="text/javascript"></script>

</head>


This process is already covered in our documentation:

Getting Started with Syncfusion Vue UI Components using direct scripts


  1. Excel Filter: To enable Excel-style filtering in Syncfusion Grid, configure the filter-Settings property.


[index.html]

<ejs-grid

    :data-source="data"

    :allow-paging="true"

    :page-settings="pageSettings"

    :allow-filtering="true"

    :filter-settings="{ type: 'Excel' }">

</ejs-grid>

     

Sample: https://stackblitz.com/edit/oktns6-yjrccy?file=public%2Findex.html


Please get back us if you need further assistance.


Regards,

Vikram S


Loader.
Up arrow icon