docs(table): add example using http

[andrewseguin]

Here's a live example of this in plunker: https://plnkr.co/edit/VAvjp7t5jqtUKfHv4ogM?p=preview

Will need to add this example to the Examples tab in material.angular.io

Fixes #5670

[jelbourn]

Just GithubIssue?

[jelbourn]

ExampleHttpDao?

[christophe-mailfert]

ExampleService ?

[jelbourn]

Make this private?

[jelbourn]

Maybe readGthubResult?

[andrewseguin]

Ready for review again

[christophe-mailfert]

Is it possible to add some features like sorting, pagination, filters on this example ?

Cause if we take source of others examples:

return Observable.merge(...displayDataChanges).map(() => {
  page = this._paginator.pageIndex+1;
  return this._exampleDatabase.getRepoIssues(page);
});

This case could not work cause you return an Observable of Observable.

Thx.

[willshowell]

@christophe-mailfert in that case you would want to use switchMap instead of map. IMO combining table features is really just a matter of using rxjs operators correctly and shouldn't be left up to the Material docs to explain since each combo use-case will be different.

Maybe once the table overview is available in the docs, it'll be clearer how combining features should work (see unpublished example).

[jelbourn]

All these classes need to be under an .example- prefix

[jelbourn]

I think we should include sorting and pagination in this example. The github api supports it.

[ctilley83]

@andrewseguin Where is UserData[]defined in the plnkr example you posted? I get a "cannot find name UserData" error when trying to implement this into my cli project.

[andrewseguin]

@ctilley83 I updated the plunker, UserData was something from a previous example that snuck itself in.

[ctilley83]

@andrewseguin I don't think your update saved. Was there a new link?

[andrewseguin]

Seems updated to me, perhaps it was a caching issue. I forked the code regardless and created a new URL. Can you see if that works

[andrewseguin]

Added sorting and pagination to the example, updated the plunker example with the latest version.

[jelbourn]

LGTM

[willshowell]

The plunker is showing a changed after checked error.

Also the programmatic resetting of pageIndex is experiencing same issue as described in #5904

[jelbourn]

I think the example module needs to be regenerated

[jelbourn]

@kara @andrewseguin merging this broke the e2e tests.

[udayvunnam]

@andrewseguin and @willshowell the plunker example implements sorting also in server side.
I am looking for fetching http data only on pagination change. Any change to sort or filter needs to be done on current page data. I am unable to implement this.

Can you please help me with this? Below is the sample connect() implementation

  connect(): Observable<Order[]> {
    // Listen for any changes in the base data, sorting, filtering, or pagination
    const displayDataChanges = [
      this._sort.mdSortChange, 
      this._filterChange,
      this._paginator.page,
    ];

    return Observable.merge(...displayDataChanges)
      .startWith(null)
      .switchMap(()=>{
        this.isLoadingResults = true;
        return this._orderDatabase.getOrderList(this._paginator.pageIndex * this._paginator.pageSize, this._paginator.pageSize)
      })
      .map(result=>{
          this.isLoadingResults = false;
       
          if (!result) { return []; }
          this.totalRecordCount = result.totalRecordCount;
          this.resultData = result.salesOrderList;
          return this.sortData(result.salesOrderList).filter((item: Order) => {
            let searchStr = (item.salesOrderId + item.tenantId + item.salesOrderNum +'').toLowerCase();
            return searchStr.indexOf(this.filter.toLowerCase()) != -1;
          });
      })

  }

[mitidiero]

Not sure if has something wrong on my side but looks like it is not working. It is not even trying to fetch the data.

[pfeigl]

The one thing I don't like about the example is how it mixes code pieces which shouldn't be mixed in my opinion.

The DataSource feels like a very abstract class which should be concerned about handling data. It should not have any knowledge about Components.
I would understand having the Sort and Page events be provideable to an implementation of a DataSource, but providing the complete components into the DataSource feels really wrong.

Other than that, great example and thanks for this!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}