Mat Table

Introduction

Mat Table is a component in Angular Material that is used to display tabular data. It provides a lot of features out-of-the-box, such as sorting, filtering, pagination, and selection. Mat Table is highly customizable and can handle large datasets efficiently.

Features

Some of the key features of Mat Table are:

• Sorting: click on a column header to sort the data by that column in ascending or descending order.
• Filtering: filter the data by typing into an input field above the table.
• Pagination: limit the number of rows displayed on each page and navigate to different pages.
• Selection: select one or multiple rows in the table.
• Customization: Mat Table is highly customizable and can be easily styled to fit your application's look and feel.
• Efficiency: Mat Table is optimized for displaying large datasets efficiently.

Usage

To use Mat Table in your Angular application, you first need to include the Angular Material library in your project:

npm install @angular/material

You can then import Mat Table in your component:

import { MatTableModule } from '@angular/material/table';

@NgModule({
  imports: [MatTableModule]
})
export class MyModule { }

In your HTML template, you can use the mat-table element to define your table:

<table mat-table [dataSource]="myData">
  <!-- Define your columns here -->
</table>

Example

Here is an example of how to use Mat Table in your Angular application. This example displays a list of users and allows you to sort, filter, and select multiple rows:

<!-- app.component.ts -->
import { Component } from '@angular/core';

export interface User {
  name: string;
  email: string;
  age: number;
}

@Component({
  selector: 'my-app',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  displayedColumns: string[] = ['name', 'email', 'age'];
  dataSource: User[] = [
    { name: 'John Doe', email: 'john@example.com', age: 30 },
    { name: 'Jane Smith', email: 'jane@example.com', age: 25 },
    { name: 'Bob Johnson', email: 'bob@example.com', age: 45 }
  ];
  selectedRows: User[] = [];

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }
}

<!-- app.component.html -->
<input type="text" (input)="applyFilter($event)" placeholder="Filter">
<table mat-table [dataSource]="dataSource" (selectionChange)="selectedRows = $event.source.selected">
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>Name</th>
    <td mat-cell *matCellDef="let user">{{ user.name }}</td>
  </ng-container>
  <ng-container matColumnDef="email">
    <th mat-header-cell *matHeaderCellDef>Email</th>
    <td mat-cell *matCellDef="let user">{{ user.email }}</td>
  </ng-container>
  <ng-container matColumnDef="age">
    <th mat-header-cell *matHeaderCellDef>Age</th>
    <td mat-cell *matCellDef="let user">{{ user.age }}</td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;" [class.selected]="selectedRows.includes(row)"></tr>
</table>