https://github.com/pxyup/ng-virtual-table
Angular 7/8 - virtual scroll table with support draggable, pagination, server side, sorting, filtering, resizing and dynamic component
https://github.com/pxyup/ng-virtual-table
angular angular7 angular8 filter rxjs table virtual-scroll
Last synced: 10 months ago
JSON representation
Angular 7/8 - virtual scroll table with support draggable, pagination, server side, sorting, filtering, resizing and dynamic component
- Host: GitHub
- URL: https://github.com/pxyup/ng-virtual-table
- Owner: PxyUp
- License: mit
- Created: 2018-10-19T15:22:52.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T23:59:23.000Z (about 3 years ago)
- Last Synced: 2025-04-19T13:22:50.859Z (10 months ago)
- Topics: angular, angular7, angular8, filter, rxjs, table, virtual-scroll
- Language: TypeScript
- Homepage: https://pxyup.github.io/ng-virtual-table
- Size: 2.24 MB
- Stars: 37
- Watchers: 4
- Forks: 6
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
## ng-virtual-table
Angular 7/8 virtual scroll table with support dynamic component, draggable, filtering, sorting, paginations, resizable and custom config for each column
[](https://travis-ci.org/PxyUp/ng-virtual-table)
[](https://codecov.io/gh/PxyUp/ng-virtual-table)
[](https://badge.fury.io/js/ng-virtual-table)
[](https://www.npmjs.com/package/ng-virtual-table)
[](https://github.com/PxyUp/ng-virtual-table/blob/master/LICENSE)
## 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` |
```bash
npm i ng-virtual-table
yarn add ng-virtual-table
```
Make sure you have:
`@angular/cdk` `@angular/material` `@angular/forms`
```typescript
import { NgVirtualTableModule } from 'ng-virtual-table';
imports: [NgVirtualTableModule],
```
```html
```
📺 [STACKBLITZ](https://stackblitz.com/edit/angular-i7mm4w)
📺 [Demo](https://pxyup.github.io/ng-virtual-table)
[](https://nodei.co/npm/ng-virtual-table/)
## Configuration
```typescript
@Input() itemSize = 25;
@Input() dataSource: Observable>;
@Input() filterPlaceholder = 'Filter';
@Input() dataSetEmptyPlaceholder = 'Data is empty';
@Input() config: VirtualTableConfig;
@Input() onRowClick: (item: VirtualTableItem) => void;
```
```typescript
export type sortColumn = 'asc' | 'desc' | null | false;
export interface VirtualPageChange {
pageSize?: number; // pagination size
pageIndex?: number; // page index
}
export interface VirtualSortEffect {
sortColumn: string; // column for sort
sortType?: sortColumn; // type sort
}
export interface VirtualTableColumn {
name?: string; // Label for field, if absent will be use key
key: string; // Uniq key for filed,
func?: (item: VirtualTableItem) => any; // function for get value from dataSource item
comp?: (a: any, b: any) => number; // function for compare two item, depend from `func` function
sort?: 'asc' | 'desc' | null | false; // sort by default(support only one sort), false for disable
resizable?: boolean; // default true(if not set `true`)
draggable?: boolean; // default true (if not set `true`)
component?: VirtualTableColumnComponent | false; // default false (You class component must be part of entryComponents in yor Module!!!!!)
}
export interface VirtualTableColumnComponent {
componentConstructor: Type;
inputs?: Object; // default {}
outputs?: Object;
}
export interface VirtualTablePaginator {
pageSize?: number; // default 10
pageSizeOptions?: Array; // default [5, 10, 25, 100];
showFirstLastButtons?: boolean; //default false;
}
export interface ResponseStreamWithSize {
stream: Array; // stream for Server Side strategy
totalSize: number; // total size of stream
}
export interface VirtualTableEffect {
filter?: string; // filter string
sort?: VirtualSortEffect; // sort effect
pagination?: VirtualPageChange; // pagination effect
}
export interface VirtualTableConfig {
column?: Array; // if config not provide will be auto generate column
header?: boolean; // default false
filter?: boolean; // default true
pagination?: VirtualTablePaginator | boolean; // default false
serverSide?: boolean; // default false;
serverSideResolver?: (effects: VirtualTableEffect) => Observable;
}
```
## Example
```typescript
import { VirtualTableConfig } from 'ng-virtual-table';
clickToItem(item: any) {
console.log(item);
}
dataSource = of(
Array(1000).fill(0).map((e) => ({
name: Math.random().toString(36).substring(7),
age: Math.round(Math.random() * 1000),
})),
);
dataSource1 = of(
Array(1000).fill(0).map((e) => ({
name: Math.random().toString(36).substring(7),
age: Math.round(Math.random() * 1000),
age2: Math.round(Math.random() * 1000),
label: {
type: Math.random().toString(36).substring(7),
},
})),
);
config: VirtualTableConfig = {
column: [
{
key: 'name',
name: 'Full name',
sort: false // disable sort
},
{
key: 'age',
name: 'Full Age',
sort: 'desc', // pre defined sort
component: {
componentConstructor: InfoComponent,
inputs: {
title: (e) => e.age,
},
},
},
{
key: 'label',
name: 'Full Label',
func: (e) => e.label.type,
comp: (a, b) => a.indexOf('5') - b.indexOf('5'), // here a and b (e) => e.label.type
},
],
};
@Component({
selector: 'app-info',
templateUrl: './info.component.html',
styleUrls: ['./info.component.scss'],
})
export class InfoComponent {
@Input() title: string;
constructor() {}
}
```
```html
```