simple ag-grid wrapper

ag-grid.js

import { bindable, inlineView } from 'aurelia-framework';
import * as ag from 'ag-grid';

@inlineView(`
    <template class="ag-blue" style="align-self: stretch; flex-grow: 1; -ms-flex: 0 1 auto; flex: 1 1 100%;">
        <require from="ag-grid/dist/ag-grid.css"></require>
        <require from="ag-grid/dist/theme-blue.css"></require>
    </template>
`)
export class AgGrid {
    @bindable columns;
    @bindable rows;

    attached() {
        let cols = this.columns.map(function(col) {
            return {
                headerName: col.title,
                field: col.field,
                cellRenderer: col.render
            };
        });

        let gridOptions = {
            columnDefs: cols,
            rowData: this.rows
        };

            this.gridOptions = gridOptions;
            ag.angularGrid('ag-grid', gridOptions);
            this.gridOptions.api.sizeColumnsToFit()
    }

    rowsChanged(newValue, oldValue) {
        if (newValue && newValue.length) {
            this.gridOptions.api.setRowData(newValue);
            this.gridOptions.api.refreshView();
        }
    }
}

Is this approach of grid working with you? do you have any working sample that you can share?