ngx-datatable - Returning Empty Table (Angular 6)

Question

I'm trying to populate a ngx-datatable via API response (async function). I've managed to get the functions working, however the rows in the table are blank (correct number of rows are created).

When i hover on the table, as expected it triggers the onActivate function to log the event and when i look at the event data i can see the data that's meant to be displayed on the table. This indicates that the data is passed to the table accurately but the issue is due to a rendering problem of sort.

HTML:

<div class="row">
    <div class="col-sm-12">
        <ngx-datatable class="bootstrap selection-cell"
          [rows]="rows"
          [columnMode]="'force'"
          [columns]="columns"
          [headerHeight]="50"
          [footerHeight]="50"
          [rowHeight]="'auto'"
          [limit]="20"
          [selected]="selected"
          [selectionType]="'multiClick'"
          (activate)="onActivate($event)"
          (select)='onSelect($event)'>
        </ngx-datatable>
    </div>
</div>

component:

res_out = {}
  res_out_ = []
  rows = []
  loadingIndicator = true;
  reorderable = true;
  selected = [];

  columns = [
    { name: 'ID'},
    { name: 'FileID'},
    { name: 'SectionNum'}
  ];

  constructor() {

      this.fetchData((dt) => {
        this.rows = dt;
        setTimeout(() => { this.loadingIndicator = false; }, 1500);
      });

    };


  async fetchData(cb) {
    return await API.get(this.apiName, this.path, this.myInit).then(response => {
      response.forEach(element => {
        this.columns.forEach((el, i) => this.res_out[el.name] = element[i]);
        this.res_out_.push(this.res_out)
      });
      console.log(this.res_out_)
       cb(this.res_out_)
    }).catch(error => {
      this.res_out_ = [this.res_out]
      console.log(error.response)

    });
  }

I tried do populated the data via an Observable and async pipe still didn't work.

Any ideas?

Can you show what have you tried ? edit and include your source code to the question. — HDJEMAI

Megalomaniac Megalomaniac · Accepted Answer · 2021-01-27T15:41:19

-1

votes

Add the "prop" definition to your columns definition in order to bind to a property

ngx-datatable - Returning Empty Table (Angular 6)

1 Answers