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
출처:
'IT Tech > Angular' 카테고리의 다른 글
| Angular Domain Model (0) | 2018.04.24 |
|---|---|
| Angular 테스트(Test) 하기 (0) | 2018.04.11 |
| Angular Material Icon (0) | 2018.03.18 |
| Angular Material Header Toolbar (0) | 2018.03.11 |
| Angular Directive (Structural Directive) (0) | 2018.02.12 |
