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
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
Top comments (0)