Let’s talk about how to use angular Material to make statistical tables

Use angular Material to make statistical tables.

Install Angular Material, component development tool (CDK) and Angular animation library, and run the code schematic

ng add @angular/material

table schematic to create a component that can render a preset sortable , Angular Material for pageable data sources. [Related tutorial recommendation: "angular tutorial"]

ng generate @angular/material:table texe1

and then modify it based on this.

The html file of the component

<div class="mat-elevation-z8">
  <table mat-table class="full-width-table" matSort aria-label="Elements">
    <!-- Id Column -->
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>serial number</th>
      <td mat-cell *matCellDef="let row">{{row.id}}</td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> rock and soil name</th>
      <td mat-cell *matCellDef="let row">{{row.name}}</td>
    </ng-container>

    <!-- num1 Column -->
    <ng-container matColumnDef="num1">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> expected quantity</th>
      <td mat-cell *matCellDef="let row">{{row.num1}}</td>
    </ng-container>

    <!-- num2 Column -->
    <ng-container matColumnDef="num2">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> current number</th>
      <td mat-cell *matCellDef="let row">{{row.num2}}</td>
    </ng-container>



    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

  <!-- Control the display length of table data-->
  <mat-paginator #paginator
      [length]="dataSource?.data?.length"
      [pageIndex]="0"
      [pageSize]="10"
      [pageSizeOptions]="[5, 10, 17]"
      aria-label="Select page">
  </mat-paginator>
</div>

The component's texe1-datasource.ts file

import { DataSource } from '@angular/cdk/collections';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { map } from 'rxjs/operators';
import { Observable, of as observableOf, merge } from 'rxjs';

// TODO: Replace this with your own data model type
export interface Texe1Item {
  name: string;
  id: number;
  num1: number;
  num2: number;
}

// TODO: replace this with real data from your application
const EXAMPLE_DATA: Texe1Item[] = [
  {id: 1, name: 'silty clay', num1:1000, num2:100,},
  {id: 2, name: 'silty silty clay', num1:1000, num2:100,},
  {id: 3, name: 'Clay', num1:1000, num2:100,},
  {id: 4, name: 'Clayy silt', num1:1000, num2:100,},
  {id: 5, name: 'silty clay', num1:1000, num2:100,},
  {id: 6, name: 'Breccia (breccia)', num1:1000, num2:100,},
  {id: 7, name: '中沙', num1:1000, num2:1000,},
  {id: 8, name: 'Organic soil', num1:1000, num2:100,},
  {id: 9, name: 'Peat soil A', num1:1000, num2:100,},
  {id: 10, name: 'Peat soil B', num1:1000, num2:100,},
  {id: 11, name: 'Sandy silt', num1:1000, num2:100,},
  {id: 12, name: 'silt sand', num1:1000, num2:100,},
  {id: 13, name: 'fine sand', num1:1000, num2:100,},
  {id: 14, name: 'coarse sand', num1:1000, num2:100,},
  {id: 15, name: 'Gravel', num1:1000, num2:100,},
  {id: 16, name: 'Pebble (gravel)', num1:1000, num2:100,},
  {id: 17, name: 'Boulder (boulder)', num1:1000, num2:100,},

];

/**
 * Data source for the Texe1 view. This class should
 * encapsulate all logic for fetching and manipulating the displayed data
 * (including sorting, pagination, and filtering).
 */
export class Texe1DataSource extends DataSource<Texe1Item> {
  data: Texe1Item[] = EXAMPLE_DATA;
  paginator: MatPaginator | undefined;
  sort: MatSort | undefined;

  constructor() {
    super();
  }

  /**
   * Connect this data source to the table. The table will only update when
   * the returned stream emits new items.
   * @returns A stream of the items to be rendered.
   */
  connect(): Observable<Texe1Item[]> {
    if (this.paginator && this.sort) {
      // Combine everything that affects the rendered data into one update
      // stream for the data-table to consume.
      return merge(observableOf(this.data), this.paginator.page, this.sort.sortChange)
        .pipe(map(() => {
          return this.getPagedData(this.getSortedData([...this.data ]));
        }));
    } else {
      throw Error('Please set the paginator and sort on the data source before connecting.');
    }
  }

  /**
   * Called when the table is being destroyed. Use this function, to clean up
   * any open connections or free any held resources that were set up during connect.
   */
  disconnect(): void {}

  /**
   * Paginate the data (client-side). If you're using server-side pagination,
   * this would be replaced by requesting the appropriate data from the server.
   */
  private getPagedData(data: Texe1Item[]): Texe1Item[] {
    if (this.paginator) {
      const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
      return data.splice(startIndex, this.paginator.pageSize);
    } else {
      return data;
    }
  }

  /**
   * Sort the data (client-side). If you're using server-side sorting,
   * this would be replaced by requesting the appropriate data from the server.
   */
  private getSortedData(data: Texe1Item[]): Texe1Item[] {
    if (!this.sort || !this.sort.active || this.sort.direction === '') {
      return data;
    }

    return data.sort((a, b) => {
      const isAsc = this.sort?.direction === 'asc';
      switch (this.sort?.active) {
        case 'name': return compare(a.name, b.name, isAsc);
        case 'id': return compare(+a.id, +b.id, isAsc);
        default: return 0;
      }
    });
  }
}

/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
function compare(a: string | number, b: string | number, isAsc: boolean): number {
  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}

The component's texe1.component.ts file

import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTable } from '@angular/material/table';
import { Texe1DataSource, Texe1Item } from './texe1-datasource';

@Component({
  selector: 'app-texe1',
  templateUrl: './texe1.component.html',
  styleUrls: ['./texe1.component.css']
})
export class Texe1Component implements AfterViewInit {
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatSort) sort!: MatSort;
  @ViewChild(MatTable) table!: MatTable<Texe1Item>;
  dataSource: Texe1DataSource;

  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
  displayedColumns = ['id', 'name','num1','num2'];

  constructor() {
    this.dataSource = new Texe1DataSource();
  }

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

Finally, it is displayed in the app.component.html file.

<app-texe1></app-texe1>

Rendering: