angular table 사용 예시

<div
    class="w-full border border-gray-100 rounded-lg shadow-[0px_0px_12px_-1px_rgba(0,0,0,0.04)]"
  >
    <div class="text-xl font-bold p-5">주문 상태 로그</div>
    <div class="px-5">
      <table class="table-auto w-full border border-gray-200 rounded-lg">
        <thead>
          <th>상태</th>
          <th>내용</th>
          <th>일시</th>
        </thead>
        <tbody>
          <tr *ngFor="let log of getCurrentPageLogs()">
            <td>
              <div
                class=""
                [ngClass]="setBadgeStyle(log.state)"
                class="flex mx-auto rounded-sm justify-center px-2 py-1 max-w-max items-center font-normal text-white"
              >
                {{log.state}}
              </div>
            </td>
            <td>{{log.content}}</td>
            <td class="text-center">
              {{log.registeredAt | date:'YYYY-MM-dd'}}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="flex justify-between items-center">
      <details class="flex gap-2 border border-gray-200 rounded-md max-w-max">
        <summary class="flex items-center justify-between pt-2.5 pl-3">
          10
          <app-icon name="material-symbols:keyboard-arrow-up" class="h-4 w-4" />
        </summary>

        <div
          class="absolute bg-white border border-gray-200 rounded-md max-w-max"
        >
          <div
            *ngFor="let item of pageAmounts"
            class="px-2 py-0.5 cursor-pointer w-full h-[2.3125rem]"
          >
            <div
              class="relative flex w-full bg-white text-gray-600 h-[2.3125rem] hover:bg-gray-100 items-center px-2 rounded-md"
            >
              {{item}}
            </div>
          </div>
        </div>
      </details>

      <app-pagination
        id="orderLogs"
        (pageChange)="pageInfo.currentPage = $event"
        [maxSize]="pageInfo.totalItems"
      />
    </div>