DEV Community 👩‍💻👨‍💻

John Peters
John Peters

Posted on • Updated on

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.


ng add @angular/material

In App.module.ts add these imports:

import { MatPaginatorModule } from '@angular/material/paginator'
import { MatTableModule } from '@angular/material/table'
Enter fullscreen mode Exit fullscreen mode

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

imports: [
Enter fullscreen mode Exit fullscreen mode


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


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";

  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>;
  constructor() {}

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

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

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

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

Enter fullscreen mode Exit fullscreen mode

The content of the Articles as JSON

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

import { Articles } from "src/assets/devArticles/articles.json";
Enter fullscreen mode Exit fullscreen mode

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": ""
      "title": "Cypress Test Logging in 20 minutes",
      "url": ""
Enter fullscreen mode Exit fullscreen mode

Alt Text

20 Minutes to auto paginated data displayed as a table.

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

JWP2020 MatTable MaterialTable DataSource

Top comments (0)

Every Week

We have a Welcome Thread where we invite members to tell us a bit about themselves. Join the conversation with us!