npmpackage.info

Gathering detailed insights and metrics for ng-table-virtual-scroll

Other packages similar to ng-table-virtual-scroll

@craftworks/ng-table-virtual-scroll

1.3.8

Fork of Virtual scroll for for Angular Material Table: https://github.com/diprokon/ng-table-virtual-scroll

vue-virtual-scroll-list

2.3.5

A vue component support big amount data list with high scroll performance.

react-virtual

2.10.4

Hooks for virtualizing scrollable elements in React

ng-cdk-table-virtual-scroll

1.0.2

Virtual scroll for for Angular Cdk Table

Gathering detailed insights and metrics for ng-table-virtual-scroll

ng-table-virtual-scroll

Virtual Scroll for Angular Material Table

1.6.1

139

MIT

TypeScript

3,319,265 2.5

Installations

npm install ng-table-virtual-scroll

Pull Requests

Open

1

Total

52

Closed

32

Merged

19

Issues

Open

25

Total

81

Closed

56

Releases

v1.6.1

Published on 31 Mar 2024

v1.6.0

Published on 20 Feb 2023

v1.5.1

Published on 18 Feb 2023

v1.5.0

Published on 05 Feb 2023

v1.4.1

Published on 05 Feb 2023

v1.4.0

Published on 05 Feb 2023

View all 6 releases

Developer

diprokon

Developer Guide

BETA

Module System

ESM

Min. Node Version

Typescript Support

No

Node Version

NPM Version

Statistics

139 Stars

117 Commits

43 Forks

5 Watching

2 Branches

8 Contributors

Updated on 24 Oct 2024

Languages

TypeScript (73.35%)

HTML (19.04%)

SCSS (6.42%)

CSS (1.05%)

JavaScript (0.14%)

Total Downloads

Cumulative downloads

Total Downloads

3,319,265

Last day

-0.8%

7,980

Compared to previous day

Last week

-1.9%

47,206

Compared to previous week

Last month

40.1%

198,328

Compared to previous month

Last year

29.7%

1,401,184

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

tslib

Peer Dependencies

@angular/common @angular/core @angular/cdk @angular/material

Versions

Virtual Scroll for Angular Material Table

An Angular Directive, which allow to use virtual scrolling in mat-table

Live Demo
Installation
Usage
Development
Issues

Installation

NPM

1$ npm install -save ng-table-virtual-scroll

Version compatibility

Angular version	Library version
>= 15	latest
13 - 14	1.5.*
<= 12	1.3.*

Usage

Import `TableVirtualScrollModule`

1import { TableVirtualScrollModule } from 'ng-table-virtual-scroll';
2
3@NgModule({
4  imports: [
5    // ...
6    TableVirtualScrollModule
7  ]
8})
9export class AppModule { }

Note: you need to install and configure virtual scrolling (ScrollingModule) and mat-table (MatTableModule) before. TableVirtualScroll only make them work together properly

Configure the table

Data Source

The TableVirtualScrollDataSource extends the MatTableDataSource and must be used as the data source for the mat-table (CdkTableVirtualScrollDataSource for cdk-table)

Note: without TableVirtualScrollDataSource the directive won't work

1import { TableVirtualScrollDataSource } from 'ng-table-virtual-scroll';
2
3@Component({...})
4export class MyComponent {
5
6  dataSource = new TableVirtualScrollDataSource();
7
8}

Directive

The tvsItemSize directive makes the magic

1<cdk-virtual-scroll-viewport tvsItemSize="48" headerHeight="56" style="height: 400px;">
2    <table mat-table [dataSource]="dataSource">
3    ...
4    </table>
5</cdk-virtual-scroll-viewport>

Make sure, you set the height to the <cdk-virtual-scroll-viewport> container

Also, you can provide additional properties:

tvsItemSize -> the row height in px (default: 48)

headerHeight -> the header row height in px (default: 56)

footerHeight -> the footer row height in px (default: 48)

headerEnabled -> is the header row in the table (default: true)

footerEnabled -> is the footer row in the table (default: false)

bufferMultiplier -> the size of rendered buffer. The bufferMultiplier * visibleRowsCount number of rows will be rendered before and after visible part of the table.

CdkTable

cdk-table from CdkTableModule is also supported. Just use CdkTableVirtualScrollDataSource as datasource

Issues

If you identify any errors in the library, or have an idea for an improvement, please open an issue.

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Info: Possibly incomplete results: error parsing shell code: reached EOF without matching ( with ): .github/workflows/release.yml:52
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-and-test.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/diprokon/ng-table-virtual-scroll/build-and-test.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-and-test.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/diprokon/ng-table-virtual-scroll/build-and-test.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-and-test.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/diprokon/ng-table-virtual-scroll/build-and-test.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy-demo.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/diprokon/ng-table-virtual-scroll/deploy-demo.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy-demo.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/diprokon/ng-table-virtual-scroll/deploy-demo.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy-demo.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/diprokon/ng-table-virtual-scroll/deploy-demo.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/diprokon/ng-table-virtual-scroll/release.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/diprokon/ng-table-virtual-scroll/release.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:63: update your workflow using https://app.stepsecurity.io/secureworkflow/diprokon/ng-table-virtual-scroll/release.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:101: update your workflow using https://app.stepsecurity.io/secureworkflow/diprokon/ng-table-virtual-scroll/release.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:109: update your workflow using https://app.stepsecurity.io/secureworkflow/diprokon/ng-table-virtual-scroll/release.yml/master?enable=pin
Info: 0 out of 7 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 4 third-party GitHubAction dependencies pinned

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.5

/10

Last Scanned on 2024-11-25

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to ng-table-virtual-scroll

Other packages similar to ng-table-virtual-scroll

ng-table-virtual-scroll

Installations

Pull Requests

1

52

32

19

Issues

25

81

56

Releases

Developer

Developer Guide

ESM

No

Statistics

Languages

Total Downloads

3,319,265

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Virtual Scroll for Angular Material Table

Table of Contents

Installation

Usage

Import TableVirtualScrollModule

Configure the table

Data Source

Directive

CdkTable

Issues

10

10

10

0

0

0

0

0

0

0

0

0

0

2.5

/10

Import `TableVirtualScrollModule`