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

Please use the github project ag-grid-aurelia
for feedback or issue reporting around ag-Grid's support for Aurelia.

ag-Grid Aurelia Features

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

All the above items are specific to Aurelia and is intended to point
you in the right direction. If you need more information on this, please see the Aurelia documentation.

Configuring ag-Grid in Aurelia

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

Events: All data out of the grid comes through events. These use
Aurelia event bindings eg model-updated.call="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 Aurelia
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 row-height.bind="22".

Grid API via IDs: The grid in the example is created with an id
by marking it with #agGrid. This in turn turns into a variable
which can be used to access the grid's controller. The buttons
Grid API and Column API buttons use this variable to access the grids
API (the API's are attributes on the controller).

Changing Properties: When a property changes value, Aurelia
automatically passes the new value onto the grid. This is used in
the following locations:
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.

The 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 Aurelia 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.

Creating Grids with Markup

You can create Grids either programatically (with pure JavaScript/Typescript/Components), or declare them via declaratively with markup.

The above section details how to specify the Grid itself. To declare columns you can specify them as follows:

Cell Rendering & Cell Editing using Aurelia

Although it is possible to use Aurelia for your customisations of ag-Grid, it is not necessary. The grid
will happily work with both Aurelia and non-Aurelia portions (eg cellRenderers in Aurelia or normal JavaScript).
If you do use Aurelia, be aware that you are adding an extra layer of indirection into ag-Grid. ag-Grid's
internal framework is already highly tuned to work incredibly fast and does not require Aurelia or anything
else to make it faster. If you are looking for a lightning fast grid, even if you are using Aurelia and
the ag-grid-aurelia component, consider using plain ag-Grid Components (as explained on the pages for
rendering etc) inside ag-Grid instead of creating Aurelia counterparts.

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 →