Table Action Patterns

Data table patterns — DataTable reusable component คู่กับ Pagination, Search/Filter, Sortable, Row Actions, Row Selection, Expandable Rows

DataTable — Reusable Component

Generic table component — map columns + data → shadcn Table. ใช้คู่กับ Pagination ได้ทันที

DataTable component — ดูโค้ดด้านล่าง

Name	Email	Role	Status	Joined
สมชาย วงศ์สวัสดิ์	user1@example.com	Admin	Inactive	2023-01-01
สมหญิง จันทร์เพ็ญ	user2@example.com	Editor	Active	2023-02-02
วิชัย ศรีสุข	user3@example.com	Viewer	Active	2023-03-03
พิมพ์ใจ รักดี	user4@example.com	Admin	Active	2023-04-04
ธนากร แสงทอง	user5@example.com	Editor	Active	2023-05-05

DataTable — API Fetch (Server Component) — ดึงข้อมูลจาก API ใน Server Component — searchParams pagination, ไม่ต้อง useEffect

Column Search/Filter

Input ค้นหา name/email + Select filter role — reset page เป็น 1 เมื่อ filter เปลี่ยน

Search + Filter pattern — ดูโค้ดด้านล่าง

Name	Email	Role	Status
สมชาย วงศ์สวัสดิ์	user1@example.com	Admin	Inactive
สมหญิง จันทร์เพ็ญ	user2@example.com	Editor	Active
วิชัย ศรีสุข	user3@example.com	Viewer	Active
พิมพ์ใจ รักดี	user4@example.com	Admin	Active
ธนากร แสงทอง	user5@example.com	Editor	Active

30 รายการ

Sortable Columns

Clickable header toggle asc/desc/none — ใช้ sortByField() utility

sortByField utility — ดูโค้ดด้านล่าง

		Role
สมชาย วงศ์สวัสดิ์	user1@example.com	Admin	2023-01-01
สมหญิง จันทร์เพ็ญ	user2@example.com	Editor	2023-02-02
วิชัย ศรีสุข	user3@example.com	Viewer	2023-03-03
พิมพ์ใจ รักดี	user4@example.com	Admin	2023-04-04
ธนากร แสงทอง	user5@example.com	Editor	2023-05-05

Expandable Rows

Chevron toggle → expand row detail (colSpan full width) — ใช้ renderRow prop ของ DataTable

Expandable pattern — ดูโค้ดด้านล่าง

Name	Email	Role	Status
สมชาย วงศ์สวัสดิ์	user1@example.com	Admin	Inactive
สมหญิง จันทร์เพ็ญ	user2@example.com	Editor	Active
วิชัย ศรีสุข	user3@example.com	Viewer	Active
พิมพ์ใจ รักดี	user4@example.com	Admin	Active
ธนากร แสงทอง	user5@example.com	Editor	Active

Row Actions (Edit/Delete)

DropdownMenu per row — Edit (Dialog) + Delete (ConfirmDialog) + showToast feedback

DropdownMenu + ConfirmDialog + showToast — ดูโค้ดด้านล่าง

Name	Email	Role
สมชาย วงศ์สวัสดิ์	user1@example.com	Admin
สมหญิง จันทร์เพ็ญ	user2@example.com	Editor
วิชัย ศรีสุข	user3@example.com	Viewer
พิมพ์ใจ รักดี	user4@example.com	Admin
ธนากร แสงทอง	user5@example.com	Editor

Row Selection + Bulk Actions

Checkbox column + Select All (current page) + floating action bar + bulk delete

Checkbox + Bulk Actions — ดูโค้ดด้านล่าง

Name	Email	Role	Status
สมชาย วงศ์สวัสดิ์	user1@example.com	Admin	Inactive
สมหญิง จันทร์เพ็ญ	user2@example.com	Editor	Active
วิชัย ศรีสุข	user3@example.com	Viewer	Active
พิมพ์ใจ รักดี	user4@example.com	Admin	Active
ธนากร แสงทอง	user5@example.com	Editor	Active