Glimmer Table Test

components.test-table-wrapper\.js

import Component from '@glimmer/component';
import { action, set } from '@ember/object';
import { A } from '@ember/array';

export default class extends Component {
  rows = A([
    { name: 'a', age: 5 },
    { name: 'b', age: 10 },
    { name: 'c', age: 15 }
  ])

  @action
	changeValue() {
  	set(this.rows[0], 'age', this.rows[0].age + 1);
  }

  @action
	pushRow() {
  	this.rows.pushObject({ name: 'd', age: 20 });
  }
}

components.test-table\.js

import Component from '@glimmer/component';

export default class extends Component {
  columns = [
    { id: 'name' },
    { id: 'age' }
  ];
}

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Glimmer Table Test';
}

templates.application\.hbs

<TestTableWrapper />

templates.components.test-table-wrapper\.hbs

<TestTable @rows={{this.rows}} />
<button {{on "click" this.changeValue}}>Change Value</button>
<button {{on "click" this.pushRow}}>Push Row</button>

templates.components.test-table\.hbs

{{#each @rows as |row|}}
	<div>
  	{{#each columns as |column|}}
    	<span>{{get row column.id}}</span>
    {{/each}}
  </div>
{{/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",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}