AG Grid Vue 2 Component

raw JSON →
31.3.4 verified Sun Apr 19 auth: no javascript maintenance

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

error Error: Failed to mount component: template or render function not defined. ↓
cause The `AgGridVue` component is not properly registered with Vue, or its template/render function is missing.
fix
Ensure AgGridVue is correctly imported and registered in your Vue component's components option, and that ag-grid-vue is installed. For Vue 2, ensure you are not using setup() syntax intended for Vue 3 Composition API.
error Cannot read properties of undefined (reading 'api') / TypeError: this.gridApi is undefined ↓
cause Attempting to access `gridApi` or `columnApi` before the `grid-ready` event has fired and set the `api` properties.
fix
Access gridApi and columnApi only after the grid-ready event, typically within the onGridReady handler, or ensure gridApi is reactively tracked and checked for existence before use.
error Module not found: Error: Can't resolve 'ag-grid-community/styles/ag-grid.css' ↓
cause Incorrect import path for AG Grid CSS files, or `ag-grid-community` package not installed.
fix
Verify ag-grid-community is installed via npm install ag-grid-community. Ensure CSS import paths are correct: import 'ag-grid-community/styles/ag-grid.css'; (without /dist).
error AG Grid: No modules are registered. Please see: https://www.ag-grid.com/javascript-data-grid/modules/ ↓
cause When using AG Grid v27+ with a modular setup, required modules (e.g., `ClientSideRowModelModule`) were not explicitly registered.
fix
Import and register necessary modules from ag-grid-community. For a quick start, import { ModuleRegistry, AllCommunityModule } from 'ag-grid-community'; ModuleRegistry.registerModules([AllCommunityModule]); can be used, though tree-shaking benefits are lost. It's recommended to register only the modules you need.

Warnings

breaking The `ag-grid-vue` package (v31.x) is explicitly for AG Grid core v31 and Vue 2. Upgrading to AG Grid core v32 or higher, or migrating to Vue 3, requires switching to newer wrapper packages like `@ag-grid-community/vue` (often for current AG Grid core versions, supports Vue 2 with Composition API plugin or Vue 3) or `@ag-grid-community/vue3` (explicitly Vue 3). This transition involves breaking changes in package imports, component registration, and potentially module usage. ↓
fix For AG Grid v32+, use `@ag-grid-community/vue` or `@ag-grid-community/vue3` for Vue 3. Consult the AG Grid migration guides (e.g., for v32, v33, v35) and utilize their provided codemods to automate many of the changes.
gotcha AG Grid has distinct Community and Enterprise versions. Many advanced features (e.g., row grouping, Excel export, server-side row model, integrated charts) are only available in the Enterprise version, which requires a commercial license for production use. Running Enterprise features without a license will result in watermarks. ↓
fix Ensure you are using only Community features if you do not have an Enterprise license, or obtain the appropriate license for Enterprise features. The Enterprise package (`ag-grid-enterprise`) must also be installed and modules registered.
gotcha The import paths for AG Grid styles changed significantly around v27/28. Old paths included `/dist/styles/` (e.g., `ag-grid-community/dist/styles/ag-grid.css`), while newer versions require importing directly from `ag-grid-community/styles/` (e.g., `ag-grid-community/styles/ag-grid.css`). Incorrect paths will lead to unstyled grids. ↓
fix Update CSS import paths in your project to remove the `/dist` segment: `import 'ag-grid-community/styles/ag-grid.css';` and `import 'ag-grid-community/styles/ag-theme-YOUR_THEME.css';`. For AG Grid v33+, themes can be imported as JavaScript objects.
deprecated As of AG Grid v32, Vue 2 is no longer officially supported by the latest AG Grid wrappers (`@ag-grid-community/vue` or `@ag-grid-community/vue3`). While `ag-grid-vue` (v31.3.4) targets Vue 2, continued updates and new features will focus on Vue 3. ↓
fix Consider migrating your application to Vue 3 to leverage the latest AG Grid features and support. If staying on Vue 2, be aware that you will be limited to `ag-grid-vue` v31.x and its corresponding core AG Grid v31 features.
breaking AG Grid v33 introduced a major change to module and package setup to reduce bundle size, unifying previous module/package methods. This impacts how features are imported and registered. Additionally, the theming API was overhauled in v33, moving from CSS class-based themes to JavaScript object-based themes. ↓
fix Refer to the AG Grid v33 migration guide for detailed steps, including using codemods to automate changes. This involves updating module imports and potentially changing how themes are applied to the grid.

Install

npm install ag-grid-vue
yarn add ag-grid-vue
pnpm add ag-grid-vue

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>
last verified Sun Apr 19
next check Sat Jul 18