Vue Data GridQuick Start

AG Grid is a high-performance Vue Data Grid library for building Vue Tables with unbeatable performance and hundreds of features. Available in Community and Enterprise editions. Visit Community vs. Enterprise to learn more.

Create a Vue Data Grid Copy

Add AG Grid to your application in 60 seconds:

NPM Install Copy

Install the ag-grid-vue3 package, which also installs ag-grid-community:

npm install ag-grid-vue3

Register Modules Copy

Register the AllCommunityModule to access all Community features:

import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community'; 

// Register all Community features
ModuleRegistry.registerModules([AllCommunityModule]);

Import the Vue Data Grid Copy

<script>
import { AgGridVue } from "ag-grid-vue3"; // Vue Data Grid Component

export default {
    name: "App",
    components: {
        AgGridVue, // Add Vue Data Grid component
    },
    setup() {},
};
</script>

Define Rows and Columns Copy

setup() {
    // Row Data: The data to be displayed.
    const rowData = ref([
        { make: "Tesla", model: "Model Y", price: 64950, electric: true },
        { make: "Ford", model: "F-Series", price: 33850, electric: false },
        { make: "Toyota", model: "Corolla", price: 29600, electric: false },
    ]);

    // Column Definitions: Defines the columns to be displayed.
    const colDefs = ref([
        { field: "make" },
        { field: "model" },
        { field: "price" },
        { field: "electric" }
    ]);

    return {
        rowData,
        colDefs,
    };
},

Vue Data Grid Component Copy

Set Rows and Columns as ag-grid-vue component attributes. Styling is applied through the class and style attributes.

<template>
    <!-- The AG Grid component -->
    <ag-grid-vue
        :rowData="rowData"
        :columnDefs="colDefs"
        style="height: 500px"
    >
    </ag-grid-vue>
</template>

Example Vue Data Grid Copy

Below is a live example of the application running. Click </> Code to see the code.

Next Steps Copy

Now that you have a basic Vue Data Grid running, choose one of the following options to continue your learning journey: