Observable DataSource

[riwos]

Hi,

I have question how use your directive with Observable ??

I know when you want to use Observable data source you have to define your own class like below:

export class SampleDataSource extends DataSource<T> {   
  constructor() {   
    super();    
  } 

  connect(collectionViewer: CollectionViewer): Observable<T[]> {    
    return Observable<T[]>();   
  } 

  disconnect(collectionViewer: CollectionViewer): void {}   
}

How to apply in your directive ?? Does your directive support async pipe ??

Maybe I have missed something but if you could give me example I will appreciate it :)

[riwos]

One more question..

Does it possible to control how much rows are rendered on html.

For example. I would like only render 5 rows. I am lost today..

Thanks for any reply :)

[riwos]

Hi @diprokon

I have fixed the second question :) For tabs you must configure some things and consider again.

Before my changes when you load data first time you see something like this:

It means the browser tries render all rows and that could be stuck the UI and freeze screen for a couple of seconds..

Then I have applied code:

 const start = 0;
 const end = 10;
 this.viewport.setRenderedRange({start, end});

on "check()" method and then you have:

and this is exactly what I wanted to achieve :)

You can have a look here: https://stackblitz.com/edit/angular-material-tab-example-jlzxen

[diprokon]

Hi,

I have question how use your directive with Observable ??

I know when you want to use Observable data source you have to define your own class like below:

export class SampleDataSource extends DataSource<T> { 
  constructor() { 
    super();  
  }   

  connect(collectionViewer: CollectionViewer): Observable<T[]> {  
    return Observable<T[]>(); 
  }   

  disconnect(collectionViewer: CollectionViewer): void {} 
}

How to apply in your directive ?? Does your directive support async pipe ??

Maybe I have missed something but if you could give me example I will appreciate it :)

With the directive you can only use the TableVirtualScrollDataSource. It can be created or extended - the same as MatTableDataSource. The easy way to use observable, is to update data: source.subscribe(data => dataSource.data = data);