schematic(table): using generated DataSource with async data source

What is the expected behavior?

Documentation for how to get async data DataSource connect() from (http.get.....().subscribe()....)

I don’t ask for example with static data nor old syntax, but how to use with actual schematic for Table and his DataSource

What is the current behavior?

DataSource extension is generated like this:

connect(): Observable<any[]> {
    // Combine everything that affects the rendered data into one update
    // stream for the data-table to consume.

    const dataMutations = [
      observableOf(this.data),
      this.paginator.page,
      this.sort.sortChange
    ];

    // Set the paginator's length
    this.paginator.length = this.data.length;

    return merge(...dataMutations).pipe(map(() => {
      return this.getPagedData(this.getSortedData([...this.data]));
    }));

  }

No documentation, where and how to call http.get… for getting async data for connect() method.

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.
StackBlitz starter: https://goo.gl/wwnhMV

Try to use material table schematic and fill connect() not with static data but async call like http.get…

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Actual angular, actual material 7.3.7, needed typescript

Is there anything else we should know?

[Splaktar]

Ah OK, I see what you mean now.

On the MatTable examples page, the “Table retrieving data through HTTP” example could be helpful. Here’s a Stackblitz link to that example. Note that this example does paging and sorting on the server.

Looking at your getIOPList(id) call, it looks like you may be wanting an example that does paging and sorting on the client. Here’s an example that does that:

  connect(): Observable<MyItem[]> {
    this.subscription = observableOf(EXAMPLE_DATA).subscribe((result: MyItem[]) => {
      this.data = result;
      this.paginator.length = this.data.length;
    });

    // Combine everything that affects the rendered data into one update
    // stream for the data-table to consume.
    const dataMutations = [
      observableOf(this.data),
      this.paginator.page,
      this.sort.sortChange
    ];

    return merge(...dataMutations)
    .pipe(
      map(() => this.getPagedData(this.getSortedData([...this.data])))
    );
  }

Converting this for your code should look something like this:

  connect(): Observable<MyItem[]> {
    this.subscription = this.service.getIOPList(10052).subscribe(r => {
      this.data = r.table;
      this.paginator.length = this.data.length;
    });

    // Combine everything that affects the rendered data into one update
    // stream for the data-table to consume.
    const dataMutations = [
      observableOf(this.data),
      this.paginator.page,
      this.sort.sortChange
    ];

    return merge(...dataMutations)
    .pipe(
      map(() => this.getPagedData(this.getSortedData([...this.data])))
    );
  }

Then you will probably want to change your template from

  <mat-paginator #paginator
      [length]="dataSource.data.length"
      [pageIndex]="0"
      [pageSize]="50"
      [pageSizeOptions]="[25, 50, 100, 250]">
  </mat-paginator>

to

  <mat-paginator #paginator
      [pageIndex]="0"
      [pageSize]="50"
      [pageSizeOptions]="[25, 50, 100, 250]">
  </mat-paginator>

[b-mi]

Splaktar, I don’t have problem with usage of HttpClient - it works perfectly. I have problem how to connect async data with new/actual version of table schematic.

1. angular table schematic should not use as a sample static data, but async data.

2. As an answer to my question should be that I don’t need change connect() method, but I should get async data first and then create DataSource. It is better, but still with some strange errors.

I need fully functional sample with async data, not static. (No, I do not need link for HttpClient!!)

“Old syntax”? Google and look at various versions of usage material table schematic.

Thanks.