본문 바로가기
개발 공부 일지/Angular

Angular Material Table

by yelimu 2025. 6. 5.

1. Angular Material Table의 구조적 요구사항

  • mat-table은 컬럼 정의 <ng-container matColumnDef="컬럼명">로 감싸서 선언해야만,
    내부적으로 컬럼을 인식하고 동적으로 헤더/셀을 매칭할 수 있습니다.
  • <th mat-header-cell *matHeaderCellDef>와 <td mat-cell *matCellDef="let row">는
    반드시 <ng-container matColumnDef="..."> 안에 있어야 합니다.

2. 왜 그냥 <th>, <td>만 쓰면 안 되나요?

  • 그냥 <th>, <td>만 쓰면 Angular Material이 어떤 컬럼이 어떤 데이터와 연결되는지 알 수 없습니다.
  • <ng-container matColumnDef="name">처럼 컬럼 이름을 명시해야
    displayedColumns 배열과 매칭해서 동적으로 컬럼을 렌더링할 수 있습니다.
  • <ng-container>는 실제 DOM에 렌더링되지 않으므로, 불필요한 태그가 추가되지 않습니다.
순서 Angular material Angular 적용 태그 용례
열 먼저
정의
matColumnDef CdkColumnDef ng-container matColumnDef="name"
-> 해당 컬럼 이름 지정
matHeaderCellDef CdkHeaderCellDef th *matHeaderCellDef
Angular Material Table의 헤더 셀로 인식 &
matColumnDef와 매칭
matCellDef CdkCellDef td *matCellDef="let row"
-> 각 행의 데이터를 변수로 받아오는 용도

matColumnDef="let row"
-> 속성 바인딩. 단순 값 전달
행 정의 matHeaderRowDef CdkHeaderRow tr *matHeaderRowDef="displayedColumns"
matRowDef CdkRowDef tr *matRowDef="let row; columns: displayedColumns"
-> 각 행의 데이터를 row 변수로 사용
어떤 컬럼을 어떤 순서로 보여줄지 지정

https://material.angular.dev/components/table/api

 

Angular Material

UI component infrastructure and Material Design components for Angular web applications.

material.angular.dev

 

 

 

  • mat-header-cell: 이 셀이 Material Table의 헤더임을 지정 (스타일/역할 부여)
  • *matHeaderCellDef: 이 셀이 컬럼 헤더의 템플릿임을 지정 (템플릿 연결)
  • *matHeaderCellDef는 값을 넘기지 않아도,
    <ng-container matColumnDef="컬럼명">와 자동으로 연결되어
    해당 컬럼의 헤더 셀로 인식됩니다.

 

 

https://www.geeksforgeeks.org/angular-material-table/

 

Angular Material Table - GeeksforGeeks

Your All-in-One Learning Portal: GeeksforGeeks is a comprehensive educational platform that empowers learners across domains-spanning computer science and programming, school education, upskilling, commerce, software tools, competitive exams, and more.

www.geeksforgeeks.org

▼Agular material_table_Syntax

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

    <!-- Column Definitions -->
    <ng-container matColumnDef="column_name">
        <th mat-header-cell *matHeaderCellDef> 
            Column Name 
        </th>
        <td mat-cell *matCellDef="let element"> 
            {{element.property}} 
        </td>
    </ng-container>
    
    <!-- Header and Rows -->
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

<ng-container> 내부에서 column 을 먼저 정의하고 

각 열인 <tr> 에 동적으로 column이 삽입된다

 

  • 각 열(column)은 <ng-container matColumnDef="...">로 정의되어 있습니다.
  • 이 안에 <th mat-header-cell *matHeaderCellDef>와 <td mat-cell *matCellDef="let row">가 있습니다.
  • 이들은 Angular Material이 내부적으로 조합해서
    <tr mat-header-row>에는 <th>들을,
    <tr mat-row>에는 <td>들을 자동으로 채워 넣습니다.

matColumnDef="name" 에 전달하는 name은 컴포넌트에서 displayedColumns배열 내에 정의된 값이며, 

displayedColumns는 matHeaderRowDef에 전달되는 값이다

      <tr mat-header-row *matHeaderRowDef=" displayedColumns "></tr>
      <tr
        mat-row
        *matRowDef="let row; columns: nameList "
        class="td"
        [routerLink]="'material/' + row.id"
      ></tr>

 

<ng-container>에 *matColumn="어쩌구" 라고 정의했어도, displayedColumns에 어쩌구가 없으면 렌더링되지않는다

하 왜 이따구..씁


▼순수 자바스크립트 table 코드

<table id="calculator_table" border="1">
          <thead>
            <tr>
              <th>🍞</th>
              <th>메뉴명</th>
              <th>금액</th>
              <th>
                <input type="text" name="person" placeholder="사람 이름">
                <button class="td_delete" onclick="td_delete_event(this)">-</button>
              </th>
              <th>
                <input type="text" name="person" placeholder="사람 이름">
                <button class="td_delete" onclick="td_delete_event(this)">-</button>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><button class="tr_delete" onclick="tr_delete_event(this)">메뉴 삭제</button></td>
              <td><input type="text" name="menu" placeholder="메뉴명"></td>
              <td><input type="text" name="price" placeholder="금액"></td>
              <td><input type="checkbox" name="check"></td>
              <td><input type="checkbox" name="check"></td>
            </tr>
          </tbody>
        </table>

코드 출처: https://oliviakim.tistory.com/84

'개발 공부 일지 > Angular' 카테고리의 다른 글

체크박스 동작 방식  (0) 2025.06.05
$event  (0) 2025.06.05
mat-tab-group  (0) 2025.06.05
앵귤러 장점  (0) 2025.06.05
[Angular material UI] autocomplete  (0) 2025.06.05