{"id":19451569,"url":"https://github.com/pxyup/ng-virtual-table","last_synced_at":"2025-04-25T04:30:27.100Z","repository":{"id":37692380,"uuid":"153803564","full_name":"PxyUp/ng-virtual-table","owner":"PxyUp","description":"Angular 7/8 - virtual scroll table with support draggable, pagination, server side, sorting, filtering, resizing and dynamic component","archived":false,"fork":false,"pushed_at":"2022-12-08T23:59:23.000Z","size":2344,"stargazers_count":37,"open_issues_count":25,"forks_count":6,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-19T13:22:50.859Z","etag":null,"topics":["angular","angular7","angular8","filter","rxjs","table","virtual-scroll"],"latest_commit_sha":null,"homepage":"https://pxyup.github.io/ng-virtual-table","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PxyUp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"PxyUp"}},"created_at":"2018-10-19T15:22:52.000Z","updated_at":"2024-05-18T21:21:04.000Z","dependencies_parsed_at":"2023-01-25T18:31:08.929Z","dependency_job_id":null,"html_url":"https://github.com/PxyUp/ng-virtual-table","commit_stats":null,"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PxyUp%2Fng-virtual-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PxyUp%2Fng-virtual-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PxyUp%2Fng-virtual-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PxyUp%2Fng-virtual-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PxyUp","download_url":"https://codeload.github.com/PxyUp/ng-virtual-table/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250754517,"owners_count":21481827,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular7","angular8","filter","rxjs","table","virtual-scroll"],"created_at":"2024-11-10T16:42:15.857Z","updated_at":"2025-04-25T04:30:26.729Z","avatar_url":"https://github.com/PxyUp.png","language":"TypeScript","funding_links":["https://github.com/sponsors/PxyUp"],"categories":[],"sub_categories":[],"readme":"## ng-virtual-table\n\nAngular 7/8 virtual scroll table with support dynamic component, draggable, filtering, sorting, paginations, resizable and custom config for each column\n\n[![Travis CI](https://img.shields.io/travis/PxyUp/ng-virtual-table/master.svg)](https://travis-ci.org/PxyUp/ng-virtual-table)\n[![Coverage](https://img.shields.io/codecov/c/github/PxyUp/ng-virtual-table.svg)](https://codecov.io/gh/PxyUp/ng-virtual-table)\n[![Npm](https://img.shields.io/npm/v/ng-virtual-table.svg)](https://badge.fury.io/js/ng-virtual-table)\n[![Npm Downloads](https://img.shields.io/npm/dt/ng-virtual-table.svg)](https://www.npmjs.com/package/ng-virtual-table)\n[![Licence](https://img.shields.io/npm/l/ng-virtual-table.svg)](https://github.com/PxyUp/ng-virtual-table/blob/master/LICENSE)\n\n## Install and Use\n\n| Angular | ng-virtual-table | NPM package                   |\n|---------|------------------|-------------------------------|\n| 8.x.x   | 2.x.x            | `ng-virtual-table@^2.0.0` |\n| 7.x.x   | 1.x.x            | `ng-virtual-table@^1.0.0` |\n\n```bash\nnpm i ng-virtual-table\nyarn add ng-virtual-table\n```\n\nMake sure you have:\n`@angular/cdk` `@angular/material` `@angular/forms`\n\n```typescript\nimport { NgVirtualTableModule } from 'ng-virtual-table';\n\nimports: [NgVirtualTableModule],\n```\n\n```html\n\u003cng-virtual-table [dataSource]=\"dataSource\"\u003e\u003c/ng-virtual-table\u003e\n```\n📺 [STACKBLITZ](https://stackblitz.com/edit/angular-i7mm4w)\n\n📺 [Demo](https://pxyup.github.io/ng-virtual-table)\n\n\n[![NPM](https://nodei.co/npm/ng-virtual-table.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/ng-virtual-table/)\n\n\n## Configuration\n\n```typescript\n\n  @Input() itemSize = 25;\n\n  @Input() dataSource: Observable\u003cArray\u003cVirtualTableItem | number | string | boolean\u003e\u003e;\n\n  @Input() filterPlaceholder = 'Filter';\n\n  @Input() dataSetEmptyPlaceholder = 'Data is empty';\n\n  @Input() config: VirtualTableConfig;\n\n  @Input() onRowClick: (item: VirtualTableItem) =\u003e void;\n```\n\n```typescript\nexport type sortColumn = 'asc' | 'desc' | null | false;\n\n\nexport interface VirtualPageChange {\n  pageSize?: number; // pagination size\n  pageIndex?: number; // page index \n}\n\nexport interface VirtualSortEffect {\n  sortColumn: string; // column for sort\n  sortType?: sortColumn; // type sort\n}\n\nexport interface VirtualTableColumn {\n  name?: string; // Label for field, if absent will be use key\n  key: string; // Uniq key for filed, \n  func?: (item: VirtualTableItem) =\u003e any; // function for get value from dataSource item\n  comp?: (a: any, b: any) =\u003e number; // function for compare two item, depend from `func` function\n  sort?: 'asc' | 'desc' | null | false;  // sort by default(support only one sort), false for disable\n  resizable?: boolean; // default true(if not set `true`)\n  draggable?: boolean; // default true (if not set `true`)\n  component?: VirtualTableColumnComponent | false; // default false (You class component must be part of entryComponents in yor Module!!!!!)\n}\n\nexport interface VirtualTableColumnComponent {\n  componentConstructor: Type\u003cany\u003e;\n  inputs?: Object; // default {}\n  outputs?: Object;\n}\n\nexport interface VirtualTablePaginator {\n  pageSize?: number; // default 10\n  pageSizeOptions?: Array\u003cnumber\u003e; // default [5, 10, 25, 100];\n  showFirstLastButtons?: boolean; //default false;\n}\n\nexport interface ResponseStreamWithSize {\n  stream: Array\u003cany\u003e; // stream for Server Side strategy\n  totalSize: number; // total size of stream\n}\n\nexport interface VirtualTableEffect {\n  filter?: string; // filter string\n  sort?: VirtualSortEffect; // sort effect\n  pagination?: VirtualPageChange; // pagination effect\n}\n\nexport interface VirtualTableConfig {\n  column?: Array\u003cVirtualTableColumn\u003e; // if config not provide will be auto generate column\n  header?: boolean; // default false\n  filter?: boolean; // default true\n  pagination?: VirtualTablePaginator | boolean; // default false\n  serverSide?: boolean; // default false;\n  serverSideResolver?: (effects: VirtualTableEffect) =\u003e Observable\u003cResponseStreamWithSize\u003e;\n}\n\n\n```\n\n## Example\n\n```typescript\nimport { VirtualTableConfig } from 'ng-virtual-table';\n\n  clickToItem(item: any) {\n    console.log(item);\n  }\n\n  dataSource = of(\n    Array(1000).fill(0).map((e) =\u003e ({\n      name: Math.random().toString(36).substring(7),\n      age: Math.round(Math.random() * 1000),\n    })),\n  );\n\n  dataSource1 = of(\n    Array(1000).fill(0).map((e) =\u003e ({\n      name: Math.random().toString(36).substring(7),\n      age: Math.round(Math.random() * 1000),\n      age2: Math.round(Math.random() * 1000),\n      label: {\n        type: Math.random().toString(36).substring(7),\n      },\n    })),\n  );\n\n  config: VirtualTableConfig = {\n    column: [\n      {\n        key: 'name',\n        name: 'Full name',\n        sort: false // disable sort\n      },\n      {\n        key: 'age',\n        name: 'Full Age',\n        sort: 'desc', // pre defined sort\n        component: {\n          componentConstructor: InfoComponent,\n          inputs: {\n            title: (e) =\u003e e.age,\n          },\n        },\n      },\n      {\n        key: 'label',\n        name: 'Full Label',\n        func: (e) =\u003e e.label.type,\n        comp: (a, b) =\u003e a.indexOf('5') - b.indexOf('5'), // here a and b (e) =\u003e e.label.type\n      },\n    ],\n  };\n\n  \n\n@Component({\n  selector: 'app-info',\n  templateUrl: './info.component.html',\n  styleUrls: ['./info.component.scss'],\n})\nexport class InfoComponent {\n  @Input() title: string;\n\n  constructor() {}\n}\n \n```\n\n```html\n\u003cng-virtual-table [dataSource]=\"dataSource\"\u003e\u003c/ng-virtual-table\u003e\n\n\u003cng-virtual-table [dataSource]=\"dataSource1\" [onRowClick]=\"clickToItem\" [config]=\"config\"\u003e\u003c/ng-virtual-table\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpxyup%2Fng-virtual-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpxyup%2Fng-virtual-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpxyup%2Fng-virtual-table/lists"}