Data Table

โครงสร้างตาราง

Data table ใช้แสดงข้อมูลแบบเป็นระเบียบ — มี header + row + status cell + sortable + pagination ตาม HTML source of truth:

ส่วน	ค่า
table.header-bg	#FCFEFF
table.header-text	#989AA5 · 11px · weight 600 · letter-spacing 0.05em
table.header-border	#EBECF0
table.row-border	#EBECF0
table.row-hover-bg	#FCFEFF
table.row-selected-bg	#FFF1EA
table.cell-text	#3E4048 · 13px · padding: 12px 14px
กรอบตาราง	border: 1px solid #EBECF0 · border-radius: 10px

Data table จริง · ตาม HTML

รายการโครงการ

	โครงการ ↕	หน่วยงาน	กำลังผลิต ↕	สถานะ	ผู้รับผิดชอบ	Action
	Solar Farm Phase 2 จ.ระยอง	B.Grimm Power	50 MW	Active	PP Panupong P.
	Cogen Plant Chonburi จ.ชลบุรี	B.Grimm Power	35 MW	Pending	BG Thanakit K.
	VSPP Rayong จ.ระยอง	B.Grimm Power	10 MW	Rejected	TK Ariya M.
	Archive Project —	—	—	Archived	—

แสดง 1–4 จาก 24 รายการ

row ที่เลือก = พื้น #FFF1EA · row ที่ disabled = opacity 0.5 + สีเทา · checkbox accent #FF6727 · pagination หน้าที่ active พื้น #FF6727

สถานะของ row

สถานะ	ลักษณะ
ปกติ	พื้นขาว #FFFFFF · text #3E4048
hover	พื้น #FCFEFF (table.row-hover-bg)
selected	พื้น #FFF1EA (table.row-selected-bg) — ใช้คู่ checkbox
disabled / archived	opacity: 0.5 + ตัวอักษร #989AA5 / รายละเอียด #C9CAD4 · checkbox disabled

เซลล์พิเศษ

ชนิดเซลล์	องค์ประกอบ	ค่า
ชื่อหลัก (col แรก)	ชื่อ + รายละเอียดรองใต้ชื่อ	ชื่อ #22242A weight 500 · รอง #989AA5 11px
หน่วยงาน	chip เล็ก	#FFF1EA/#FF6727/#FFB088 · radius 999px · 11px
สถานะ	tag สถานะ (ดู Badges & Tags)	solid tag 11px
ผู้รับผิดชอบ	avatar xs (24px) + ชื่อ 12px	avatar ตาม Avatar & List
ตัวเลข	font-weight: 500 ไม่มีทศนิยมเกินจำเป็น	เช่น 50 MW
Action	icon button เงียบ 2 ปุ่ม	แก้ไข #989AA5 · ลบ #D64541 (danger)

Pagination

• แถบ footer พื้น #FCFEFF · บน border-top: 1px solid #EBECF0
• ข้อความสรุป #989AA5 12px — "แสดง 1–4 จาก 24 รายการ"
• ปุ่มหน้า: 28×28px · radius 6px · active = พื้น #FF6727 ตัวอักษรขาว · ปกติ = border #EBECF0 พื้นขาว text #3E4048 · disabled (‹ ที่หน้าแรก) = text #C9CAD4
• ปุ่มรูปเคอร์เซอร์ต้องมี aria-label หรือ title (‹ ›)

กติกา

• ตารางต้องมี header ชัดเจน (ไม่ใช่แค่สีเข้ม) — screen reader อ่าน <th scope="col">
• ตัวเลขเรียงชิดขวา หรือคงตำแหน่งทศนิยมให้ตรงกัน — ห้ามสลับซ้ายขวาในคอลัมน์เดียวกัน
• status cell ใช้ tag/solid badge เท่านั้น (ห้ามใช้สีพื้นทั้ง cell แทน) — ดู Badges & Tags
• บนมือถือ (< 640px): ตารางกว้างต้องเลื่อนแนวนอนภายในกรอบ (overflow-x: auto) หรือเปลี่ยนเป็น card view — ห้ามบีบให้ข้อมูลแน่นจนอ่านไม่ออก
• checkbox ในตารางใช้ accent-color: #FF6727 เสมอ

Token ครบชุดอยู่ใน bgrimm.tokens.json → component.table