Ember-ag-grid

Just a simple component to use ag-grid.

Installation

ember install ember-ag-grid

Usage

app/templates/components/grid-example.hbs

{{ ag-grid gridOptions=gridOptions }}

app/components/grid-example.js

  gridOptions: {

    columnDefs: [
      { headerName: "Product", field: "name" },
      { headerName: 'Units', field: 'units' },
      { headerName: 'Sales', field: 'sales' },
      { headerName: 'Profit', field: 'profit' }
    ],

    rowData: [
      {
        name: 'Chips',
        units: '223',
        sales: '$54,335',
        profit: '$545,454'
      },
      .
      .
      .
      {
        name: 'Towels',
        units: '965',
        sales: '$1,900',
        profit: '$800'
      }]
  }

This addon supports the same options as the ag-grid library. These options are documented here: https://www.ag-grid.com/documentation-main/documentation.php. Open up an issue if you find an option that does not work with this addon.

Options

name	default	description
width	"100%"	Sets width of grid
height	"400px"	Sets height of grid
theme	"ag-fresh"	ag-Grid provides three themes: ag-fresh, ag-blue, ag-dark, ag-bootstrap and ag-material

Example:

{{ ag-grid gridOptions=gridOptions height="500px" width="800px" theme="ag-blue" }}

You could create a new theme and pass in the class name your theme uses:

.newTheme .ag-root {
  font-family: "Open Sans", sans-serif, Helvetica, Arial;
}
.newTheme .ag-cell {
  padding: 8px;
}

{{ ag-grid gridOptions=gridOptions theme="newTheme" }}

ag-Grid-Enterprise

To use ag-Grid Enterprise features set the following options:

config/environment.js

  var ENV = {
    agGrid: {
      useEnterprise: true,
      licenseKey: 'YOUR_LICENSE_KEY'
    }
  }

Changelog

version 0.2.0

• Upgraded to ag-Grid 5.3.0 and ag-Grid-Enterprise 5.3.0 (ag-Grid's changelog)
• Breaking change: Default height is now 400px. (Read this issue)

Running

• ember server
• Visit your app at http://localhost:4200.

Running Tests

• npm test (Runs ember try:testall to test your addon against multiple Ember versions)
• ember test
• ember test --server