alla-tms/plans/update-datatable-employee-directory-page.md

ช่วยปรับปรุง 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 ต้องกำหนด

size:
minSize:
maxSize:

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

---

3. Header 2 ชั้น

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

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

โดยใช้

colSpan
rowSpan
header groups

ของ TanStack Table

ไม่ใช้ CSS hack

---

4. Cell Alignment

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

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

ให้

• text-center
• tabular-nums

เช่น

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

---

5. Text Column

ชื่อพนักงาน

ฝ่าย

ตำแหน่ง

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

truncate
max-w

เช่น

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

---

6. Table Layout

ใช้

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

และ

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

รวมถึง

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