Angular resuable table

README.md

This code appears to be an Angular template that defines a table component with some customization options.

The component is the main table component, and it expects the following inputs and outputs:

dataSource: It is likely a variable or property that represents the data source for the table. displayedColumns: It is likely a variable or property that specifies the columns to be displayed in the table. template: It is a reference to the element defined later in the code. This template is used to customize the rendering of the table cells. (paginateSizeOnChange): It is likely an event handler function that is triggered when the pagination size changes in the table. The element with the #templateRef reference defines a custom template for rendering the table cells. This template is used to apply different styles or formatting based on the column definition.

Inside the template, the variables value, colDef, element, and index are defined using the let syntax. These variables represent the current cell value, column definition, table element, and index respectively.

The element with [ngSwitch] directive is used to conditionally render different content based on the value of colDef.

When colDef is equal to 'name', the element is rendered with some custom styling, displaying the value. When colDef does not match any specified case (*ngSwitchDefault), the value is rendered as is without any additional styling. Overall, this code sets up a table component with customizable rendering using a template. It allows you to define different styles or formatting for specific columns, with the ability to handle pagination size changes.

Environment

Angular : 16
Angular Material : 16 

playground.component.html

 <app-table
    [dataSource]="datasource"
    [displayedColumns]="displayedColumns"
    [template]="templateRef"
    (paginateSizeOnChange)="paginateSizeOnChange($event)"
  ></app-table>


<ng-template
  #templateRef
  let-value
  let-colDef="colDef"
  let-element="element"
  let-index="index"
>
  <ng-container [ngSwitch]="colDef">
    <ng-container *ngSwitchCase="'name'">   <!-- You can customise any column by name here -->
      <spanstyle="border-radius: 4px; border: 1px solid salmon; padding: 2px">{{ value }}</span>
    </ng-container>
    <ng-container *ngSwitchDefault>{{ value }}</ng-container>
  </ng-container>
</ng-template>

playground.component.ts

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ComponentsModule } from '@components/components.module';
import { FormControl } from '@angular/forms';
import { MaterialModule } from '@material/material.module';
import { MatTableDataSource } from '@angular/material/table';
import { PageEvent } from '@angular/material/paginator';

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
  { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
  { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
  { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
  { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
  { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
  { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
  { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
  { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
  { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },
];

@Component({
  selector: 'app-playground',
  standalone: true,
  imports: [CommonModule, ComponentsModule, MaterialModule],
  templateUrl: './playground.component.html',
  styleUrls: ['./playground.component.scss'],
})
export class PlaygroundComponent implements OnInit {
  datasource = new MatTableDataSource();
  displayedColumns = ['position', 'name'];

  ngOnInit(): void {
    this.datasource.data = ELEMENT_DATA;
  }

  paginateSizeOnChange(value: PageEvent) {
    console.log(value); // Every page change option
  }
}

table.common.ts

export const PaginateOption = {
  pageSize: 15,
  pageSizeOptions: [5, 10, 15, 25, 50, 100],
} as const;

table.component.html

<div>
    <table mat-table [dataSource]="dataSource" matSort matSortActive="name" matSortDirection="asc" matSortDisableClear>
        <ng-container *ngFor="let colDef of displayedColumns; let sl = index" [matColumnDef]="colDef">
            <th mat-header-cell *matHeaderCellDef mat-sort-header [sortActionDescription]="colDef">
                <span>{{ colDef }}</span>
            </th>
            <td mat-cell *matCellDef="let element">
                <ng-container *ngTemplateOutlet="
            template;
            context: {
              $implicit: element[colDef],
              colDef: colDef,
              element: element,
              index: sl + 1
            }
          "></ng-container>
            </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
    </table>
    <div>
        <mat-paginator (page)="paginationSizeOnChange($event)" [length]="dataSource.data.length" [pageSizeOptions]="pagenateOption.pageSizeOptions" [pageSize]="pagenateOption.pageSize" pagination></mat-paginator>
    </div>
</div>

table.component.ts

import {
  Component,
  EventEmitter,
  Input,
  Output,
  TemplateRef,
  ViewChild,
} from '@angular/core';
import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { PaginateOption } from './table.common';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.scss'],
})
export class TableComponent {
  @Input({ required: true }) dataSource!: MatTableDataSource<any>;
  @Input() template!: TemplateRef<any>;
  @Input({ required: true }) displayedColumns!: Array<string>;

  @ViewChild(MatSort, { static: true }) sort!: MatSort;
  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;

  @Output() refresh: EventEmitter<any> = new EventEmitter();
  @Output() paginateSizeOnChange: EventEmitter<PageEvent> = new EventEmitter();

  protected pagenateOption = PaginateOption;

  ngAfterContentInit(): void {
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
  }

  paginationSizeOnChange($event: PageEvent) {
    this.paginateSizeOnChange.emit($event);
  }
}