diprokon / ng-table-virtual-scroll

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

I don't see tbody rendering any rows. I copied code from live demo basic-example. #18

Closed SanthoshVeeramalla closed 3 years ago

SanthoshVeeramalla commented 4 years ago

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:

My package.json shows the following: "@angular/cdk": "^7.2.1", "@angular/material": "^7.2.1", "ng-table-virtual-scroll": "^1.3.1",
ferroariel commented 4 years ago

Same for me :(

ferroariel commented 4 years ago

{ "name": "poc", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "~9.1.0", "@angular/cdk": "^9.2.0", "@angular/common": "~9.1.0", "@angular/compiler": "~9.1.0", "@angular/core": "~9.1.0", "@angular/forms": "~9.1.0", "@angular/material": "^9.2.0", "@angular/platform-browser": "~9.1.0", "@angular/platform-browser-dynamic": "~9.1.0", "@angular/router": "~9.1.0", "ag-grid-angular": "^23.0.2", "ag-grid-community": "^23.0.2", "ng-table-virtual-scroll": "^1.3.1", "rxjs": "~6.5.4", "tslib": "^1.10.0", "zone.js": "~0.10.2" }, "devDependencies": { "@angular-devkit/build-angular": "~0.901.0", "@angular/cli": "~9.1.0", "@angular/compiler-cli": "~9.1.0", "@angular/language-service": "~9.1.0", "@types/node": "^12.11.1", "@types/jasmine": "~3.5.0", "@types/jasminewd2": "~2.0.3", "codelyzer": "^5.1.2", "jasmine-core": "~3.5.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~4.4.1", "karma-chrome-launcher": "~3.1.0", "karma-coverage-istanbul-reporter": "~2.1.0", "karma-jasmine": "~3.0.1", "karma-jasmine-html-reporter": "^1.4.2", "protractor": "~5.4.3", "ts-node": "~8.3.0", "tslint": "~6.1.0", "typescript": "~3.8.3" } }

msqar commented 4 years ago

Me neither, not rendering tbody. Does anyone know?

victoriaunizhona commented 4 years ago

Same issue

diprokon commented 4 years ago

Can someone, please, provide example with the issue? I cannot reproduce the problem with provided package.json

victoriaunizhona commented 4 years ago

Can someone, please, provide example with the issue? I cannot reproduce the problem with provided package.json

@diprokon Can you share your working stackblitz version with "@angular/cdk": "^7.2.0", "@angular/material": "^7.2.0", "ng-table-virtual-scroll": "^1.3.1",

From what I see - The element cdk-virtual-scroll-viewport is created and then directly first child is a table. On the newer versions - I saw that there is a container after cdk-virtual-scroll-viewport. But it is missing on these versions.

I suppose it is the core of the issue.

msqar commented 4 years ago

i was able to make it work but it's suuuper laggy to render new items, is that normal? is that angular's fault? T__T

victoriaunizhona commented 4 years ago

@msqar Can you share your code or what was wrong and you have changed?

AmbroiseVuaridel commented 4 years ago

Same for me

AmbroiseVuaridel commented 4 years ago

i was missing import {ScrollingModule} from "@angular/cdk/scrolling"; it works well after adding it

victoriaunizhona commented 4 years ago

Adding import {ScrollingModule} from "@angular/cdk/scrolling"; helped. @diprokon Maybe you can consider adding that to the instructions?

Still as msqar mentioned - it is very laggy. Loading even slower than without virtual scroll.

AudriusButkevicius commented 4 years ago

So I tried the suggested steps here of including the scrolling module, and it didn't work, spent tons of time trying to figure out why.

It seems that on a live reload server when you include the scrolling module in your app module, the reload server only reloads the module file, it does not recompile or reload the component file, hence why it doesn't work.

I had to re-save the component file for it to be recompiled and reloaded properly, at which point stuff started working.

rohitattaluri552 commented 3 years ago

Adding import {ScrollingModule} from "@angular/cdk/scrolling"; helped. @diprokon Maybe you can consider adding that to the instructions?

Still as msqar mentioned - it is very laggy. Loading even slower than without virtual scroll.

This didn't work for me either 😭