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.