Is it possible to auto generate columns with ngx-datatable?

Question

I am using the ngx-datatable package, to present my data (retrieved from a WebAPI) in a sortable, filterable datagrid.

My set-up is an Angular 4 application (with a Web API in .NET core which should not matter).

I am wondering if it's possible to auto generate the full table, including columns, based on the JSON returned from the Web API. I already did a search on google, but can't seem to find any examples that provide this.

If it's not possible and you have any alternative libraries these are also very welcome.

score 0 · Answer 1 · answered Oct 19 '17 at 10:30

As far as I know, there is no out-of-the-box support for this. However, you can, of course, extend the functionality to support it yourself.

Furthermore, exact mapping of the JSON response to the grid is not recommended due to the fact that you might have to do some data manipulation on the front end to make it human readable, so autogenerating the columns and filling the datatable might increase the complexity of your application by a lot.

I'd suggest just manually adding them, or make a small script that checks the properties. Extending it might lead (like I said) to unnecessary complexity, but this is mostly use-case related.

Good luck!

The thing is that I do not know which columns are returned exactly. I think it should be possible to recognize the column types from the result. I only have strings, numbers and dates, so should be fairly easy to do. — Nick N., Oct 19 '17 at 10:34

score 0 · Answer 2 · edited Nov 23 '17 at 14:01

The best way to generate a table based on a JSON response is to use a http.get() in your service.ts file:

 import { Headers, Http } from '@angular/http';
 import 'rxjs/add/operator/toPromise';

 export class HeroService{
 constructor (private http:Http){}

 public getResponseData() : Promise<any> {
  return this.http.get('assets/heroes.json')
   .toPromise().then(response => {
   return response.json();
    }).catch(this.handleError);
  }

Then in your component.ts file call on the service method:

 ngOnInit(): void {
  this.heroService.getResponseData().then((data) => {
     this.rows = data;
   }, (error) => {
    console.log(error);
  })

Is it possible to auto generate columns with ngx-datatable?

2 Answers2