Turborepo + Prisma Demo
Fetching data from PostgreSQL via NestJS API and Prisma ORM.
Next.js 16Prisma 7Local Component
Button
Variants
Colors
Sizes
Secondary with Colors
With Icons
Disabled States
Interactive
Input Component
Basic Input
Input with Icon
Input States
Invalid email address
Textarea Component
Basic Textarea
Textarea States
Note is required
Custom Rows
Form Components Demo
Example form using FormWrapper, FormInput, FormTextarea, and FormButton with React Hook Form and Zod validation.
Icon Showcase
All available icons from @repo/icons package
AddFile
AddUser
ArrowLeft
ArrowRight
Calendar
Check
Clear
Download
Edit
Error
FullArrowLeft
FullArrowRight
HamburgerMenu
MapPin
PhoneCall
Search
Send
Trash
Loading
Data Table
Data table with indented hierarchical data
รายการ | จำนวน |
|---|---|
1.ข้อมูลผู้มีสิทธิเลือกตั้ง | - |
1.1จำนวนผู้มีสิทธิเลือกตั้งทั้งหมด | 440,000 |
1.2จำนวนผู้มาแสดงตน (ผู้ใช้สิทธิ) | 440,000 (100%) |
2.ข้อมูลการจัดการบัตรเลือกตั้ง | - |
2.1จำนวนบัตรที่ได้รับจัดสรร | 440,000 |
2.2จำนวนบัตรที่ใช้ | 9,567 (100%) |
2.3จำนวนบัตรเลือกตั้งที่เหลือ | 4,000 |
3.ผลการนับคะแนน (รายละเอียดบัตร) | - |
3.1บัตรดี | 440,000 (100%) |
3.2บัตรเสีย | 440,000 (100%) |
3.3บัตรไม่เลือก | 440,000 (100%) |
Data Table - Comprehensive
Comprehensive data table demonstrating sorting, filtering, pagination, custom cell rendering, and action buttons
Features:
- Sorting: Click column headers to sort
- Search: Filter by name or email
- Pagination: Navigate through pages
- Custom cells: Status badges, formatted dates, action buttons
- Multiple data types: Text, dates, status indicators
ชื่อ-นามสกุล ↕ | อีเมล ↕ | บทบาท ↕ | สถานะ ↕ | วันที่สร้าง ↕ | เข้าสู่ระบบล่าสุด ↕ | การจัดการ |
|---|---|---|---|---|---|---|
สมชาย ใจดี | ผู้ดูแลระบบ | ใช้งาน | 15 มกราคม 2567 | 20 ธันวาคม 2567 | ||
สมหญิง รักงาน | ผู้จัดการ | ใช้งาน | 10 กุมภาพันธ์ 2567 | 21 ธันวาคม 2567 | ||
วิชัย เก่งมาก | ผู้ใช้ | รออนุมัติ | 5 พฤศจิกายน 2567 | - | ||
มาลี สวยงาม | ผู้ใช้ | ใช้งาน | 20 มีนาคม 2567 | 19 ธันวาคม 2567 | ||
ประเสริฐ ดีมาก | ผู้จัดการ | ไม่ใช้งาน | 8 มกราคม 2567 | 15 พฤศจิกายน 2567 | ||
สุดา รักเรียน | ผู้ใช้ | ใช้งาน | 12 เมษายน 2567 | 22 ธันวาคม 2567 | ||
ธนพล มั่นคง | ผู้ดูแลระบบ | ใช้งาน | 1 มกราคม 2567 | 22 ธันวาคม 2567 | ||
กาญจนา ใจกว้าง | ผู้ใช้ | รออนุมัติ | 20 พฤศจิกายน 2567 | - | ||
วีระ กล้าหาญ | ผู้จัดการ | ใช้งาน | 18 พฤษภาคม 2567 | 21 ธันวาคม 2567 | ||
อรุณี สดใส | ผู้ใช้ | ไม่ใช้งาน | 25 กุมภาพันธ์ 2567 | 30 ตุลาคม 2567 | ||
ชาญชัย ฉลาด | ผู้ใช้ | ใช้งาน | 10 มิถุนายน 2567 | 20 ธันวาคม 2567 | ||
ปราณี งามสง่า | ผู้จัดการ | ใช้งาน | 5 กรกฎาคม 2567 | 22 ธันวาคม 2567 |
แสดงผล
รายการต่อหน้า
Server-Side Demo: Fetched Links (0)
No links. Start the API on port 3003.
Client-Side Demo
Client-Side Fetch (TanStack Query)
Loading links...