Material Table in 20 Minutes (Up and Running)
Tags: angular, typescript
Published: 2020-05-09 15:26:13

The [Angular Material Table](https://material.angular.io/components/table/overview) 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](https://material.angular.io/guide/getting-started)

In App.module.ts add these imports:

```typescript
import { MatPaginatorModule } from '@angular/material/paginator'
import { MatTableModule } from '@angular/material/table'
```
In the imports section of App.module.ts add this:

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

**HTML**

```typescript
<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**
```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:

```typescript
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.

```json

{
  "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**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yz7475f5gp6b9b0ng1xn.png)

20 Minutes to auto paginated data displayed as a table. 

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

JWP2020 MatTable MaterialTable DataSource