78 lines
3.9 KiB
Markdown
78 lines
3.9 KiB
Markdown
ช่วยแก้ไข Layout หน้า `รายชื่อพนักงานทั้งหมด` ให้ตารางแสดงผลเหมือนกับหน้า `ประวัติการอบรม`
|
|
|
|
ปัญหาปัจจุบัน:
|
|
|
|
- ตารางของหน้ารายชื่อพนักงานล้นออกด้านขวา
|
|
- Header และ Column ของตารางดูกว้างเกิน container
|
|
- ต้องการให้ตารางอยู่ใน Card เหมือนหน้าประวัติการอบรม
|
|
- ให้ Scroll เฉพาะภายในตาราง ไม่ให้ดัน Layout ทั้งหน้า
|
|
|
|
สิ่งที่ต้องการให้แก้:
|
|
|
|
1. ครอบตารางด้วย container ที่มี `overflow-hidden`
|
|
2. เพิ่ม wrapper สำหรับตารางด้วย `overflow-x-auto`
|
|
3. ใช้ `Table` แบบ `w-full table-fixed`
|
|
4. กำหนดความกว้างของแต่ละคอลัมน์ให้เหมาะสม
|
|
5. ใช้ `truncate` กับข้อความยาว เช่น ชื่อพนักงาน ฝ่าย และตำแหน่ง
|
|
6. จัด Header กลุ่ม `ชั่วโมงการอบรม (ชม.)` ให้ไม่ทำให้ตารางล้น
|
|
7. ให้ดีไซน์ สี เส้นขอบ ระยะห่าง และความสูงของแถว ใกล้เคียงกับหน้า `ประวัติการอบรม`
|
|
8. ปุ่ม Search, Filter, View และ Pagination ไม่ต้องเปลี่ยน Logic เดิม
|
|
9. ห้ามแก้ Business Logic, API, Query หรือข้อมูลที่ดึงมา
|
|
10. แก้เฉพาะ Layout / CSS / className / Table structure เท่านั้น
|
|
|
|
โครงสร้างที่ต้องการโดยประมาณ:
|
|
|
|
```tsx
|
|
<Card className="overflow-hidden">
|
|
<CardContent className="p-0">
|
|
<div className="overflow-x-auto">
|
|
<Table className="w-full table-fixed">
|
|
<TableHeader>...</TableHeader>
|
|
<TableBody>...</TableBody>
|
|
</Table>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
```
|
|
|
|
ตัวอย่างแนวทาง Column Width:
|
|
|
|
```tsx
|
|
<TableHead className="w-[120px]">รหัสพนักงาน</TableHead>
|
|
<TableHead className="w-[220px]">ชื่อพนักงาน</TableHead>
|
|
<TableHead className="w-[160px]">ฝ่าย</TableHead>
|
|
<TableHead className="w-[160px]">ตำแหน่ง</TableHead>
|
|
<TableHead className="w-[100px] text-center">อนุมัติแล้ว</TableHead>
|
|
<TableHead className="w-[100px] text-center">รอตรวจสอบ</TableHead>
|
|
<TableHead className="w-[100px] text-center">ไม่อนุมัติ</TableHead>
|
|
<TableHead className="w-[100px] text-center">รวมชั่วโมง</TableHead>
|
|
```
|
|
|
|
ตัวอย่างการจัด Header กลุ่ม:
|
|
|
|
```tsx
|
|
<TableRow>
|
|
<TableHead colSpan={4}></TableHead>
|
|
<TableHead colSpan={4} className="text-center border-l">
|
|
ชั่วโมงการอบรม (ชม.)
|
|
</TableHead>
|
|
</TableRow>
|
|
```
|
|
|
|
ตัวอย่างการป้องกันข้อความยาวดันตาราง:
|
|
|
|
```tsx
|
|
<TableCell className="truncate">
|
|
<div className="truncate">{employee.name}</div>
|
|
</TableCell>
|
|
```
|
|
|
|
ผลลัพธ์ที่ต้องการ:
|
|
|
|
- ตารางไม่ล้นหน้าจอ
|
|
- Layout เหมือนหน้า `ประวัติการอบรม`
|
|
- Table อยู่ใน Card สวยงาม
|
|
- มี horizontal scroll เฉพาะเมื่อจำเป็น
|
|
- Responsive มากขึ้น
|
|
- Header และ Body align ตรงกัน
|