mat-table-virtual-scroll
v0.0.5
Published
Virtual scroll table based on angular material, with sticky columns, filtering and sorting.
Downloads
18
Maintainers
Readme
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
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.