Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/diprokon/ng-table-virtual-scroll
Virtual Scroll for Angular Material Table
https://github.com/diprokon/ng-table-virtual-scroll
Last synced: 3 months ago
JSON representation
Virtual Scroll for Angular Material Table
- Host: GitHub
- URL: https://github.com/diprokon/ng-table-virtual-scroll
- Owner: diprokon
- License: mit
- Created: 2019-08-28T14:44:28.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-03-31T10:29:34.000Z (11 months ago)
- Last Synced: 2024-11-03T14:40:06.630Z (3 months ago)
- Language: TypeScript
- Homepage: https://diprokon.github.io/ng-table-virtual-scroll
- Size: 2.99 MB
- Stars: 139
- Watchers: 5
- Forks: 42
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
- awesome-angular - ng-table-virtual-scroll - Virtual Scroll for Angular Material Table. (Table of contents / Third Party Components)
- fucking-awesome-angular - ng-table-virtual-scroll - Virtual Scroll for Angular Material Table. (Table of contents / Third Party Components)
- fucking-awesome-angular - ng-table-virtual-scroll - Virtual Scroll for Angular Material Table. (Table of contents / Third Party Components)
README
# Virtual Scroll for Angular Material Table
An Angular Directive, which allow to use [virtual scrolling](https://material.angular.io/cdk/scrolling) in [mat-table](https://material.angular.io/components/table)
[](https://diprokon.github.io/ng-table-virtual-scroll)
[](https://www.npmjs.com/package/ng-table-virtual-scroll)
[](https://github.com/diprokon/ng-table-virtual-scroll/actions/workflows/build-and-test.yml)
[](/LICENSE.txt)
## Table of Contents
- [Live Demo](https://diprokon.github.io/ng-table-virtual-scroll)
- [Installation](#installation)
- [Usage](#usage)
- [Development](#development)
- [Issues](#issues)
## Installation
**NPM**
```bash
$ 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`
```ts
import { TableVirtualScrollModule } from 'ng-table-virtual-scroll';
@NgModule({
imports: [
// ...
TableVirtualScrollModule
]
})
export class AppModule { }
```
**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**
### Configure the table
#### Data Source
The `TableVirtualScrollDataSource` extends the [`MatTableDataSource`](https://material.angular.io/components/table/api#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**
```ts
import { TableVirtualScrollDataSource } from 'ng-table-virtual-scroll';
@Component({...})
export class MyComponent {
dataSource = new TableVirtualScrollDataSource();
}
```
#### Directive
The `tvsItemSize` directive makes the magic
```html
...
```
Make sure, you set the height to the `` 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](https://github.com/diprokon/ng-table-virtual-scroll/issues).