Angular Material Enhanced Table with less boilerplate 
- Abstraction of html elements|typescript boilerplate needed for creating a table
- Easy and precise column mapping with class decorators
- Advanced column filtering
- Loading / Empty Data Templates
- All MatTable features included (Pagination, Sorting, Search...)
-
Install using npm
npm i mat-advanced-table
verboseName: string The column label to be displayed
key: string; the column key: By default it's the same as the attribute name
order: number The displayed order of the column
propertyType: "String" | "Date" | "Number" | "Object" The popriety primitive type collected from the ProprietyDescriptor and can be overriden by setting a value
canSort: boolean Whether this column is sortable
sortBy: "asc" | "desc" The default sorting order
visible: boolean Whether the column is visible by default
format: string | false Date|number format as in Angular format pipe
sortByAccessor: (instance) => any Callback used for sorting the complex object
propertyAccessor: (obj: any, thisRef?) => any Callback used for accessing complex object primitives
eg:
@Column({ propertyAccessor: (obj:UserModel, thisRef) => obj.role.name })
rolename :string@Input() columns: ColumnModel[] (Required) : The table column array definition. it comes from the @Column decorator
@Input() data: any[] (Optional) : The data to be displayed
@Input() loading: boolean (Optional) : Whether data is loading
@Input() legend: TemplateRef<any> (Optional) : The legend template
@Input() noDataTemplate: TemplateRef<any> (Optional) : The empty data template
@Input() loadingTemplate: TemplateRef<any> (Optional) : The loading data template
@Input() selection: SelectionModel (Optional) : The table initial selection
@Input() rowNgClassFun: (item: any) => string (Optional) : A helper function to returns a row dependant class string
@Input() options:NgxMatTableOptions (Optional) : The table options with it's defaults values : NgxMatTableOptionsDefaults
| Option | Definition | Type | Default |
|---|---|---|---|
| minCellWidth | The table cell's min-width style attribute in px | number | 80 |
| maxCellWidth | The table cell's max-width style attribute in px | number | 200 |
| classList | a list of classes to add to the table (eg: ['table-responsive','compact']... | string[] | [] |
| title | The table header title | string | null |
| styles: NgxMatTableStyleOptions | The table custom styles attributes | { denseDisplay: false, selectedRowClass: "ngx-mat-selected", tableHeaderClass: "ngx-thead", tableRowHeight: "1rem", }, |
|
| actions | Whether to show the actions column (Template is issued with the MatCellTemplate Directive) | boolean | false |
| actionsLabel | The actions column header label | string | Actions |
| paging | Whether to show the MatPaginator | boolean | true |
| search | Whether to show the Search bar and activate the advanced filter | boolean | true |
| selection | whether to show the selection column | boolean | false |
| placeholder | Empty value placeholder | string | N/A |
| emptyDataText | The no data message to be displayed under the table columns | string | No Data available |
| loadingText | The loading text to be displayed when data is loading | string | Please wait |
@Input('matATCellTemplate') name:string (Required) : The column cell template name and it must be present in the @Table definition
import the MatAdvancedTableModule to the modules you are using it in
import { MatAdvancedTableModule } from "mat-table-advanced";
@NgModule({
declarations: [AppComponent],
imports: [CommonModule, MatAdvancedTableModule],
})
export class AppModule {}Use @Table and @Column decorators to define table columns
export enum UserRoles {
Moderator,
Guest,
}
@Table
export class UserModel {
@Column({
verboseName: "User ID",
canSort: true,
sortBy: "desc",
})
id: number;
@Column({ verboseName: "User name", canSort: true })
username: string;
@Column({ verboseName: "Role", canSort: true })
role: UserRoles;
}then load the columns in your host component ts file
import {MatAdvancedTableService} from 'mat-advanced-table';
constructor(
private tableService: MatAdvancedTableService
) {}
users$: Observable<UserModel[]>;
userModelColumns: ColumnModel[];
ngOnInit() {
this.users$ = of([
userId: 1,
username: "admin",
displayName: "Admin ",
isAdmin: true,
role: UserRoles.Moderator,
])
this.userModelColumns = this.tableService.getColumnsOfType(
UserModel
);
}after that you're ready to use it in the component template as
<mat-table-advanced
[columns]="userModelColumns"
[data]="users$ | async"
></mat-table-advanced>CAUTION: Use actions as the template name to allow the table to bind correctly to the actions column, if another column in your defined table contains the same key, pray to change it in the ColumnModel.key option.
@Component({
selector: "app-component",
template: `<mat-advanced-table
[data]="data"
[columns]="columns"
[options]="{ actions: true }"
>
<ng-template [matATCellTemplate]="'actions'">
<button mat-button (click)="deleteUser($event)">delete</button>
</ng-template>
</mat-advanced-table>`,
styles: [``],
})
export class AppComponent implements OnInit {
constructor(private matAdvancedService: MatAdvancedTableService) {}
columns;
data;
ngOnInit(): void {
this.columns = this.matAdvancedService.getColumnsOfType(MockClass);
this.data = [
{
// some mock data
},
];
}
deleteUser(user) {
console.log("User Deleted", user);
}
}@Component({
selector: "app-component",
template: `<mat-advanced-table
[data]="data"
[columns]="columns"
[loadingTemplate]="loadingTmp"
[loading]="isLoading"
>
<ng-template #loadingTmp>
<your-custom-loader [text]="'Please wait...'"></your-custom-loader>
</ng-template>
</mat-advanced-table>`,
styles: [``],
})
export class AppComponent implements OnInit {
constructor(private matAdvancedService: MatAdvancedTableService) {}
columns;
data;
isLoading = false;
ngOnInit(): void {
this.columns = this.matAdvancedService.getColumnsOfType(MockClass);
this.loadData();
}
loadData(user) {
this.isLoading = true;
setTimeout(() => {
this.data = [
{
// some mock data
},
];
this.isLoading = false;
}, 5000);
}
}MIT