Material Table in 20 Minutes (Up and Running)

The Angular Material Table can be a quick and effective way to present your data. This article gets you up an running in 20 minutes.

Pre-Requisites

ng add @angular/material

In App.module.ts add these imports:

import { MatPaginatorModule } from '@angular/material/paginator'
import { MatTableModule } from '@angular/material/table'

In the imports section of App.module.ts add this:

imports: [
    AppRoutingModule,
    BrowserAnimationsModule,
    BrowserModule,
    MatPaginatorModule,
    MatTableModule,
  ],

HTML

<table mat-table  [dataSource]="dataSource">
  <ng-container matColumnDef="articles">
     <th mat-header-cell *matHeaderCellDef>Dev.to Articles</th>
     <td mat-cell *matCellDef="let article">
      <a appGrid [(href)]='article.url'> <label>{{article.title}}</label></a>
     </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
<mat-paginator 
      [length]="length"
      [pageSize]="size"
      [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>

Typescript

import { Component, OnInit, AfterViewInit, ViewChild } from "@angular/core";
import { Articles } from "src/assets/devArticles/articles.json";
import { MatTableDataSource } from "@angular/material/table";
import { MatPaginator } from "@angular/material/paginator";

@Component({
  selector: "app-dev-articles",
  templateUrl: "./dev-articles.component.html",
  styleUrls: ["./dev-articles.component.css"],
})
export class DevArticlesComponent implements OnInit, AfterViewInit {
  @ViewChild(MatPaginator) paginator;
  dataSource: MatTableDataSource<any>;
  displayedColumns;
  length;
  size;
  constructor() {}

  ngOnInit(): void {
    this.dataSource = new MatTableDataSource();
    this.dataSource.data = Articles;
    this.displayedColumns = ["articles"];
  }
  ngAfterViewInit() {
    this.setPaginatorConfig();
    this.setDataSourceConfig();
  }

  private setDataSourceConfig() {
    this.dataSource.data = Articles.sort(this.sorter);
    this.dataSource.paginator = this.paginator;
  }

  private setPaginatorConfig() {
    setTimeout(() => {
      this.length = this.dataSource.data.length;
      this.size = 10;
    }, 5);
  }

  sorter = (a, b) => {
    if (a.title > b.title) return 1;
    if (a.title < b.title) return -1;
    return 0;
  };
}

The content of the Articles as JSON

Notice that the DevArticlesClassComponent.ts above, has this import:

import { Articles } from "src/assets/devArticles/articles.json";

Create a file named articles.json (using the file path above) and put in content similar to this.

{
  "Articles": [{
      "title": "What does Healthy Software look like?",
      "url": "https://dev.to/jwp/what-does-healthy-software-look-like-ad2"
    },
    {
      "title": "Cypress Test Logging in 20 minutes",
      "url": "https://dev.to/jwp/cypress-test-logging-in-2020-minutes-bpk"
    }
  ]
} 

Result

20 Minutes to auto paginated data displayed as a table.

Next Up : How to change the styling of each row.

JWP2020 MatTable MaterialTable DataSource