diprokon / ng-table-virtual-scroll Goto Github PK

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

When scrolling a table with complex rows having a sticky header, the header scrolls with the content. If i set the bufferMultiplier to something very high then this does not happen. Can you suggest how to go about this issue please. thanks a lot

After some time scrolling on a bigger list the header scrolls with the content, present on demo.

By default the width of each column is set to accommodate the longest element in that column. However due to virtual scrolling the longest is not in the viewport. Due to this, the width changes while scrolling

If there are a lot of elements and the table is complex one - everything is loading even slower than without virtual scroll.

"@angular/cdk": "^7.2.0",
"@angular/material": "^7.2.0",
"ng-table-virtual-scroll": "^1.3.1",

Browsers: the most up-to-date Chrome and Mozila

When dragging the scrollbar from the top down, at first the table rows scroll as expected, but when I reach about 70-80% down the scrollbar starts jerking up and down.
Note: the table has variable row heights, perhaps that is what causes the jerk?
See attached recording.

scrpll3.mov.zip

I managed to make everything work except for the sorting.
i have reproduced it there :
https://stackblitz.com/edit/angular-8nw22p

Hello!

It's distracting when column width or position changes when scrolling, the items are no longer aligned vertically. What I mean is that tables are good for aligning items horizontally and vertically, it's visually jarring to have columns jiggling around like that.

A very good example of this is the Table with filter, sort and selection example:
https://diprokon.github.io/ng-table-virtual-scroll/#/examples
I have the same problem, albeit less extreme because text length does not vary that much I think.

I am using virtual scroll in combine with multiple mat-form-field elements inline the cells

When a formControl have an error it is displayed but when scrolling it out of view and coming back the error is reset to null in the control - could it be related to default caching strategy ?

when my chart slides a few times and then release the mouse, the chart content will fluctuate up and down. Similar to [https://github.com//issues/30]. But setting'tvsItemSize' with no value still cannot solve this problem for me.

My code:
<cdk-virtual-scroll-viewport tvsItemSize [headerHeight]="64" [bufferMultiplier]="15" [ngStyle]="{'height': tableHeight, 'width': '100%'}"> <table mat-table [dataSource]="tableRows" matSort matSortActive="{{matSortActive}}" matSortDirection="{{matSortDirection}}" matSortDisableClear (matSortChange)="sortData($event)" matSortStart="desc" [multiTemplateDataRows]="true"> ... ... </table> </cdk-virtual-scroll-viewport>

And a blank area will appear on the chart when you swipe quickly.

My data is 1,800 pieces of more complex data. Will this have any effect?

ERROR in node_modules/ng-table-virtual-scroll/lib/fixed-size-table-virtual-scroll-strategy.d.ts(20,9): error TS1086: An accessor cannot be declared in an ambient context.
node_modules/ng-table-virtual-scroll/lib/fixed-size-table-virtual-scroll-strategy.d.ts(21,9): error TS1086: An accessor cannot be declared in an ambient context.

Failed in runtime.
"@angular/cli": "~7.1.4",
"typescript": "^3.1.6",

I tried to update to tsc 3.8.3 but my angular cli return an error
ERROR in The Angular Compiler requires TypeScript >=3.1.1 and <3.2.0 but 3.8.3 was found instead.

I can't upgrade at this moment.

Currently the library support only Mat table. Please add support to CDK table.

Note:

1. ContentChild of mat table in table-item-size.directive.ts, link.
2. css selectors in table-item-size.directive.ts, link.

I have a table on a tab and virtual-scroll works but the sort doesn't
Any ideas?

When you try to use a sticky header with sticky columns there is some issue when you try to scroll up in the middle of the table. But it's ok when you try to use it separately.

It reproducible in Live Demo, just need to add 'sticky: true' to the header.

Steps to reproduce:

1. Visit this link: https://stackblitz.com/edit/angular-1ewe8n
2. Click on the table.
3. Hold down page down
4. Table gets stuck scrolling after 1 or 2 seconds.

Getting error:
Cannot read property '_switchDataSource' of undefined
at TableItemSizeDirective.ngAfterContentInit (ng-table-virtual-scroll.js:168)

with Angular 11. Table data doesn't load.

I would like to change the templateCacheSize which is accessible on the *cdkVirtualFor property. Is there a way to set this up?

Hi all,

I was trying to figure a way to implement virtual scroll and came here to use it.

Installed the plugin from Npm and tried fulfilling my requirement.

But at the initially stage it self, i couldn't assign my data to dataSource as show in the example.

FYI, here I'm attaching my code snippets screenshots as well. Any suggestions will be appreciated.

@diprokon thanks for the library, is very useful.

I am trying to use the variable index inside the loop but the count gets reset every time after scrolling. This is an example of the behavior : https://stackblitz.com/edit/angular-material-virtual-scrolling

Please let me know if can provide any help.
Thank you again.

When scrolling fast a table (200-300 rows), the sticky header scrolls with the content and in some cases the table disappears for 1-2 seconds.
I'm using directives approach instead of components.

Any advice on this ?

Hi,

Just for information is the current library compatible with a virtual scrolling horizontal & vertical at the same time?

Thanks in advance,
B R

Using directive with datasource, virtual scroll works great. But experiencing issue with keyboard navigation (Arrow Up/Arrow Down) and scrolling of the contents.
We have mat table with sticky headers.
To reproduce, first scroll down with arrow keys so first 5 rows would disappear from the viewport, then start scrolling up. Once top visible row reached, contents is not scrolled, but almost feels like it counts header row as a part of the visible scroll area. It feels that scroll is one row behind because of counting of the header row as a part of visible scroll.

Custom sorting and filtering methods are not working with this project

@ViewChild(MatSort, {}) sort: MatSort;

this.dataSource.sortingDataAccessor = ...
this.dataSource.filterPredicate = ...

then
this.dataSource.sort = this.sort;
this.dataSource.filter = filterValue;

Hey there,

When we upgrade to angular 10 we found a similar bug we had before: #28

When you try to use sticky columns there is some issue when you try to scroll up in the middle of the table.

It reproducible in Live Demo, just need to update to angular 10

When data is filtered the scrolling behaviour is not changed and still tries to scroll through all data records.

For example: Data has 100 records. Filtered Data has only 10 records. It is still possible to scroll further than the availabla 10 records, which also breaks the sticky header.

I think filtereddata should be used instead of data, since it is also that what is displayed.

Hello,

When the table is initally hidden with CSS (display:none) and displayed programmaticaly, the rows are not shown unless you force the re-rendering (by changing windows size for example).

See the following Stackblitz for an example:
https://stackblitz.com/edit/angular-rdotb9?file=src/app/base-example.component.ts

If you change value of hideCdkVS to false, it will works fine but if it's hidden by default (hideCdkVS = true;) and then you click on the show button, the table will be rendered but not the rows. If you then change the size of the window, the rows will be rendered.

Hi!

Try to set the border & border-radius on the header & for cells of the table.
Then, if you scroll, you will notice that the border from the cell is visible and overlapping with the header, which should not be the case (basically, it forces you to avoid using border-radius on the header).
Please, have a look at the screenshot as well. The green areas are the ones from cells that overlap at the corners of rounded header.

Best, Server.

Hi,

I created exmaple about a behaviour current issue whether even maybe a bug:

Here is example to have a look: Example

Step replication:

1. Click 'Primary Button'
2. Output Result (Console):

Service Data Source: 0
Service Data Source: 1000

3. Click on search input and populate a word 'Wood'
4. Output Result:

########### Search Start ##############
Data Table Source:
1000
Filter Table Data:
2
[Object, Object]
########### Search End ##############
Service Data Source: 2

5. Remove couple of letters to make a result: 'Wo'
6. Output Result:

########### Search Start ##############
Data Table Source:
1000
Filter Table Data:
7
[Object, Object, Object, Object, Object, Object, Object]
########### Search End ##############
Service Data Source: 7

MAGIC MOMENT: LOST FOCUS FROM THE INPUT AND THEN:

BUT !!!

remove and clear a input and you have an old results, i expect whole list..

QUESTION: What I'm doing wrong whether you have a bug and you don't refresh the list or call a proper event that tells the list has been updated and you have to refresh and render again

PLEASE HELPPPPPP :D @diprokon

Installed using the command npm install -save ng-table-virtual-scroll.

My tbody does not have any rows displayed. I copied the code from live demo basic one and the data is also available from util.ts file.

Does it need a specific version of angular cdk and material, etc?

Also i do not see the below div after rendering:

In angular version 7.x sticky header + fixed width not work
Data source length: 1000

When I launch the application with Angular 13 I get

⠙ Generating browser application bundles (phase: setup)...Processing legacy "View Engine" libraries:
- ng-table-virtual-scroll [es2015/esm2015] (git://github.com/diprokon/ng-table-virtual-scroll.git)
Encourage the library authors to publish an Ivy distribution.

Any plans to fix this?

I am using Material V 9.0.0 and it seems that the import of MatTableDataSource is failed. From the material docs:

From changelog:

material

Breaking changes:

Components can no longer be imported through "@angular/material". Use the individual secondary entry-points, such as @angular/material/button.

It would be nice if the dependencies get updated for the new version of material.

My use case involves variable height rows.
I noticed the code is based on a FixedSizeTableVirtualScrollStrategy.
I'd like to see additional scrolling strategies implemented (or at least provide a way for developers to override the default?)

Thanks

In my tsconfig.json I've enabled

"angularCompilerOptions": {
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }

This causes compiler errors for

<cdk-virtual-scroll-viewport class="scroll-viewport" tvsItemSize="28" headerHeight="32">

I get

error TS2322: Type 'string' is not assignable to type 'number'.

for both inputs, tvsItemSize and headerHeight. So, I changed the syntax to

<cdk-virtual-scroll-viewport class="scroll-viewport" [tvsItemSize]="28" [headerHeight]="32">

then the compiler is happy, but my values are ignored, I always get the table with defaults values (48 for tvsItemSize and 56 for headerHeight).

ERROR TypeError: Cannot read property 'unsubscribe' of null
at TableVirtualScrollDataSource._updateChangeSubscription (ng-table-virtual-scroll.js:30)

When we attach multiple sticky header in a table. Only latest header row works fine. I inspected a bit on the rendered html and found that as all the header rows are given a fixed Html "top" value. The first header row gets hidden under the second header row.

I needed to use async data for the table and couldn't get the package to work properly so I took it into the project and basically had to change just 1 thing that made it work great

on table-item-size.directive.ts :
instead of

  @ContentChild(MatTable, { static: **true** })
  table: MatTable<any>;

  @ContentChild(MatTable, { static: **false** })
  table: MatTable<any>;

Its just missing the behavior parameter

I'm amazed with your directive! It's a bummer the Angular team is dragging their feet with angular/components#10122.

In the example for "Table with filter, sort and selection" in the live demo, the checkboxes function very inconsistently. For example, try checking each row, one at time and occasionally toggling the header checkbox.

I'm not sure whether this broken functionality is reflective of the virtual-scroll implementation or just a bug with how checkbox states are managed (hopefully the latter, as I could really use the checkbox functionality!).

This was noticed in Chrome 78.0.3904.97.

🐞 BUG REPORT

Description
When using angular material tab (8.2.3) and then you are trying scroll on down then data is gone for some reason.. You must refresh page to get table with data again..

🔬 Minimal Reproduction
https://stackblitz.com/edit/angular-material-tab-example-uca6w3

🔥 Exception or Error
None

🌍 Your Environment

Any ideas ??

ps. Awesome solution. I am glad and happy you did it !! Many thanks 🗡

I want to trigger the scroll of the CdkVirtualScrollViewport by calling scrollToIndex.

Expected behaviour:

• The virtual scroll viewport scrolls to the passed index parameter.

Actually nothing happens.

Worked around the issue by using the scrollBy function of the viewport nativeElement. But still, the issue remains.

Hey there,

when using multiple sticky header rows the first row gets hidden under the second row. Seems like a duplicate of Issue #21.
Im on version 1.3.4 with @angular/cdk 10.2.7, so the fix mentioned in #21 should already be applied. But it still does not work properly.

Any advice on this?

Example can be found here: StackBlitz

Hi, I have a table with sticky header & footer.
The header is working fine, but the footer stops sticking after a couple of scrolls

Hello,
great work, i really appreciate this lib!
i'm just facing some issuee when using in combo with dynamic spanrow
When using a code like this:

<td
              mat-cell
              *matCellDef="let element; let i = index"
              [style.padding-left]="'5px'"
              [style.padding-right]="'5px'"
              [style.display]="getRowSpan(col, i) ? '' : 'none'"
              [attr.rowspan]="getRowSpan(col, i)"
            >
              <div [innerHTML]="element[col]"></div>
            </td>

spanRow(key: any, accessor: any) {
    for (let i = 0; i < this.DATA.length; ) {
      const currentValue = accessor(this.DATA[i]);
      let count = 1;

      for (let j = i + 1; j < this.DATA.length; j++) {
        if (currentValue !== accessor(this.DATA[j])) {
          break;
        }

        count++;
      }

      if (!this.spans[i]) {
        this.spans[i] = {};
      }

      this.spans[i][key] = count;
      i += count;
    }
  }

  getRowSpan(col: string | number, index: string | number) {
    return this.spans[index] && this.spans[index][col];
  }

The result in some columns is broken:

(Buon 1980 is not spanned like the others, when not using this lib is working right)

Thanks again!

Hi,

the docs say we must do
vDataSource = new TableVirtualScrollDataSource(ELEMENT_DATA);
but for me it doesn't work

What works is just sending the data directly. So if you replace [dataSource]="vDataSource" with [dataSource]="dataSource" the cells are displayed but I don't know if the virtual scroll is working as expected

Maybe the docs need to be updated?

Thank you

Example:
https://stackblitz.com/edit/angular-cpxqbh?file=src/app/table-basic-example.html

Update:
Copy-pasting one of the examples in stackblitz has the same behavior, no cells if new TableVirtualScrollDataSource is used
https://stackblitz.com/edit/angular-cpxqbh-nembpx?file=src%2Fapp%2Ftable-basic-example.ts

In a Component have 3 tabs.
In each tab I have a virtual Scroll table and are loaded when the component loads (ngOnInit).

As just 1 table is visible at a time, the grids that are hidden appear collapsed (only showing header and footer) when changing to it's tab. And only show themselves when resizing the window.

Often there is a use case for when the dataSource input parameter is not a static value. Currently, if we pass a new object to dataSource after initialization of the view, then the tvsItemSize directive fails to display any table rows because it was connected to the previous instance (see ngAfterViewInit method in TableItemSizeDirective). Any new instances of dataSource will not be connected to since we do not observe changes.

Proposal: use MutationObserver web api as seen here: https://nitayneeman.com/posts/listening-to-dom-changes-using-mutationobserver-in-angular/

The tvsItemSize directive should do something like the following:

ngAfterViewInit() {
   const element = this.table;

   const changes = new MutationObserver((mutations: MutationRecord[]) => {
      mutations.forEach((mutation: MutationRecord) => this.connectToDataSource(mutation)
   });

   changes.observe(element, {
       attributes: true,
    });

   this.scrollStrategy.stickyChange
      .pipe(
        filter(() => this.isStickyEnabled()),
        takeWhile(this.isAlive())
      )
      .subscribe((stickyOffset) => {
        this.setSticky(stickyOffset);
      });
}

private connectToDataSource(mutation: MutationRecord) {
    if (this.table.dataSource instanceof TableVirtualScrollDataSource) {
      const dataSource = this.table.dataSource;
      this.scrollStrategy.renderedRangeStream
        .pipe(
          takeUntil(newDataSource), // need to unsubscribe when new datasource comes in
          takeWhile(this.isAlive())
        )
        .subscribe(range => {
          this.zone.run(() => {
            dataSource.renderedRangeStream.next(range);
          });
        });
      dataSource.connect()
        .pipe(
          map(() => dataSource.data.length),
          distinctUntilChanged(),
          takeUntil(newDataSource), // need to unsubscribe when new datasource comes in
          takeWhile(this.isAlive())
        )
        .subscribe((length) => {
          this.scrollStrategy.dataLength = length;
        });
    } else {
      throw new Error('[tvsItemSize] requires TableVirtualScrollDataSource be set as [dataSource] of [mat-table]');
    }
}

Angular10:
If I have something like

<cdk-virtual-scroll-viewport tvsItemSize [ngStyle]=...

the Angular compiler complains

     ....   error TS2322: Type 'string' is not assignable to type 'number'.
  4   <cdk-virtual-scroll-viewport tvsItemSize [ngStyle]="{'height': 'calc(
                                   ~~~~~~~~~~~

is there a way to fix this issue? Or better: To assign the values properly?

Sticky header dissappearing while you scroll items. This issue is reproducing while you scroll items on your demo page with sticky headers! Tested with Chrome Mobile browser. Will you fix it?