Angular - Material Table

AAA·2019년 1월 14일
1

3월까지 끝내야하는 프로젝트가 생겼다. 이제부터 미뤄왔던 angular를 공부하면서 반드시 프로젝트 마무리 하도록 노력해나갈 것이다. 이 문서는 단순 개인 정리용으로 기록 되었다.

git: https://github.com/boakim/MySearchProject
기록영상: https://youtu.be/_vOkcphGR3A

Material Table Component

페이징 기능을 구현할 것이다. DataSource를 잘 연결 시켜주면 알아서 잘 보여준다. 이것이 Component 기반 개발의 장점이다!

list-box.component.css

css파일을 다음과 같이 수정한다. flex 오랜만에 사용한다. 알아두면 참 편한 css이다.

.example-container {
  display: flex;
  flex-direction: column;
  min-width: 300px;
  margin-top: 30px;
  }
  .mat-table{
    overflow: auto;
    max-height: 500px;
  }

  .mat-header-cell.mat-sort-header-sorted{
    color: black;
  }
  .list-table-style{
    font-family: Georgia;
  }
  .list-header-style{
    background-color: beige;
  }

list-box.component.html

기존에 단순하게 데이터를 나열할때는 아래와 같이 코딩하였으나, 페이징 기능을 추가 하기 위해서는 필요한 작업이 있다. MatTableModule, MatPaginatorModule 이라는 모듈들을 사용 할 것이다.

<div>
  <thead>
  <th>ISBN</th>
  <th>Title</th>
  <th>Author</th>
  <th>Price</th>
  </thead>
  <tbody>
  <tr *ngFor="let book of books">
    <td>{{book.bisbn}}</td>
    <td>{{book.btitle}}</td>
    <td>{{book.bauthor}}</td>
    <td>{{book.bprice}}</td>
  </tr>
  </tbody>
</div>

아래와 같이 변경한다. mat-table, mat-paginator 아직 정말 익숙하지 않다. 페이지 여러개를 만들어 나가면 익숙해 질거라 믿으며, 계속 공부를 진행해 봅시다.

<div class="example-container mat-elevation-z8">

  <mat-table class="list-table-style" #table [dataSource]="dataSource">
    <ng-container matColumnDef="bisbn">
      <mat-header-cell *matHeaderCellDef>ISBN</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.bisbn}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="btitle">
      <mat-header-cell *matHeaderCellDef>title</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.btitle}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="bauthor">
      <mat-header-cell *matHeaderCellDef>author</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.bauthor}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="bprice">
      <mat-header-cell *matHeaderCellDef>price</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.bprice}}</mat-cell>
    </ng-container>
    <mat-header-row class="list-header-style" *matHeaderRowDef="displayedColumns">
    </mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>

  <mat-paginator #paginator
                 [pageSize] = "5"
                 [pageSizeOptions]="[5,10,20]"
                 showFirstLastButtons>

  </mat-paginator>

</div>

book-search.module.ts

관련된 모듈을 추가해봅시다.


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

@NgModule({
...
  imports: [
...
    MatTableModule,
    MatPaginatorModule
  ]
})
export class BookSearchModule { }

list-box.component.ts

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

import { HttpClient } from '@angular/common/http';
import {MatPaginator, MatTableDataSource} from '@angular/material';

interface IBook {
  bauthor: string;
  bdate: string;
  btranslator: string;
  bpublisher: string;
  btitle: string;
  bprice: number;
  bisbn: string;
  bimgurl: string;
}

@Component({
  selector: 'app-list-box',
  templateUrl: './list-box.component.html',
  styleUrls: ['./list-box.component.css']
})
export class ListBoxComponent {

  displayedColumns = ['bisbn', 'btitle', 'bauthor', 'bprice'];
  dataSource1;
  books: IBook[];

  @ViewChild(MatPaginator) paginator: MatPaginator;

  constructor(private http: HttpClient) {
    this.http.get<IBook[]>('assets/data/book.json')
      .subscribe(res => {
        this.books = res;
        this.dataSource1 = new MatTableDataSource<IBook>(this.books);
        this.dataSource1.paginator = this.paginator;
      });
  }

}

페이징 기능이있는 테이블 생성이 끝났다.

profile
개인 정리 블로그입니다

0개의 댓글