Angular ngx-datatable not refreshing

Question

I have tried below code, everything seems okay(not getting any error and even data is there from api call) but at last I am getting an empty table.

*reloadTable* is the function which calls the API.

Data from API call :

Empty table :

@Component({
      selector: 'app-my-component',
      template: `
        <ngx-datatable
          class="bootstrap table table-striped"
          [rows]="rows"
          [columns]="columns"
          [columnMode]="'force'"
          [headerHeight]="50"
          [footerHeight]="50"
          [rowHeight]="'auto'"
          [externalPaging]="true"
          [externalSorting]="true"
          [count]="page.count"
          [offset]="page.offset"
          [limit]="page.limit"
          [sortType]="'single'"
          (page)="pageCallback($event)"
          (sort)="sortCallback($event)"
        ></ngx-datatable>
      `
    })

    export class NGXServerSide implements OnInit {
      rows: Object[]=[];      
      columns = [
        { name: 'EmployeeID' },
        { name: 'Name' },
        { name: 'City' },
        { name: 'Department' },
        { name: 'Gender' },
      ];         
      constructor(private httpClient: HttpClient, private _employeeService: EmployeeService) { }

      ngOnInit() {
        this.pageCallback({ offset: 1 });
      }
    pageCallback(pageInfo: { count?: number, pageSize?: number, limit?: number, offset?: number }) {
        this.page.offset = pageInfo.offset;
        this.reloadTable();
      }        
    reloadTable() {
    const params = this.addTableParams();// params for api input
    this._employeeService.getSortedPagedResults(params).subscribe((res: Response) => {
     for (var i in res)       
     this.rows.push([res[i]]);
     this.page.count=1;
     });
     }  
    }

Answer 1

After looking over your question more, I see what the issue is. You're passing data to the datatable but it is not being displayed. There are two problems:

1. The datatable doesn't know what to bind to. In the NGXServerSide class, you're only giving the column a name. Give the column a property to bind like so:

   columns = [{ name: 'EmployeeID', prop: 'EmployeeID' }]

2. The object you're passing in doesn't match the column name. In the screenshot I can see EmployeeId: '1', but your column is expecting EmployeeID

I'm including a link below from the ngx-datatable API documentation that contains some additional column properties you can use. ngx-datatable column properties