mat-virtual-table v9.0.2
Virtual scroll angular material table
Virtual scroll table based on angular material, with sticky columns, filtering ,sorting and resizing columns.
Getting Started
Install
run npm i mat-virtual-table
Import module
import {TableModule} from 'mat-virtual-table';
@NgModule({
imports: [
FormsModule,
ReactiveFormsModule,
MaterialModule,
CommonModule,
FlexLayoutModule,
RouterModule,
TableModule,
],
declarations: components,
exports: [TableModule, MaterialModule, FlexLayoutModule].concat(components),
})
export class ComponentsModule { }
Simple usage
<mat-virtual-table [rows]="rows">
Column titles
<mat-virtual-table [rows]="rows" [columnsDef]="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>
Resizing columns
resize column with rtl support.
Pagination
Set paginator true to add paginator.
<mat-virtual-table [rows]="rows" [paginator]="true">
</mat-virtual-table>
to custom lables, use CustomMatPaginatorIntl
:
export class CustomMatPaginatorIntl extends MatPaginatorIntl {
nextPageLabel = 'הבא';
previousPageLabel = 'קודם';
getRangeLabel = (page, pageSize, length) => {
if (length === 0 || pageSize === 0) {
return '0 מתוך ' + length;
}
length = Math.max(length, 0);
const startIndex = page * pageSize;
const endIndex = startIndex < length ?
Math.min(startIndex + pageSize, length) :
startIndex + pageSize;
return startIndex + 1 + ' - ' + endIndex + ' מתוך ' + length;
};
}
Api
@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 = true; // true 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;
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago