emberTableDemo

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
}

controllers.table\.js

import Controller from '@ember/controller';
import { computed } from '@ember/object'

function createSymbol() {
  let chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
  let length = 2 + Math.floor(4 * Math.random()); // [2,5]
  let symbol = '';
  while (symbol.length < length) {
    symbol += chars[Math.floor(chars.length * Math.random())];
  }
  return symbol;
}

function createPrice() {
  return 0.5 + 500 * Math.random(); // [0.5,500.5);
}

function formatPrice(price) {
  return price.toFixed(2);
}

function createRow() {
  return {
    symbol: createSymbol(),
    price: formatPrice(createPrice())
  };
}

function createRows(num) {
  return Array(num)
    .fill()
    .map(createRow);
}

export default class TableController extends Controller {
    @computed()
    get columns(){
    return [
      { name: 'Stocks', valuePath: 'symbol', textAlign: 'center' },
      { name: 'Price (USD)', valuePath: 'price', textAlign: 'center' }
    ];
    }

    @computed()
    get rows(){
      return createRows(this.numRows);
    }

    numRows= 100;
		//This is the start of doubt
		//Octane version by me
    @action addRows() {
    		this.rows.pushObjects(createRows(parseInt(this.numRows)));
     }
	
}

routes.table

import Route from '@ember/routing/route';

export default Route.extend({
});

templates.application\.hbs

<h1>Welcome to {{this.appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>

templates.table\.hbs

<NavBar />
<div>
  <h2>
    Inside table
  </h2>
</div>

{{!-- Table Container --}}
<div class="container mt-20 mx-auto bg-teal-200 p-4">
  <div class="text-center">
    <h1 class="inline-block px-4 py-2 bg-teal-200 text-2xl mb-8">
      Virtual Rendering Table
    </h1>
  </div>
  <div class="w-9/12 mx-auto">
    <div class="stock-table bg-gray-100 mx-auto p-2">
      <EmberTable as |t|>
        <t.head @columns={{columns}} @widthConstraint="eq-container"/>
        <t.body @rows={{rows}} />
      </EmberTable>
    </div>
    <div class="bg-gray-100 mx-auto mt-4 p-4">
      <h2 class="text-l border-b-2 border-gray-500 mb-8">
        Actions
      </h2>
      {{!-- This is the starting part of doubt --}}
      <div class="mb-4">
        Add
        <Input
          class="w-12 mx-1 text-center px-1"
          type="number"
          @value={{numRows}}
          {{on-key "Enter" this.addRows}}/>
        rows.
      </div>
    </div>
  </div>
</div>

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",
  },
  "devDependencies": {
    "ember-table": "^3.0.1",
    "sass": "^1.22.7",
    "tailwindcss": "^1.0.5"
    
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}