Angular Material Table

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

 

 

 

• mat-header-cell: 이 셀이 Material Table의 헤더임을 지정 (스타일/역할 부여)
• *matHeaderCellDef: 이 셀이 컬럼 헤더의 템플릿임을 지정 (템플릿 연결)

• *matHeaderCellDef는 값을 넘기지 않아도,
  <ng-container matColumnDef="컬럼명">와 자동으로 연결되어
  해당 컬럼의 헤더 셀로 인식됩니다.

 

 

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

Angular Material Table - GeeksforGeeks

▼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