diprokon / ng-table-virtual-scroll

Virtual Scroll for Angular Material Table
https://diprokon.github.io/ng-table-virtual-scroll
MIT License
139 stars 42 forks source link

Observable DataSource #9

Closed riwos closed 4 years ago

riwos commented 4 years ago

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 commented 4 years ago

One more question..

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

Screenshot 2020-02-18 at 21 46 48

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

Thanks for any reply :)

riwos commented 4 years ago

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: Screenshot_2

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: Screenshot_3

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 commented 4 years ago

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);