{"id":13808777,"url":"https://github.com/diprokon/ng-table-virtual-scroll","last_synced_at":"2025-05-14T03:31:25.179Z","repository":{"id":35101098,"uuid":"204954966","full_name":"diprokon/ng-table-virtual-scroll","owner":"diprokon","description":"Virtual Scroll for Angular Material Table","archived":false,"fork":false,"pushed_at":"2024-03-31T10:29:34.000Z","size":3132,"stargazers_count":139,"open_issues_count":25,"forks_count":42,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-11-03T14:40:06.630Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://diprokon.github.io/ng-table-virtual-scroll","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/diprokon.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-08-28T14:44:28.000Z","updated_at":"2024-10-24T18:30:02.000Z","dependencies_parsed_at":"2024-06-18T13:57:01.748Z","dependency_job_id":"ffcd5446-a07c-455c-ba2e-7caed126c04b","html_url":"https://github.com/diprokon/ng-table-virtual-scroll","commit_stats":{"total_commits":96,"total_committers":9,"mean_commits":"10.666666666666666","dds":"0.22916666666666663","last_synced_commit":"003365dc62b81a2c4ae6737fd8fac9e22573cbed"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diprokon%2Fng-table-virtual-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diprokon%2Fng-table-virtual-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diprokon%2Fng-table-virtual-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diprokon%2Fng-table-virtual-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/diprokon","download_url":"https://codeload.github.com/diprokon/ng-table-virtual-scroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225273271,"owners_count":17448076,"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":[],"created_at":"2024-08-04T01:01:51.619Z","updated_at":"2024-11-19T00:31:04.474Z","avatar_url":"https://github.com/diprokon.png","language":"TypeScript","funding_links":[],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"readme":"# Virtual Scroll for Angular Material Table\n\nAn Angular Directive, which allow to use [virtual scrolling](https://material.angular.io/cdk/scrolling) in [mat-table](https://material.angular.io/components/table)\n\n[![Demo](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://diprokon.github.io/ng-table-virtual-scroll)\n[![npm](https://img.shields.io/npm/v/ng-table-virtual-scroll.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/ng-table-virtual-scroll)\n[![Build \u0026 Test](https://github.com/diprokon/ng-table-virtual-scroll/actions/workflows/build-and-test.yml/badge.svg?branch=master\u0026event=push)](https://github.com/diprokon/ng-table-virtual-scroll/actions/workflows/build-and-test.yml)\n[![License](https://img.shields.io/npm/l/express.svg?maxAge=2592000)](/LICENSE.txt)\n\n## Table of Contents\n\n- [Live Demo](https://diprokon.github.io/ng-table-virtual-scroll)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Development](#development)\n- [Issues](#issues)\n\n\u003ca name=\"installation\"/\u003e\n\n## Installation\n\n**NPM**\n\n```bash\n$ npm install -save ng-table-virtual-scroll\n```\n\n_**Version compatibility**_\n\n| Angular version | Library version |\n|-----------------|-----------------|\n| \\\u003e= 15          | latest          |\n| 13 - 14         | 1.5.*           |\n| \u003c= 12           | 1.3.*           |\n\n\n\u003ca name=\"usage\"/\u003e\n\n## Usage\n\n### Import `TableVirtualScrollModule`\n\n```ts\nimport { TableVirtualScrollModule } from 'ng-table-virtual-scroll';\n\n@NgModule({\n  imports: [\n    // ...\n    TableVirtualScrollModule\n  ]\n})\nexport class AppModule { }\n```\n**Note: you need to install and configure [virtual scrolling](https://material.angular.io/cdk/scrolling) (ScrollingModule) and [mat-table](https://material.angular.io/components/table) (MatTableModule) before. TableVirtualScroll only make them work together properly**\n\n### Configure the table\n\n#### Data Source\n\nThe `TableVirtualScrollDataSource` extends the [`MatTableDataSource`](https://material.angular.io/components/table/api#MatTableDataSource) and must be \nused as the data source for the `mat-table` (`CdkTableVirtualScrollDataSource` for `cdk-table`)\n\n**Note: without `TableVirtualScrollDataSource` the directive won't work**\n\n```ts\nimport { TableVirtualScrollDataSource } from 'ng-table-virtual-scroll';\n\n@Component({...})\nexport class MyComponent {\n\n  dataSource = new TableVirtualScrollDataSource();\n\n}\n```\n\n#### Directive\nThe `tvsItemSize` directive makes the magic\n\n```html\n\u003ccdk-virtual-scroll-viewport tvsItemSize=\"48\" headerHeight=\"56\" style=\"height: 400px;\"\u003e\n    \u003ctable mat-table [dataSource]=\"dataSource\"\u003e\n    ...\n    \u003c/table\u003e\n\u003c/cdk-virtual-scroll-viewport\u003e\n```\n\nMake sure, you set the height to the `\u003ccdk-virtual-scroll-viewport\u003e` container\n\nAlso, you can provide additional properties:\n\n`tvsItemSize` -\u003e the row height in px (default: 48)\n\n`headerHeight` -\u003e the header row height in px (default: 56)\n\n`footerHeight` -\u003e the footer row height in px (default: 48)\n\n`headerEnabled` -\u003e is the header row in the table (default: true)\n\n`footerEnabled` -\u003e is the footer row in the table (default: false)\n\n`bufferMultiplier` -\u003e the size of rendered buffer. The `bufferMultiplier * visibleRowsCount` number of rows will be rendered before and after visible part of the table.\n\n#### CdkTable\n\n`cdk-table` from `CdkTableModule` is also supported. Just use `CdkTableVirtualScrollDataSource` as datasource\n\n## Issues\n\nIf you identify any errors in the library, or have an idea for an improvement, please open an [issue](https://github.com/diprokon/ng-table-virtual-scroll/issues).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiprokon%2Fng-table-virtual-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdiprokon%2Fng-table-virtual-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiprokon%2Fng-table-virtual-scroll/lists"}