Vue Components

VueJS components can be defined as either simple inline components, or as full/complex externalised ones (i.e in a separate file).

Simple, Inline Components

components: { 'CubeComponent': { template: '<span>{{ valueCubed() }}</span>', methods: { valueCubed() { return this.params.value * this.params.value * this.params.value; } } }, ParamsComponent: { template: '<span>Field: {{params.colDef.field}}, Value: {{params.value}}</span>', methods: { valueCubed() { return this.params.value * this.params.value * this.params.value; } } } }

Note here that we can define the property name either quoted or not but note that in order to reference these components in your column definitions you'll need to provide them as case-sensitive strings.

Simple, Locally Declared Components

let SquareComponent = { template: '<span>{{ valueSquared() }}</span>', methods: { valueSquared() { return this.params.value * this.params.value; } } };

External .js Components

// SquareComponent.js export default { template: '<span>{{ valueSquared() }}</span>', methods: { valueSquared() { return this.params.value * this.params.value; } } }; // MyGridApp.vue (your Component holding the ag-Grid component) import SquareComponent from './SquareComponent'

More Complex, Externalised Single File Components (.vue)

<template> <span class="currency">{{ params.value | currency('EUR') }}</span> </template> <script> export default { filters: { currency(value, symbol) { let result = value; if (!isNaN(value)) { result = value.toFixed(2); } return symbol ? symbol + result : result; } } }; </script> <style scoped> .currency { color: blue; } </style>

For non-inline components you need to provide them to Vue via the components property:

components: { AgGridVue, SquareComponent }

Note that in this case the component name will match the actual reference, but you can specify a different one if you choose:

components: { AgGridVue, 'MySquareComponent': SquareComponent }

In either case the name you use will be used to reference the component within the grid (see below).

Referencing VueJS Components for use in ag-Grid

Having defined your component, you can now reference them in your column definitions.

To use a component within the grid you will reference components by case-sensitive name, for example:

// defined as a quoted string above: 'CubeComponent' { headerName: "Cube", field: "value", cellRendererFramework: 'CubeComponent', colId: "cube", width: 125 }, // defined as a value above: ParamsComponent { headerName: "Row Params", field: "row", cellRendererFramework: 'ParamsComponent', colId: "params", width: 245 },

Please see the relevant sections on cell renderers, cell editors and filters for configuring and using VueJS Components in ag-Grid.

Child to Parent Communication

There are a variety of ways to manage component communication in Vue (shared service, local variables etc), but you often need a simple way to let a "parent" component know that something has happened on a "child" component. In this case the simplest route is to use the gridOptions.context to hold a reference to the parent, which the child can then access.

// in the parent component - the component that hosts ag-grid-angular and specifies which angular components to use in the grid beforeMount() { this.gridOptions = { context: { componentParent: this } }; this.createRowData(); this.createColumnDefs(); }, // in the child component - the Vue components created dynamically in the grid // the parent component can then be accessed as follows: this.params.context.componentParent

Note that although we've used componentParent as the property name here it can be anything - the main point is that you can use the context mechanism to share information between the components.