Angular Material Table

2018. 4. 2. 22:00

지난 포스트에 예고했던 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

'IT Tech > Angular' 카테고리의 다른 글

Angular Domain Model  (0) 2018.04.24
Angular 테스트(Test) 하기  (0) 2018.04.11
Angular Material Table  (0) 2018.04.02
Angular Material Icon  (0) 2018.03.18
Angular Material Header Toolbar  (0) 2018.03.11
Angular Directive (Structural Directive)  (0) 2018.02.12

TechTrip IT Tech/Angular , , , , ,