Angular Material Table

지난 포스트에 예고했던 Material Table에 대해 알아보겠습니다.

0. Import MatTableModule

이제는 익숙한 과정이죠?

Material Table을 사용하기 위해서 Module을 추가합니다.

App.module.ts에 MatTableModule을 Import 합니다.

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

1. mat-table 추가

이제 화면(Template)에 테이블을 추가합니다.

저는 budget.component.html에 넣었습니다.

<mat-table [dataSource]="dataSource">
</mat-table>

dataSource에 Property Binding 보이시죠?

mat-table에서 사용할 데이터에 TypeScript 변수를 넣은거죠.

2. dataSource 추가

mat-table에 바인딩된 데이터를 추가해보겠습니다.

budget.component.ts파일에 data를 추가합니다.

import { MatTableDataSource } from '@angular/material';

@Component({
    ...
})
export class BudgetComponent implements OnInit{
    ...
    consumptions = [{
        amount: 12000,
        desc: "food"
    },{
        amount: 10000,
        desc: "beverage"
    },{
        amount: 12000,
        desc: "dissert"
    }];
    dataSource = new MatTableDataSource(this.consumptions);
    ...
}

MatTableDataSource 모듈이 필요합니다.

테이블에 보여줄 데이터를 Array 형태로 만들구요.

MatTableDataSource 객체를 생성하여 dataSource에 넣어줍니다.

그러면 mat-table과 바인딩될 준비가 끝납니다.

3. Column 정의

테이블의 Column Template을 정의합니다.

어느 제목에 어느 데이터를 넣을지를 의미합니다.

mat-header-cell 에는 제목이 들어가구요.

mat-cell 에는 어떤 데이터를 보여줄지 넣습니다.

저는 아래와 같이 정의하였습니다.

consumption의 amount와 desc를 두 개 column으로 보여줍니다.

<mat-table [dataSource]="dataSource">
  <!-- Amount Column -->
  <ng-container matColumnDef="amount">
    <mat-header-cell *matHeaderCellDef> Amount </mat-header-cell>
    <mat-cell *matCellDef="let consumption"> {{consumption.amount}} </mat-cell>
  </ng-container>

  <!-- Description Column -->
  <ng-container matColumnDef="desc">
    <mat-header-cell *matHeaderCellDef> Description </mat-header-cell>
    <mat-cell *matCellDef="let consumption"> {{consumption.desc}} </mat-cell>
  </ng-container>
</mat-table>

4. Row 정의

테이블의 Row Template을 정의합니다.

Row, Column을 어떻게 보여줄지 정의하면 테이블이 되죠.

amount와 desc를 각 열에 보여주기로 합니다.

<mat-table [dataSource]="dataSource">
  <!-- Amount Column -->
  <ng-container matColumnDef="amount">
    <mat-header-cell *matHeaderCellDef> Amount </mat-header-cell>
    <mat-cell *matCellDef="let consumption"> {{consumption.amount}} </mat-cell>
  </ng-container>

  <!-- Description Column -->
  <ng-container matColumnDef="desc">
    <mat-header-cell *matHeaderCellDef> Description </mat-header-cell>
    <mat-cell *matCellDef="let consumption"> {{consumption.desc}} </mat-cell>
  </ng-container>

  <!-- Row Template -->
  <mat-header-row *matHeaderRowDef="['amount','desc']"></mat-header-row>
  <mat-row *matRowDef="let consumption; columns: ['amount','desc'];">
  </mat-row>
</mat-table>

이렇게 하면 아래와 같이 Material Table이 보여집니다.

여기서 Table에 살짝 shadow를 넣어줬는데요.

div로 감싸주고 mat-elevation-z1이라는 class를 추가하면 됩니다.

Mat Table 화면

Material Table을 이용하면 몇 가지 장점이 있습니다.

정렬이나 페이징 필터링 등의 기능을 추가하기 쉽구요.

어느정도 반응형을 지원합니다.

필요할 때 추가해서 사용해보도록 할게요.

소스주소: https://github.com/jsrho1023/account-book

출처: 

https://material.io/

https://material.angular.io/components/table/overview