Expand All

  Getting Started

  Interfacing

  Features

  Row Models

  Themes

  Components

  Examples

Misc

Github stars make projects look great. Please help, donate a star, it's free.
Get informed on releases and other ag-Grid news only - never spam.
Follow on Twitter

Getting Started

Download ag-Grid

Bower
bower install ag-grid
bower install ag-grid-aurelia
NPM
npm install ag-grid
npm install ag-grid-aurelia
Github
Download ag-grid from Github
Download ag-grid-aurelia from Github

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.

Aurelia Full Example

This page goes through the ag-grid-aurelia-example on Github.

The example project includes a number of separate grids on a page, with each section demonstrating a different feature set:

Once you have the ag-Grid dependencies installed, you will then be able to access ag-Grid classes and components inside your application:

import {GridOptions, GridApi, ColumnApi} from "ag-grid";

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:

<link href="node_modules/ag-grid/styles/ag-grid.css" rel="stylesheet" />
<link href="node_modules/ag-grid/styles/theme-fresh.css" rel="stylesheet" />

You will also need to configure Aurelia (aurelia_project/aurelia.json) to use ag-grid and ag-grid-aurelia as follows:

      {
        "name": "vendor-bundle.js",
        "prepend": [
          "node_modules/bluebird/js/browser/bluebird.core.js",
          "scripts/require.js"
        ],
        "dependencies": [
          "aurelia-binding",
          "aurelia-bootstrapper",
          ...other dependencies...
          {
            "name": "ag-grid",
            "path": "../node_modules/ag-grid",
            "main": "main"
          },
          {
            "name": "ag-grid-aurelia",
            "path": "../../ag-grid-aurelia",
            "main": "main"
          }
        ]

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 it's 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 it's 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:

// notice the grid has an id called agGrid, which can be used to call the API
<g-grid-aurelia #agGrid class="ag-fresh"
    // items bound to properties on the controller
    grid-options.bind="gridOptions"
    column-defs.bind="columnDefs"
    show-tool-panel.bind="showToolPanel"
    row-data.bind="rowData"

    // boolean values 'turned on'
    enable-col-resize
    enable-sorting
    enable-filter
    group-headers
    suppress-row-click-selection
    tool-panel-suppress-groups
    tool-panel-suppress-values
    debug

    // simple values
    row-height.bind="22"
    row-selection="multiple"

    // event callbacks
    model-updated.call="onModelUpdated()"
    cell-clicked.call="onCellClicked($event)"
    cell-double-clicked.call="onCellDoubleClicked($event)"
    cell-context-menu.call="onCellContextMenu($event)"
    cell-value-changed.call="onCellValueChanged($event)"
    cell-focused.call="onCellFocused($event)"
    row-selected.call="onRowSelected($event)"
    selection-changed.call="onSelectionChanged()"
    before-filter-changed.call="onBeforeFilterChanged()"
    after-filter-changed.call="onAfterFilterChanged()"
    filter-modified.call="onFilterModified()"
    before-sort-changed.call="onBeforeSortChanged()"
    after-sort-changed.call="onAfterSortChanged()"
    virtual-row-removed.call="onVirtualRowRemoved($event)"
    row-clicked.call="onRowClicked($event)"
    ready.call="onReady($event)"

    column-everything-changed.call="onColumnEvent($event)"
    column-row-group-changed.call="onColumnEvent($event)"
    column-value-changed.call="onColumnEvent($event)"
    column-moved.call="onColumnEvent($event)"
    column-visible.call="onColumnEvent($event)"
    column-group-opened.call="onColumnEvent($event)"
    column-resized.call="onColumnEvent($event)"
    column-pinned-count-changed.call="onColumnEvent($event)">
</ag-grid-aurelia>

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.

Example: Rich Grid with Pure JavaScript

The example below shows a rich configuration of ag-Grid