Skip to content

supersabillon/ember-ag-grid

Repository files navigation

Ember-ag-grid

Build Status Ember Observer Score Code Climate npm version

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" Themes provided by ag-Grid: 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.4.0

version 0.3.1

  • [BUGFIX] Fix error of gridOptions api not available on willDestroyElement hook
  • [BUGFIX] Ensure super call is bounded

version 0.3.0

version 0.2.0

Running

Running Tests

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