Download ag-Grid

If you are building an VueJS application then you have the choice between A) using the plain JavaScript version
of ag-Grid or B) using the ag-Grid VueJS Component from the
ag-grid-vue project. If you use the ag-Grid VueJS Component, then the grid's properties, events and API
will all tie in with the VueJS ecosystem. This will make your VueJS coding easier.

Referencing Styles

You'll need to import the ag-Grid CSS in your application, as well as a theme you wish to use:

Download ag-Grid-Enterprise

Referencing ag-Grid-Enterprise

In your application, before instantiating the grid, you need to reference the included ag-grid-enterprise
dependency:

import Vue from "vue";
import "../node_modules/ag-grid/dist/styles/ag-grid.css";
import "../node_modules/ag-grid/dist/styles/theme-fresh.css";
// need if you use ag-grid enterprise features
import "ag-grid-enterprise/main";
...other dependencies'Please use the github project ag-grid-vue
for feedback or issue reporting around ag-Grid's support for VueJS.

ag-Grid VueJS Features

Every feature of ag-Grid is available when using the ag-Grid VueJS Component. The VueJS Component wraps
the functionality of ag-Grid, it doesn't duplicate, so there will be no difference between core ag-Grid and
VueJS ag-Grid when it comes to features.

Importing of the CSS should be done before you use the ag-Grid Vue Component.

Configuring ag-Grid in VueJS

You can configure the grid in the following ways through VueJS:

Events: All data out of the grid comes through events. These use
VueJS event bindings eg :modelUpdated="onModelUpdated".
As you interact with the grid, the different events are fixed and
output text to the console (open the dev tools to see the console).

Properties: All the data is provided to the grid as VueJS
bindings. These are bound onto the ag-Grid properties bypassing the
elements attributes. The values for the bindings come from the parent
controller.

Attributes: When the property is just a simple string value, then
no binding is necessary, just the value is placed as an attribute
eg rowHeight="22".If the attribute is a boolean and a value is not provided, it is taken as false.

Changing Properties: When a property changes value, VueJS
automatically passes the new value onto the grid. This is used in
the following locations in the "feature rich grid example' above:
a) The 'quickFilter' on the top right updates the quick filter of
the grid.
b) The 'Show Tool Panel' checkbox has its value bound to the 'showToolPanel'
property of the grid.
c) The 'Refresh Data' generates new data for the grid and updates the
rowData property.

Notice that the grid has its properties marked as immutable. Hence for
object properties, the object reference must change for the grid to take impact.
For example, rowData must be a new list of data for the grid to be
informed to redraw.

Defining VueJS Components for use in ag-Grid

VueJS components can be provided to ag-Grid in the following ways (the section after documents how to then
reference
these components in your column definitions):

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 (see referencing
components below).

You can then use these components as editors, renderers or filters. Which method you choose depends on preference
as well as the complexity of your component - for simple components inline is easiest, for more complex ones
external .vue components will be more manageable.

Additionally, if you define your components as Single File Components (.vue) then you'll be able to leverage
scoped CSS,
which won't otherwise be possible.

Providing VueJS Components to ag-Grid

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

For inline components (ie defined in the components property) you can
reference components by either case-sensitive property name, for example:

The rich-grid example has ag-Grid configured through the template in the following ways:

<ag-grid-vue style="width: 100%; height: 350px;" class="ag-fresh"
// these are attributes, not bound, give explicit values here
rowHeight="22"
rowSelection="multiple"
// these are boolean values
// (leaving them out will default them to false)
:enableColResize="true"
:enableSorting="true"
// these are bound properties
:gridOptions="gridOptions"
:columnDefs="columnDefs"
// this is a callback
:isScrollLag="myIsScrollLagFunction"
// these are registering event callbacks
:modelUpdated="onModelUpdated"
:cellClicked="onCellClicked"
</ag-grid-vue>

The above is all you need to get started using ag-Grid in a VueJS application. Now would
be a good time to try it in a simple app and get some data displaying and practice with
some of the grid settings before moving onto the advanced features of cellRendering
and custom filtering.

ag-Grid VueJS Example

Example: Rich Grid

The example below shows a rich configuration of ag-Grid, with a VueJS Header Group Component and custom
Date Component Filter (under the DOB column).

Child to Parent Communication

There are a variety of ways to manage component communication in Angular (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.

The "A Simple Example, using CellRenderers created from VueJS Components"
above illustrates this in the Child/Parent column:

Router Links in Grid Components

You can provide Vue Router links within the Grid, but you need to ensure that you provide a Router to the
Grid Component being created.

// create a new VueRouter, or make the "root" Router available
import VueRouter from "vue-router";
const router = new VueRouter();
// pass a valid Router object to the Vue grid components to be used within the grid
components: {
'ag-grid-vue': AgGridVue,
'link-component': {
router,
template: '<router-link to="/master-detail">Jump to Master/Detail</router-link>'
}
},
// You can now use Vue Router links within you Vue Components within the Grid
{
headerName: "Link Example",
cellRendererFramework: 'link-component',
width: 200
}

Building & Bundling

There are many ways to build and/or bundle an VueJS Application. We provide fully working examples using a simplified
Webpack build as part of the ag-grid-vue-example on
GitHub.

Cell Rendering & Cell Editing using VueJS

Next Steps...

Now you can go to interfacing
to learn about accessing all the features of the grid.

Welcome to ag-Grid

Niall Crosby spent years building Enterprise Web Applications and found the JavaScript
data grid choice frustrating. That frustration led to Niall quitting his job and
setting up the ag-Grid project.
Read more about ag-Grid →