Gathering detailed insights and metrics for ng-virtual-table
Gathering detailed insights and metrics for ng-virtual-table
Angular 7/8 - virtual scroll table with support draggable, pagination, server side, sorting, filtering, resizing and dynamic component
Installations
npm install ng-virtual-tableDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
10.15.1
NPM Version
6.4.1
Releases
25
Languages
4
TypeScript
CSS
HTML
HCL
TypeScript (90.77%)
CSS (5.14%)
HTML (3.85%)
HCL (0.23%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
37 Stars
159 Commits
6 Forks
4 Watchers
25 Branches
1 Contributors
Updated on May 18, 2024
Maintainers
1
Package Meta Information
Latest Version
2.0.0
Package Id
ng-virtual-table@2.0.0
Unpacked Size
502.47 kB
Size
118.42 kB
File Count
30
NPM Version
6.4.1
Node Version
10.15.1
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Dev Dependencies
36
@angular/animations@angular/cdk@angular/cli@angular/common@angular/compiler@angular/compiler-cli@angular/core@angular/forms@angular/material@angular/platform-browser@angular/platform-browser-dynamic@commitlint/config-conventional@starptech/prettyhtml@types/jestbrowserslistcaniuse-litecodecovcodelyzercommitizencommitlinthuskyjestjest-preset-angularlint-stagedng-packagrnpm-run-allprettierrimrafrxjsrxjs-tslint-rulesscss-bundlets-jesttsickletslinttypescriptzone.js
ng-virtual-table
Angular 7/8 virtual scroll table with support dynamic component, draggable, filtering, sorting, paginations, resizable and custom config for each column
Install and Use
| Angular | ng-virtual-table | NPM package |
|---|---|---|
| 8.x.x | 2.x.x | ng-virtual-table@^2.0.0 |
| 7.x.x | 1.x.x | ng-virtual-table@^1.0.0 |
1npm i ng-virtual-table 2yarn add ng-virtual-table
Make sure you have:
@angular/cdk @angular/material @angular/forms
1import { NgVirtualTableModule } from 'ng-virtual-table'; 2 3imports: [NgVirtualTableModule],
1<ng-virtual-table [dataSource]="dataSource"></ng-virtual-table>
📺 Demo
Configuration
1 2 @Input() itemSize = 25; 3 4 @Input() dataSource: Observable<Array<VirtualTableItem | number | string | boolean>>; 5 6 @Input() filterPlaceholder = 'Filter'; 7 8 @Input() dataSetEmptyPlaceholder = 'Data is empty'; 9 10 @Input() config: VirtualTableConfig; 11 12 @Input() onRowClick: (item: VirtualTableItem) => void;
1export type sortColumn = 'asc' | 'desc' | null | false; 2 3 4export interface VirtualPageChange { 5 pageSize?: number; // pagination size 6 pageIndex?: number; // page index 7} 8 9export interface VirtualSortEffect { 10 sortColumn: string; // column for sort 11 sortType?: sortColumn; // type sort 12} 13 14export interface VirtualTableColumn { 15 name?: string; // Label for field, if absent will be use key 16 key: string; // Uniq key for filed, 17 func?: (item: VirtualTableItem) => any; // function for get value from dataSource item 18 comp?: (a: any, b: any) => number; // function for compare two item, depend from `func` function 19 sort?: 'asc' | 'desc' | null | false; // sort by default(support only one sort), false for disable 20 resizable?: boolean; // default true(if not set `true`) 21 draggable?: boolean; // default true (if not set `true`) 22 component?: VirtualTableColumnComponent | false; // default false (You class component must be part of entryComponents in yor Module!!!!!) 23} 24 25export interface VirtualTableColumnComponent { 26 componentConstructor: Type<any>; 27 inputs?: Object; // default {} 28 outputs?: Object; 29} 30 31export interface VirtualTablePaginator { 32 pageSize?: number; // default 10 33 pageSizeOptions?: Array<number>; // default [5, 10, 25, 100]; 34 showFirstLastButtons?: boolean; //default false; 35} 36 37export interface ResponseStreamWithSize { 38 stream: Array<any>; // stream for Server Side strategy 39 totalSize: number; // total size of stream 40} 41 42export interface VirtualTableEffect { 43 filter?: string; // filter string 44 sort?: VirtualSortEffect; // sort effect 45 pagination?: VirtualPageChange; // pagination effect 46} 47 48export interface VirtualTableConfig { 49 column?: Array<VirtualTableColumn>; // if config not provide will be auto generate column 50 header?: boolean; // default false 51 filter?: boolean; // default true 52 pagination?: VirtualTablePaginator | boolean; // default false 53 serverSide?: boolean; // default false; 54 serverSideResolver?: (effects: VirtualTableEffect) => Observable<ResponseStreamWithSize>; 55} 56 57
Example
1import { VirtualTableConfig } from 'ng-virtual-table'; 2 3 clickToItem(item: any) { 4 console.log(item); 5 } 6 7 dataSource = of( 8 Array(1000).fill(0).map((e) => ({ 9 name: Math.random().toString(36).substring(7), 10 age: Math.round(Math.random() * 1000), 11 })), 12 ); 13 14 dataSource1 = of( 15 Array(1000).fill(0).map((e) => ({ 16 name: Math.random().toString(36).substring(7), 17 age: Math.round(Math.random() * 1000), 18 age2: Math.round(Math.random() * 1000), 19 label: { 20 type: Math.random().toString(36).substring(7), 21 }, 22 })), 23 ); 24 25 config: VirtualTableConfig = { 26 column: [ 27 { 28 key: 'name', 29 name: 'Full name', 30 sort: false // disable sort 31 }, 32 { 33 key: 'age', 34 name: 'Full Age', 35 sort: 'desc', // pre defined sort 36 component: { 37 componentConstructor: InfoComponent, 38 inputs: { 39 title: (e) => e.age, 40 }, 41 }, 42 }, 43 { 44 key: 'label', 45 name: 'Full Label', 46 func: (e) => e.label.type, 47 comp: (a, b) => a.indexOf('5') - b.indexOf('5'), // here a and b (e) => e.label.type 48 }, 49 ], 50 }; 51 52 53 54@Component({ 55 selector: 'app-info', 56 templateUrl: './info.component.html', 57 styleUrls: ['./info.component.scss'], 58}) 59export class InfoComponent { 60 @Input() title: string; 61 62 constructor() {} 63} 64
1<ng-virtual-table [dataSource]="dataSource"></ng-virtual-table> 2 3<ng-virtual-table [dataSource]="dataSource1" [onRowClick]="clickToItem" [config]="config"></ng-virtual-table>
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 0/30 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 3 are checked with a SAST tool
Reason
93 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-c75v-2vq8-878f
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
- Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-mh2h-6j8q-x246
- Warn: Project is vulnerable to: GHSA-5q88-cjfq-g2mh
- Warn: Project is vulnerable to: GHSA-xp63-6vf5-xf3v
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
- Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
- Warn: Project is vulnerable to: MAL-2023-462
- Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
- Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
- Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f
- Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p
- Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv
- Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8
- Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65
- Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh
- Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
- Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
- Warn: Project is vulnerable to: GHSA-pc5p-h8pf-mvwp
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
- Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3
- Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-qm28-7hqv-wg5j
- Warn: Project is vulnerable to: GHSA-w7rc-rwvf-8q5r
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
- Warn: Project is vulnerable to: GHSA-9v62-24cr-58cx
- Warn: Project is vulnerable to: GHSA-r8f7-9pfq-mjmv
- Warn: Project is vulnerable to: GHSA-px4h-xg32-q955
- Warn: Project is vulnerable to: GHSA-jmqm-f2gx-4fjv
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-6fw4-hr69-g3rv
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-7mwh-4pqv-wmr8
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
- Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
- Warn: Project is vulnerable to: GHSA-3f95-r44v-8mrg
- Warn: Project is vulnerable to: GHSA-28xr-mwxg-3qc8
- Warn: Project is vulnerable to: GHSA-9p95-fxvg-qgq2
- Warn: Project is vulnerable to: GHSA-9w5j-4mwv-2wj8
- Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Score
2
/10
Last Scanned on 2025-07-07
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