This page shows you how to get started with ag-Grid and Aurelia.
npm install ag-grid-enterprise
Download from Github
In your application, before instantiating the grid, you need to reference the included ag-grid-enterprise dependency:
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.
Aurelia Full Example
This page goes through the ag-grid-aurelia-example on Github.
Rich Grid with Aurelia
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 Aurelia as a wrapper TypeScript html
- An example using markup to create a grid TypeScript html
- A Cell Editor Example - one with a popup editor, and another with a numeric editor. Each demonstrates different editor related features TypeScript html
- A Pinned Row Renderer Example TypeScript html
- A Full Width Renderer Example TypeScript html
- A Group Row Inner Renderer Example TypeScript html
- A Filter Example TypeScript html
Once you have the ag-Grid dependencies installed, you will then be able to access ag-Grid classes and components inside 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. Teh following shows referencing the css from your web page:
You will also need to configure Aurelia (aurelia_project/aurelia.json) to use ag-grid and ag-grid-aurelia as follows:
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
- 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 APIs 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
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.
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
The above section details how to specify the Grid itself. To declare columns you can specify them as follows:
This example declares a simple Column Definition, specifying header name, field and width.
Setting Column Properties
There are some simple rules you should follow when setting column properties via Markup:
Setting a Class or a Complex Value:
You can set a Class or a Complex property in the following way:
Grouped Column Definition
To specify a Grouped Column, you can nest a column defintion:
In this example we have a parent Column of "IT Skills", with two child columns.
Cell Rendering & Cell Editing using Aurelia
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.
Rich Declarative Aurelia Example
Now you can go to interfacing to learn about accessing all the features of the grid.