1.0.0 • Published 2 years ago
generic-material-table v1.0.0
Generic Angular Material Table
This is library for generic table in Angular which using Angular Material UI library.One of the most important benefits of use, is time efficiency when we need tables of data in frontend
Requirements
- Angular 13
- Angular Material 13
How to use ?
First of all, we need to import GenericMaterialTableModule inside app.module
import {NgModule} from "@angular/core";
import {GenericMaterialTableModule} from "./generic-material-table.module";
@NgModule({
imports: [GenericMaterialTableModule]
})
After this we need to configure out table columns. That process can be done in two ways:
- Configure all tables configuration array in separate files/file
- Configure table inside component
The first way
Create file,for example: src/app/configuration/table/config.ts
import { Column } from "./Column";
// Using for example
interface Column {
//Name for material column
name: string;
// The name which will displayed in column header
displayedName: string;
//Value of cell =>
// Example - if we have data object inside cell {id:5,person:{firstName:'Alex'}}
//and we want to display firstName of person this 'value' property should look like
// person.firstName
value: string;
//If we want to just display some value of property inside table that is GENERIC type,but if we want to display some
//custom template or something else inside table that is CUSTOM type
columnType: columnType;
templateRef?: TemplateRef<any>;
}
type columnType = "GENERIC" | "CUSTOM";
export let EXAMPLE_TABLE_CONFIG: Column[] = [
{
name: "firstName",
displayedName: "First name",
value: "person.firstName",
columnType: "GENERIC",
},
{
name: "lastName",
displayedName: "Last name",
value: "person.lastName",
columnType: "GENERIC",
},
{
name: "username",
displayedName: "Username",
value: "username",
columnType: "GENERIC",
},
];
Import that config inside our component where we want to render generic table
import { Component, OnInit } from "@angular/core";
@Component({
selector: "example-overview",
templateUrl: "./example.component.html",
styleUrls: ["./example.component.css"],
})
export class ExampleComponent implements OnInit {
exampleTableData = [
{ username: "admin", person: { firstName: "Mark", lastName: "Klug" } },
{ username: "user1", person: { firstName: "John", lastName: "Klug" } },
{ username: "user2", person: { firstName: "Oliver", lastName: "Klug" } },
];
tableConfig = EXAMPLE_TABLE_CONFIG;
}
<generic-material-table
[dataSource]="exampleTableData"
[displayedColumns]="tableConfig"
></generic-material-table>
Advanced concepts
Custom cell inside generic table
If we want to put for example buttons for some actions in previous example this is the way
import {
AfterViewChecked,
AfterViewInit,
Component,
OnInit,
TemplateRef,
ViewChild,
} from "@angular/core";
@Component({
selector: "example-overview",
templateUrl: "./example.component.html",
styleUrls: ["./example.component.css"],
})
export class ExampleComponent
implements OnInit, AfterViewInit, AfterViewChecked
{
@ViewChild("optionBtnsTemplateRef") optionBtnsTemplateRef!: TemplateRef<any>;
exampleTableData = [
{ username: "admin", person: { firstName: "Mark", lastName: "Klug" } },
{ username: "user1", person: { firstName: "John", lastName: "Klug" } },
{ username: "user2", person: { firstName: "Oliver", lastName: "Klug" } },
];
tableConfig = EXAMPLE_TABLE_CONFIG;
constructor(private cdRef: ChangeDetectorRef) {}
ngAfterViewInit(): void {
this.tableConfig = [
...this.tableConfig,
{
name: "optionButtons",
displayedName: "Options",
value: "",
columnType: "CUSTOM",
templateRef: this.optionBtnsTemplateRef,
},
];
}
ngAfterViewChecked(): void {
this.cdRef.detectChanges();
}
}
<generic-material-table
[dataSource]="exampleTableData"
[displayedColumns]="tableConfig"
>
<ng-template #optionBtnsTemplateRef>
<button mat-icon-button color="primary">
<mat-icon>visibility</mat-icon>
</button>
</ng-template>
</generic-material-table>
And one more option..
If you want to use data object of table you can do it in next way
<generic-material-table
[dataSource]="exampleTableData"
[displayedColumns]="tableConfig"
>
<ng-template #optionBtnsTemplateRef let-element>
<button mat-icon-button color="primary">
<mat-icon>visibility</mat-icon>
</button>
<h3>{{element.username}}</h3>
</ng-template>
</generic-material-table>