This page details how to set up ag-Grid inside a VueJS application.
You'll need to import the ag-Grid CSS in your application, as well as a theme you wish to use:
In this case we're using the Balham Theme - please refer to the Themes documentation for more information.
Download from Github
In your application, before instantiating the grid, you need to reference the included ag-grid-enterprise dependency:
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.
VueJS Full Example
This page goes through the ag-grid-vue-example on Github.
The example project includes a number of separate grids on a page, with each section demonstrating a different feature set:
- A feature rich grid example, demonstrating many of ag-Grid's features using VueJS as a wrapper
- Vue A Simple Example, using CellRenderers created from VueJS Components
- A Richer Example, using CellRenderers created from VueJS Components, with child components, and two-way binding (parent to child components events)
- A Cell Editor example - one with a popup editor, and another with a numeric editor. Each demonstrates different editor related features
- A Pinned Row Renderer Example
- A Full Width Renderer Example
- A Group Row Inner Renderer Example
- A Filter Example, with the filter written as a VueJS Component
- A Master/Detail Example, with both the Master and the Detail elements being VueJS Components
Once you have the ag-Grid dependencies installed, you will then be able to access ag-Grid inside your application:
Which you can then use as a component within your application:
You will need to include the CSS for ag-Grid, either directly inside your html page, or as part of creating your bundle if bundling. The following shows referencing the css from your web page:
If you're using the
style-loader you can also import the CSS dependencies into your final bundle:
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
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
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.
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):
Simple, Inline Components
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).
Simple, Locally Declared Components
External .js Components
More Complex, External Single File Components (.vue)
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:
In both cases we need to define the component to be used in the cell as a case-senstive string.
For components defined outside of the application component you can pass them by reference. For example:
The rich-grid example has ag-Grid configured through the template in the following ways:
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
often need a simple way to let a "parent" component know that something has happened on a "child" component. In this
the simplest route is to use the
gridOptions.context to hold a reference to the parent, which the child
can then access.
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
Grid Component being created.
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
Now you can go to interfacing to learn about accessing all the features of the grid.