# ng-table-virtual-scroll

> Virtual scroll for for Angular Material Table

Latest version **1.6.1** (published 2024-03-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install ng-table-virtual-scroll
pnpm add ng-table-virtual-scroll
yarn add ng-table-virtual-scroll
bun add ng-table-virtual-scroll
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.6.1 |
| Published | 2024-03-31 |
| First published | 2019-09-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 192.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 147 |
| Author | Dmytro Prokhorov |
| Maintainers | diprokon |
| Keywords | angular, material, scroll, virtual scroll, table |

## Links

- npm: https://www.npmjs.com/package/ng-table-virtual-scroll
- Repository: https://github.com/diprokon/ng-table-virtual-scroll
- Issues: https://github.com/diprokon/ng-table-virtual-scroll/issues
- npm.io page: https://npm.io/package/ng-table-virtual-scroll

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.6.1 (latest) — 2024-03-31
- 1.6.0 — 2023-02-20
- 1.5.1 — 2023-02-18
- 1.5.0 — 2023-02-05
- 1.4.1 — 2022-07-23
- 1.4.0 — 2022-01-26
- 1.3.8 — 2021-08-08
- 1.3.7 — 2021-07-17
- 1.3.6 — 2021-04-23
- 1.3.5 — 2021-01-28
- 1.3.4 — 2020-10-30
- 1.3.3 — 2020-07-05
- 1.3.2 — 2020-05-24
- 1.3.1 — 2020-03-26
- 1.3.0 — 2020-03-26
- … 6 more at https://npm.io/package/ng-table-virtual-scroll/versions

## 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)

[![Demo](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://diprokon.github.io/ng-table-virtual-scroll)
[![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)
[![Build & Test](https://github.com/diprokon/ng-table-virtual-scroll/actions/workflows/build-and-test.yml/badge.svg?branch=master&event=push)](https://github.com/diprokon/ng-table-virtual-scroll/actions/workflows/build-and-test.yml)
[![License](https://img.shields.io/npm/l/express.svg?maxAge=2592000)](/LICENSE.txt)

## Table of Contents

- [Live Demo](https://diprokon.github.io/ng-table-virtual-scroll)
- [Installation](#installation)
- [Usage](#usage)
- [Development](#development)
- [Issues](#issues)

<a name="installation"/>

## 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.*           |


<a name="usage"/>

## 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
<cdk-virtual-scroll-viewport tvsItemSize="48" headerHeight="56" style="height: 400px;">
    <table mat-table [dataSource]="dataSource">
    ...
    </table>
</cdk-virtual-scroll-viewport>
```

Make sure, you set the height to the `<cdk-virtual-scroll-viewport>` 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).

---
_Source: https://npm.io/package/ng-table-virtual-scroll · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._