Angular Tutorial: Data Table (MatTable)

Welcome back to CodeYourCraft! Today, we're going to dive into one of the most useful Angular libraries for building data-driven applications: MatTable from Angular Material. By the end of this tutorial, you'll be able to create flexible, responsive, and feature-rich data tables.

Let's start by understanding the importance of data tables in web development.

📝 Why Use Data Tables?

Data tables are crucial when displaying large amounts of data in a structured manner. They help users navigate through the data efficiently, making it easier to understand and analyze.

🎯 Getting Started with MatTable

To get started, you'll need to install the Angular Material library. If you haven't already, you can do so using the Angular CLI:

bash

ng add @angular/material

Once installed, you can import the MatTableModule and related modules in your main AppModule:

typescript

import { MatTableModule } from '@angular/material/table';
// ...
@NgModule({
  imports: [
    // ...
    MatTableModule,
    // ...
  ]
})
export class AppModule { }

📝 Creating a MatTable

Creating a MatTable is simple. First, let's create a component for our data table:

bash

ng generate component data-table

Now, let's create a table structure in the data-table.component.html:

html

<table mat-table [dataSource]="dataSource">
  <!-- Column Definitions -->
  <ng-container matColumnDef="name">
    Name
  </ng-container>
  <ng-container matColumnDef="position">
    Position
  </ng-container>

  <!-- Row Definitions -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; index=index" [ngClass]="getStatusClass(row)">
    <td mat-cell *matCellDef="let element">{{element.name}}</td>
    <td mat-cell *matCellDef="let element">{{element.position}}</td>
  </tr>

  <!-- Footer Definitions -->
  <tr mat-footer-row *matFooterRowDef="footers"></tr>
</table>

📝 Data Source and Column Definitions

To populate our table, we'll need a data source and column definitions. In the component's TypeScript file, create a dataSource property and define the displayedColumns:

typescript

import { Component, ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-data-table',
  templateUrl: './data-table.component.html',
  styleUrls: ['./data-table.component.css']
})
export class DataTableComponent {
  displayedColumns = ['name', 'position'];
  dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor() { }

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

  getStatusClass(element: Element) {
    return element.position === 'Active' ? 'green' : 'red';
  }
}

💡 Pro Tip:

Adding pagination and sorting to our table is straightforward. Just add the MatPaginator and MatSort directives to the table element:

html

<table mat-table [dataSource]="dataSource" matSort matPaginator>
  <!-- ... -->
</table>

🎯 Advanced MatTable Examples

To make our table more interactive, let's add editing and deleting functionality. We'll need to create edit and delete methods in the TypeScript file:

typescript

editElement(element: Element) {
  // Edit logic goes here
}

deleteElement(element: Element) {
  // Delete logic goes here
}

Next, we'll update the table structure to include edit and delete buttons:

html

<td mat-cell *matCellDef="let element; let i = index" [attr.id]="i">
  <button mat-raised-button (click)="editElement(elements[i])">Edit</button>
  <button mat-raised-button color="warn" (click)="deleteElement(elements[i])">Delete</button>
  {{element.name}}
</td>

📝 Wrapping Up

Congratulations! You've learned the basics of using MatTable in Angular. You now have a solid foundation for building data-driven applications using Angular Material.

In the next tutorial, we'll dive deeper into advanced features like filtering, grouping, and customizing MatTable. Until then, keep practicing, and happy coding! 🥳