EmberTable Debugging

At one stage, ember table showed nothing. Page frozen.

Columns was defined.

this.columns = [
  {
    name: `ID`,    valuePath: `id`  },  {
    name: `Name`,    valuePath: `full_name`  },  {
    name: `VIP`,    valuePath: `vip`  },  {
    name: `Problem`,    valuePath: `problem`  },  {
    name: `Received Date`,    valuePath: `dt_date_received`  },  {
    name: `Quoted Date`,    valuePath: `dt_date_quoted`  },  {
    name: `Prom. Completion Date`,    valuePath: `dt_date_completion`  },  {
    name: `Status`,    valuePath: `status`  },  // {  //   name: `Status Icons`,  //   valuePath: `status_icons`,  //   cellComponent: `custom-cell`,  //   color: `orange`  // },  {
    name: `Priority`,    valuePath: `priority`  }
];

ROws was defined

  get rowsForSortingNFiltering() {


    console.log('model.length', this.model[1].length);
    var rowsFiltered = this.model[1];    return rowsFiltered;
  }

Model was returned as below.

model() {
  let columns = this.dataGenerator.columns;  let filter = this.dataGenerator.workorderFilter;
  /* Whenever looping forever, 1. comment below >> 2. open inspect >> 3.uncomment */  return this.store.findAll('workorder').then(function(workOrders){
    debugger;
    // show some values    if (workOrders.length > 0) {
      console.log("1st workorder:" , workOrders.objectAt(0).id, workOrders.objectAt(0).first_name);    }
    let model = [columns, workOrders, filter];    return model;  });

}

Whenever page was frozen, I had to comment above model. Refresh page. Open Inspector. Uncomment to check the data again.


I tried to removing the hbs table part. >> working, page not frozen

{{!-- workorder list --}}  <div class='demo-container'>      <EmberTable as |t|>          <t.head @columns={{columnsForSorting}}
                  @sorts={{sorts}}
                  @onUpdateSorts={{action (mut sorts)}}
                  @widthConstraint='gte-container'                  @fillMode='first-column'                  as |h|>
              <h.row as |r|>                  <r.cell as |columnValue columnMeta|>                    {{#if showSortIndicator}}
                        <EmberTh::SortIndicator @columnMeta={{columnMeta}} />                    {{/if}}
                    {{columnValue.name}}
                    {{#if showResizeHandle}}
                        <EmberTh::ResizeHandle @columnMeta={{columnMeta}} />                    {{/if}}
                  </r.cell>              </h.row>          </t.head>
          <t.body @rows={{rowsForSortingNFiltering}} as |b|>              <b.row as |r|>                  <r.cell as |cell column|>                    {{#if column.cellComponent}}
                      {{#component column.cellComponent color=column.color statusIcons=cell}}
                      {{!-- {{cell}} --}}                      {{/component}}
                    {{else if (eq column.name "ID")}}
                        <a href="#" class="nav-button">{{cell}}</a>                    {{else}}
                      {{cell}}
                    {{/if}}
                  </r.cell>              </b.row>          </t.body>
      </EmberTable>  </div>

And tried to put each data without EmberTable >> working.

{{#each rowsForSortingNFiltering as |row| }}
  <div>{{row.id}} {{row.full_name}}  {{row.vip}}  {{row.problem}} {{row.dt_date_received}} {{row.dt_date_quoted}} {{row.dt_date_completion}} {{row.status}} {{row.priority}}</div>{{/each}}

Tried put simplest EmberTable >> not working. frozen again.

<EmberTable as |t|>    <t.head @columns={{columnsForSorting}} />    <t.body @rows={{rowsForSortingNFiltering}} /></EmberTable>

Now tried to return rows matching column data only. No extra attribute is defined. New Rows was defined.

  get rowsForSortingNFiltering() {


    console.log('model.length', this.model[1].length);
    var rows = this.model[1];

    var rowsFiltered = [];    rows.forEach(function (elemRaw) {
      var elem = { id: elemRaw.id, full_name: elemRaw.full_name};      rowsFiltered.push(elem);    })


    return rowsFiltered;
  } 

And it finally worked! EmberTable requires exactly same valuePath of columns and rows. Columns can be more valuePath than rows. The missing valuePath will show empty. But rows cannot have more attribute than columns. EmberTable stops working!