Vue Data Grid Example

Complete implementation of AG Grid in a Vue 3 application with Composition API

This example demonstrates AG Grid integration with Vue 3 using the Composition API, <script setup>, and TypeScript for a modern Vue application.

Overview

AG Grid provides native Vue 3 support through the ag-grid-vue3 package. This example covers:

• Vue 3 Composition API with defineComponent
• Reactive data with ref
• TypeScript type safety
• Module registration
• Template-based grid configuration

Installation

1. Install packages

   npm install ag-grid-vue3
   

   This automatically installs ag-grid-community as a dependency.

2. Register modules

   Import and register the AG Grid modules you need.

3. Import the component

   Add AgGridVue to your component.

Complete Vue 3 Example

App.vue

<template>
    <div class="content" style="width: 100%; height: 500px;">
        <ag-grid-vue
            class="ag-theme-quartz"
            style="width: 100%; height: 100%"
            :columnDefs="colDefs"
            :rowData="rowData"
            :defaultColDef="defaultColDef"
        >
        </ag-grid-vue>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import type { ColDef } from 'ag-grid-community';
import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
import { AgGridVue } from 'ag-grid-vue3';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-quartz.css';

ModuleRegistry.registerModules([AllCommunityModule]);

// Row Data Interface
interface IRow {
    make: string;
    model: string;
    price: number;
    electric: boolean;
}

export default defineComponent({
    name: 'App',
    components: {
        AgGridVue,
    },
    setup() {
        const rowData = ref<IRow[]>([
            { 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 },
            { make: 'Mercedes', model: 'EQA', price: 48890, electric: true },
            { make: 'Fiat', model: '500', price: 15774, electric: false },
            { make: 'Nissan', model: 'Juke', price: 20675, electric: false },
        ]);

        const colDefs = ref<ColDef<IRow>[]>([
            { field: 'make' },
            { field: 'model' },
            { field: 'price' },
            { field: 'electric' },
        ]);

        const defaultColDef = {
            flex: 1,
        };

        return {
            rowData,
            colDefs,
            defaultColDef,
        };
    },
});
</script>

Alternative: Script Setup Syntax

Vue 3.2+ supports the <script setup> syntax for a more concise component definition:

<template>
    <ag-grid-vue
        class="ag-theme-quartz"
        style="width: 100%; height: 500px"
        :columnDefs="colDefs"
        :rowData="rowData"
        :defaultColDef="defaultColDef"
    />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { ColDef } from 'ag-grid-community';
import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
import { AgGridVue } from 'ag-grid-vue3';

ModuleRegistry.registerModules([AllCommunityModule]);

interface IRow {
    make: string;
    model: string;
    price: number;
    electric: boolean;
}

const rowData = ref<IRow[]>([
    { 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 },
    { make: 'Mercedes', model: 'EQA', price: 48890, electric: true },
    { make: 'Fiat', model: '500', price: 15774, electric: false },
    { make: 'Nissan', model: 'Juke', price: 20675, electric: false },
]);

const colDefs = ref<ColDef<IRow>[]>([
    { field: 'make' },
    { field: 'model' },
    { field: 'price' },
    { field: 'electric' },
]);

const defaultColDef = {
    flex: 1,
};
</script>

Key Vue Concepts

Module Registration

Register AG Grid modules before using the grid:

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

ModuleRegistry.registerModules([AllCommunityModule]);

Module registration should happen once at application startup, typically in your main component or entry file.

Reactive Data

Use Vue’s ref for reactive grid data:

import { ref } from 'vue';

const rowData = ref<IRow[]>([...]);
const colDefs = ref<ColDef<IRow>[]>([...]);

Changes to these refs will automatically update the grid.

Property Binding

Bind data using Vue’s template syntax:

<ag-grid-vue
    :rowData="rowData"
    :columnDefs="colDefs"
    :defaultColDef="defaultColDef"
/>

Type Safety

Use TypeScript interfaces for type-safe development:

import type { ColDef } from 'ag-grid-community';

interface IRow {
    make: string;
    model: string;
    price: number;
    electric: boolean;
}

const colDefs = ref<ColDef<IRow>[]>([...]);  // Fully typed

Advanced Vue Integration

Grid API Access

Access the Grid API for programmatic operations:

<template>
    <div>
        <button @click="exportData">Export CSV</button>
        <ag-grid-vue
            @grid-ready="onGridReady"
            ...
        />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { GridApi, GridReadyEvent } from 'ag-grid-community';

const gridApi = ref<GridApi | null>(null);

const onGridReady = (params: GridReadyEvent) => {
    gridApi.value = params.api;
};

const exportData = () => {
    gridApi.value?.exportDataAsCsv();
};
</script>

Fetching Data

Load data from an API:

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const rowData = ref<IRow[]>([]);

onMounted(async () => {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    rowData.value = data;
});
</script>

Custom Cell Renderer

Create Vue components as cell renderers:

<!-- PriceCellRenderer.vue -->
<template>
    <span :style="{ color: textColor }">
        {{ formattedValue }}
    </span>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps<{
    value: number;
}>();

const textColor = computed(() => 
    props.value > 50000 ? 'red' : 'green'
);

const formattedValue = computed(() => 
    '$' + props.value.toLocaleString()
);
</script>

// Use in column definition
import PriceCellRenderer from './PriceCellRenderer.vue';

const colDefs = ref<ColDef[]>([
    { field: 'make' },
    { 
        field: 'price',
        cellRenderer: PriceCellRenderer
    },
]);

Event Handling

Handle grid events with Vue event listeners:

<template>
    <ag-grid-vue
        @cell-clicked="onCellClicked"
        @row-selected="onRowSelected"
        ...
    />
</template>

<script setup lang="ts">
import type { CellClickedEvent, RowSelectedEvent } from 'ag-grid-community';

const onCellClicked = (event: CellClickedEvent) => {
    console.log('Cell clicked:', event.value);
};

const onRowSelected = (event: RowSelectedEvent) => {
    console.log('Row selected:', event.data);
};
</script>

Enhanced Configuration

Complete Column Definitions

const colDefs = ref<ColDef<IRow>[]>([
    { 
        field: 'make',
        headerName: 'Manufacturer',
        sortable: true,
        filter: true,
        resizable: true
    },
    { 
        field: 'model',
        sortable: true,
        filter: true
    },
    { 
        field: 'price',
        sortable: true,
        filter: 'agNumberColumnFilter',
        valueFormatter: params => '$' + params.value.toLocaleString()
    },
    { 
        field: 'electric',
        headerName: 'Electric Vehicle'
    }
]);

Default Column Properties

const defaultColDef = {
    flex: 1,
    minWidth: 100,
    resizable: true,
    sortable: true,
    filter: true,
};

Updating Grid Data

Update the grid by modifying reactive references:

// Add a new row
rowData.value = [...rowData.value, newRow];

// Update all data
rowData.value = newDataArray;

// Modify column definitions
colDefs.value = [...colDefs.value, newColumn];

Vue’s reactivity system automatically updates the grid when you modify ref values.

Module Selection

Register only the modules you need for smaller bundle sizes:

import { 
    ClientSideRowModelModule,
    ModuleRegistry 
} from 'ag-grid-community';
import { 
    ColumnsToolPanelModule 
} from 'ag-grid-enterprise';

ModuleRegistry.registerModules([
    ClientSideRowModelModule,
    ColumnsToolPanelModule,
]);

Best Practices

1. Register modules once - Do module registration at the application level
2. Use Composition API - Leverage Vue 3’s Composition API for better code organization
3. Use ref for reactive data - Grid data should be reactive refs
4. Type your data - Define interfaces for row data
5. Set container height - Grid needs a defined height to display properly
6. Use <script setup> - Modern, concise syntax for Vue 3.2+

Next Steps

• Explore React implementation
• Learn about Angular integration
• Implement integrated charts