Ember AgGrid integration | ag-grid

readme.md

This is example (working example) or Ember - AgGrid integration.

Twiddle: https://ember-twiddle.com/08935545560c535dcf53709ed17b52ff?openFiles=controllers.application%5C.js%2C

Ember here is used to control column internals;

template.hbs

• CellContent - Ember component to work with table cell data
• AgIterator - iterator component, @box={{controllerComponentContext}}

component.ts

• GridWrapper - AgGrid cell renderer class, provide cel-level Ember integration with Ag-grid;
• createAgGridWrapper - constrictor function, first argument - controller component instance, return cellRenderer class;

ag-iterator.hbs

{{#each (get @box 'agGridIterator') key="id" as |node|}}
      {{#-in-element node.node}}
          {{yield node}}
      {{/-in-element}}
{{/each}}

component.ts

interface IDataNode {
  node: HTMLDivElement;
  id: string;
  data: any;
  colId: string;
}

function createAgGridWrapper(component) {
  class Box {
    @tracked
    dataNodes = [];
  }

  const boxInstance = new Box();

  function addDataNode(node) {
    boxInstance.dataNodes = [...boxInstance.dataNodes, node];
  }

  function removeDataNode(node) {
    boxInstance.dataNodes = boxInstance.dataNodes.filter((el) => el !== node);
  }

  class EmberAgGridWrapper {
    constructor() {
      this.eGui = document.createElement("div");
    }
    getGui() {
      return this.eGui;
    }
    refresh() {
      return true;
    }
    init(params) {
      this.params = params;
      this.data = {
        id: Math.random().toString(36),
        node: this.eGui,
        data: params.data,
        colId: params.column.colId,
      };
      addDataNode(this.data);
    }
    destroy() {
      removeDataNode(this.data);
    }
  }

  Object.defineProperty(component, "agGridIterator", {
    get() {
      return boxInstance.dataNodes;
    },
  });

  return {
    GridWrapper: EmberAgGridWrapper,
  };
}

class AgGridControllerComponent extends Component {
  GridWrapper!: any;

  constructor() {
    super(...arguments);
    const { GridWrapper } = createAgGridWrapper(this);
    this.GridWrapper = GridWrapper;
  }

  @tracked dataNodes: IDataNode[] = [];

  @cached
  // ag-grid row data
  get rowData() {
    return [
      { make: "Toyota", model: "Celica", price: 35000 },
      { make: "Ford", model: "Mondeo", price: 32000 },
      { make: "Porsche", model: "Boxter", price: 72000 },
    ];
  }

  @cached
  // ag-grid column definitions
  get columnDefs() {
    return [
      {
        headerName: "Model",
        field: "model",
        cellRenderer: this.GridWrapper,
      },
      {
        headerName: "Make",
        field: "make",
        cellRenderer: this.GridWrapper,
      },
      {
        headerName: "Price",
        field: "price",
        cellRenderer: this.GridWrapper,
      },
    ];
  }
}

template.hbs

<AgIterator @box={{this}} as |node|>
	<CellContent @node={{node}} />
</AgIterator>