Using ConnectableObservable instead of DataSource in mat table

Question

From what I understand mat table dataSource is a thin wrapper around an Observable and its interface looks a lot like the ConnectableObservable.

After a bit of digging I realised that rxjs/ConnectableObservable's connect method returns either a Disposable or a more likely a Subscription depending which source you trust. This doesn't quite match with the expected API from material.

The examples given on the material website do declare additional classes for some obscure reason however it feels like a regular ConnectableObservable should work just fine here.

Is there a way to make material table accept a ConnectableObservable as dataSource or is there a good reason why I should be extending the cdk/DataSource abstract class?

Here are two mildly related SO:

ps if you have a link to a working plunker/fiddle/whatever i'll be happy to provide an example

From the look of the datasource example code you provided, i think it expect a connect method which return a Observable for component to subscribe for data. I guess internally it get's its data like this.datasource.connect().subscribe((res)=>this.row=res). ConnectableObservable connect method does a totally different thing, so i think you can't replace the formal abstract implementation with that. — Fan Cheung
@FanCheung is right, DataSource is not a thin wrapper around ConnectableObservable, it is an entirely different abstraction that just happens to also have a method named connect() — Pace
@FanCheung why not write an answer to this so I can close? I can't accept a comment — Renaud

Fan Cheung Fan Cheung · Accepted Answer · 2017-11-03T02:13:37

Here's the source code of md table stating it expect connect to return a behaviorSubject https://github.com/angular/material2/blob/master/src/lib/table/table-data-source.ts

export class MatTableDataSource<T> implements DataSource<T> {

 /** Stream emitting render data to the table (depends on ordered data 
     changes). */
  private _renderData = new BehaviorSubject<T[]>([]);

/**
  * Used by the MatTable. Called when it connects to the data source.
  * @docs-private
  */
 connect() { return this._renderData; }
.
.
.

Using ConnectableObservable instead of DataSource in mat table

1 Answers