ช่วยปรับปรุง DataTable ของหน้า **Employee Directory (รายชื่อพนักงานทั้งหมด)** ให้มี Layout และ UX เหมือนกับหน้า **Training Records (ประวัติการอบรม)**

## ปัญหาปัจจุบัน

- Header ของกลุ่ม "ชั่วโมงการอบรม (ชม.)" ไม่ตรงกับคอลัมน์ด้านล่าง
- คอลัมน์ "อนุมัติแล้ว", "รอตรวจสอบ", "ไม่อนุมัติ", "รวมชั่วโมง" เบียดกันจนข้อความติดกัน
- ความกว้างของแต่ละ Column ไม่สมดุล
- ตารางดูไม่เป็นระเบียบเมื่อหน้าจอกว้าง
- การจัดตำแหน่ง Header และ Cell ไม่ตรงกัน
- Action Column ชิดเกินไป

---

## สิ่งที่ต้องการ

### 1. ใช้ DataTable Component เดียวกับหน้า Training Records

ให้ใช้โครงสร้างเดียวกันทั้งหมด

- TanStack Table
- DataTable
- DataTableColumnHeader
- Pagination
- Toolbar
- Sorting
- Column Visibility
- Responsive

ห้ามสร้าง Table ใหม่

---

### 2. กำหนด Width ของทุก Column

ตัวอย่าง

| Column      | Width |
| ----------- | ----: |
| รหัสพนักงาน | 120px |
| ชื่อพนักงาน | 240px |
| ฝ่าย        | 180px |
| ตำแหน่ง     | 180px |
| อนุมัติแล้ว | 110px |
| รอตรวจสอบ   | 110px |
| ไม่อนุมัติ  | 110px |
| รวมชั่วโมง  | 120px |
| Actions     |  60px |

ทุก Column ต้องกำหนด

```tsx
size:
minSize:
maxSize:
```

เพื่อป้องกัน Column ยุบหรือขยายผิดสัดส่วน

---

### 3. Header 2 ชั้น

ต้องการ Header แบบนี้

```
---------------------------------------------------------
| รหัส | ชื่อ | ฝ่าย | ตำแหน่ง | ชั่วโมงการอบรม (ชม.) |
|                               -------------------------
|                               อนุมัติ รอ ไม่อนุมัติ รวม |
---------------------------------------------------------
```

โดยใช้

```
colSpan
rowSpan
header groups
```

ของ TanStack Table

ไม่ใช้ CSS hack

---

### 4. Cell Alignment

ข้อมูลตัวเลขทั้งหมด

- อนุมัติแล้ว
- รอตรวจสอบ
- ไม่อนุมัติ
- รวมชั่วโมง

ให้

- text-center
- tabular-nums

เช่น

```tsx
<div className="text-center tabular-nums font-medium">{value}</div>
```

---

### 5. Text Column

ชื่อพนักงาน

ฝ่าย

ตำแหน่ง

ต้องรองรับข้อความยาว

```
truncate
max-w
```

เช่น

```tsx
<div className="max-w-[220px] truncate">
```

---

### 6. Table Layout

ใช้

```tsx
<Table
    className="w-full table-fixed"
>
```

และ

```tsx
<div className="overflow-x-auto">
```

รวมถึง

```tsx
min-w-[1200px]
```

เพื่อให้ Scroll เฉพาะ Table เมื่อจำเป็น

---

### 7. ความสูงของแถว

Header

ประมาณ

56px

Body

ประมาณ

64px

เหมือนหน้า Training Records

---

### 8. Spacing

เพิ่มระยะห่าง

```
px-4
py-3
```

ทุก Cell

ไม่ให้ข้อมูลติดกัน

---

### 9. Action Column

คอลัมน์สุดท้าย

```
width:60
```

จัด

```
justify-end
```

เหมือนหน้า Training Records

---

### 10. Responsive

เมื่อหน้าจอเล็ก

ให้เลื่อนเฉพาะ Table

ห้าม

- Header ล้น
- Column ซ้อน
- Text ทับกัน
- Cell เบียดกัน

---

### 11. ห้ามแก้ Business Logic

ห้ามแก้

- API
- Query
- Data
- Pagination
- Sorting
- Filter

แก้เฉพาะ

- Layout
- DataTable Columns
- Header Groups
- CSS
- Width
- Alignment

---

### เป้าหมายสุดท้าย

หน้า Employee Directory ต้องมีหน้าตาเหมือนหน้า Training Records ทุกประการ

- ระยะห่างเท่ากัน
- Header เท่ากัน
- Column Width สมดุล
- ตัวเลขจัดกลาง
- Header Group "ชั่วโมงการอบรม" แสดงผลถูกต้อง
- รองรับ Responsive
- ไม่มี Column เบียดกัน
- ไม่มีข้อความซ้อนกัน
- ดูเป็น Professional Dashboard ระดับ Enterprise