New Twiddle

controllers.application\.js

import Controller from "@ember/controller";
import agGrid from "agGrid";
import { schedule } from "@ember/runloop";
import { tracked } from "@glimmer/tracking";
import { action } from "@ember/object";

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
  };
}

export default class ApplicationController extends Controller {
  constructor() {
    super(...arguments);
    const { GridWrapper } = createAgGridWrapper(this);
    this.GridWrapper = GridWrapper;
    schedule("afterRender", () => {
      new agGrid.Grid(document.getElementById("grid"), this.gridOptions);
    });
  }
  get columnDefs() {
    return [
      {
        headerName: "Model",
        field: "model",
        cellRenderer: this.GridWrapper,
      },
      {
        headerName: "Make",
        field: "make",
        cellRenderer: this.GridWrapper,
      },
      {
        headerName: "Price",
        field: "price",
        cellRenderer: this.GridWrapper,
      },
    ];
  }
  get rowData() {
    let ctx = this;
    return [
      {
        make: "Toyota",
        model: "Celica",
        get price() {
          return ctx.multiplicator * 35000;
        },
      },
      {
        make: "Ford",
        model: "Mondeo",
        get price() {
          return ctx.multiplicator * 32000;
        },
      },
      {
        make: "Porsche",
        model: "Boxter",
        get price() {
          return ctx.multiplicator * 72000;
        },
      },
    ];
  }
  get gridOptions() {
    return {
      columnDefs: this.columnDefs,
      rowData: this.rowData,
    };
  }

  @tracked multiplicator = 1;

  @action bumpPrice() {
    this.multiplicator++;
  }

  @tracked dataNodes = [];
}

styles.app\.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

templates.application\.hbs

<link rel="stylesheet" src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/Docs-26.0.0-20210818_1/styles/ag-grid.min.css" />

<button type="button" {{on "click" this.bumpPrice}}>Bump Price</button><br><br>

<div id="grid" class="ag-theme-alpine" style="width: 100%; height: 200px;"></div>

<AgIterator @box={{this}} as |node|>
	{{get node.data node.colId}}
</AgIterator>

<br>
<br>
<br>
<a href="https://gist.github.com/lifeart/7bcc690beb2af300271293a547b2eae5">gist: lifeart/7bcc690beb2af300271293a547b2eae5</a><br>
<a href="https://gist.github.com/lifeart/08935545560c535dcf53709ed17b52ff">fiddle: lifeart/08935545560c535dcf53709ed17b52ff</a>

templates.components.ag-iterator\.hbs

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

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "agGrid": "https://cdnjs.cloudflare.com/ajax/libs/ag-grid/Docs-26.0.0-20210818_1/ag-grid-community.amd.min.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}