Mat Table Virtual Scroll

Virtual scroll table based on angular material, with sticky columns, filtering and sorting.

Getting Started

Install

run npm install mat-table-virtual-scroll

Import module

import { TableModule } from "mat-table-virtual-scroll";
@NgModule({
  imports: [MaterialModule, CommonModule, RouterModule, TableModule],
  declarations: components,
  exports: [TableModule, MaterialModule],
})
export class ComponentsModule {}

Simple usage

<mat-virtual-table [rows]="rows"></mat-virtual-table>

*rows will be array of json object*

rows = {
  age: 27,
  id: 0,
  name: "name0",
};

Column titles

<mat-virtual-table [rows]="rows" [columnsDef]="columns"></mat-virtual-table>

*columns will be array of json object*

columns = {
  field: name,
  title: Name,
};

field will be key from rows jsonArray.

title will be Header for columns.

Special cells

<mat-virtual-table [rows]="rows" [columnsDef]="columns">
  <ng-template pCellDef column="name" let-row="row">
    <b>{{row.name}}</b>
  </ng-template>
</mat-virtual-table>

Pagination

Set paginator true to add paginator.

<mat-virtual-table [rows]="rows" [paginator]="true"></mat-virtual-table>

Hide row

Concealing specific rows based on a given condition allows for more focused data presentation and analysis.

<mat-virtual-table [rows]="rows" [columnsDef]="columns" [hiddenData]="name" [hiddenValue]="name0"></mat-virtual-table>

Example

StackBlitz Example

Inputs

@Input() rows; // table rows.
@Input() columnsDef; // columns definitions. each column it could be define title, isSortable, isFilterable, and width. default width is calculated by max value length.
@Input() isFilterable = false; // false by default, and filter all columns, Unless otherwise specified in the columnsDef.
@Input() filterPlaceholder = 'Filter';
@Input() isResizable = true; // true by default, rtl support. be aware that there is performace issue without build with production mode.
@Input() itemSize = 47;
@Input() headerSize = 56;
@Input() pageSize = 50;
@Input() paginator: boolean;
@Input() isDisplayingRowsEmptyMessage = false; // false by default, support a centered message when there is no row.
@Input() rowsEmptyMessage = 'No records found.';
@Input() hiddenData = ''; // Name of column which has to be compared to value.
@Input() hiddenValue= ''; // Value to compare with columns data.