round-one.component.html

<div class="header-title-type">
         <div class="flex justify-end">
             <div class="px-1">
                 <div class="relative shadow-md">
                     <input type="text" id="hs-leading-icon" name="hs-leading-icon"
                         class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name" style="height: 40px;">
                     <div
                         class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
                         <i class="ri-search-line text-gray"></i>
                     </div>
                 </div>
             </div>
             <div class="px-1">
                 <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-10 m-0 shadow-md">
                     <i class="ti ti-book fs-l"></i>
                     Help
                 </button>
             </div>
         </div>
 </div>
<div class="header-title-table bg-soft-secondary text-primary">
    <span>ประเมินสมรรถนะ</span>
</div>

 <div class="page px-rem">
     <div class="overflow-auto table-bordered rounded-t-md">
         <div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1"  >
             <div class="overflow-auto shadow-md">
                 <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover" >
                     <thead>
                         <tr>
                             <ng-container
                             *ngFor="let item of ['รหัสพนักงาน','ชื่อพนักงาน','ตำเเหน่งงาน','ประเมิน','เเผนพัฒนา','PMS','ผลประเมิน','เกรด','สถานะ','สถานะผู้ประเมิน']; let f = first; let l = last; let i = index">
                                 <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
                                    [class.!text-center]="f||l||'ประเมิณ'||'เเผนพัฒนา'||'PMS'">
                                     <span class="text-sm">{{ item }}</span>
                                     <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l&&!f&&!i">
                                         <svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="50" 
                                             height="16" fill="currentColor" viewBox="0 0 16 16">
                                             <path
                                                 d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
                                             </path>
                                         </svg>
                                     </div>
                                 </th>
                             </ng-container>
                         </tr>
                     </thead>
                     <tbody>
                         <tr *ngFor="let item of[
                          ['10001', 'ธนพัต อาชาไชย', 'HRD training Officer', '', '', '', '70', 'c', 'ประเมินเเล้ว', 'ผู้อนุมัติลำดับที่ 1'],
                          ['10002', 'พิชญาภา มหาเมธี', 'HRD training Officer', '', '', '', '-', '-', 'ยังไม่ประเมิน', '-'],
                          ['10003', 'นิรดา บุญเทพ', 'HRD training Officer', '', '', '', '76', '', 'ประเมินเเล้ว', 'ผู้อนุมัติลำดับที่3'],
                          ['10004', 'รัตน์ ธนากร', 'HRD training Officer', '', '', '', '79', '', 'ประเมินเเล้ว', 'ผู้อนุมัติลำดับที่ 1'],
                          ['10005', 'ยศกร ศิริธาดา', 'HRD training Officer', '', '', '', '', '', 'ประเมินเเล้ว', 'ผู้อนุมัติลำดับที่ 2'],
                          ['10006', 'ธนิสรา นพรัตน์พร', 'HRD training Officer', '', '', '', '80', '', 'ประเมินเเล้ว', '-'],
                          ['10007', 'เมริสา สุขทิพย์', 'HRD training Officer', '', '', '', '', '', 'ประเมินเเล้ว', '-']];let i = index">
                         <td class="text-center" style="font-size: 12px; width: 150px;">{{item[0]}}</td>
                         <td style="font-size: 12px; width: 175px;">{{item[1]}}</td>
                         <td style="font-size: 12px;">{{item[2]}}</td>
                         <td class="flex justify-center" >
                            <button type="button" class="ti-btn rounded-sm ti-btn-secondary" style="height: 15px; width: 45px; font-size: 12px; display: flex; align-items: center; justify-content: center;">
                                CC
                            </button>
                            <button type="button" class="ti-btn rounded-sm ti-btn-warning" style="height: 15px; width: 45px; font-size: 12px; display: flex; align-items: center; justify-content: center;">
                                MC
                            </button>
                            <button type="button" class="ti-btn rounded-sm ti-btn-success" style="height: 15px; width: 45px; font-size: 12px; display: flex; align-items: center; justify-content: center;">
                                PC
                            </button>
                         </td>
                         <td style="width: 160px; text-align: center; vertical-align: middle;">
                            <button type="button" class="ti-btn rounded-sm soft-dark text-white text-center" style="height: 15px; width: 45px; font-size: 12px;">
                                IDP
                            </button>
                        </td>
                         <td class="text-center">
                            <button type="button" class="ti-btn rounded-sm ti-btn-success" style="height: 15px; width: 55px; font-size: 12px; display: flex; align-items: center; justify-content: center;">
                                ประเมิน
                            </button>
                         </td>
                         <td class="text-center" style="font-size: 12px;">{{item[6]}}</td>
                         <td class="text-center" style="font-size: 12px;">{{item[7]}}</td>
                         <td class="text-center" style="font-size: 12px;">{{item[8]}}</td>
                         <td class="text-center" style="font-size: 12px;">{{item[9]}}</td>

                         </tr>
                     </tbody>
                 </table>
             </div>
         </div>
     </div>
    </div>