AG Grid Vue 2 Component

31.3.4 · maintenance · verified Sun Apr 19

AG Grid Vue Component (`ag-grid-vue`) provides a robust and high-performance data grid solution specifically for Vue 2 applications. This entry focuses on version 31.3.4, which integrates seamlessly with Vue 2.x environments. It offers extensive features for displaying, filtering, sorting, and aggregating large datasets. AG Grid typically follows a major release cadence of a few times a year for its core library, and this `ag-grid-vue` wrapper's version aligns directly with the core AG Grid version it supports, currently AG Grid v31. While newer versions of AG Grid (e.g., v35.x) exist with dedicated Vue 3 wrappers (`@ag-grid-community/vue3`) and modular Vue 2/3 compatible wrappers (`@ag-grid-community/vue`), this specific `ag-grid-vue` package (v31.3.4) remains the designated integration for pure Vue 2 projects using AG Grid v31 functionality. Many advanced capabilities, such as Excel export, row grouping, and integrated charting, are available in its enterprise version.

Common errors

Warnings

Install

Imports

Quickstart

This example demonstrates a basic AG Grid setup within a Vue 2 component, using the Options API, defining columns, providing row data, and accessing the grid API upon readiness.

<template>
  <div id="app" style="width: 500px; height: 200px;">
    <ag-grid-vue
      class="ag-theme-quartz"
      :columnDefs="columnDefs"
      :rowData="rowData"
      @grid-ready="onGridReady">
    </ag-grid-vue>
  </div>
</template>

<script>
import { AgGridVue } from 'ag-grid-vue';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-quartz.css';

export default {
  name: 'App',
  components: {
    AgGridVue,
  },
  data() {
    return {
      gridApi: null,
      columnApi: null,
      columnDefs: [
        { headerName: 'Make', field: 'make' },
        { headerName: 'Model', field: 'model' },
        { headerName: 'Price', field: 'price' },
      ],
      rowData: [
        { make: 'Toyota', model: 'Celica', price: 35000 },
        { make: 'Ford', model: 'Mondeo', price: 32000 },
        { make: 'Porsche', model: 'Boxster', price: 72000 },
      ],
    };
  },
  methods: {
    onGridReady(params) {
      this.gridApi = params.api;
      this.columnApi = params.columnApi;
      console.log('Grid is ready!');
      // Example: Automatically size columns to fit
      // this.gridApi.sizeColumnsToFit();
    },
  },
  // Vue 2 lifecycle hook for initial data or setup
  created() {
    // console.log('App created');
  },
  mounted() {
    // console.log('App mounted');
  },
};
</script>

<style>
/* Basic styles to make the app visible */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

view raw JSON →