259 lines
5.2 KiB
Markdown
259 lines
5.2 KiB
Markdown
ช่วยปรับปรุง 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
|