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

1. Angular 13
2. 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:

1. Configure all tables configuration array in separate files/file
2. 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>