กลับไปหน้าหลัก
บทที่ 7: Data Display Components
เรียนรู้การแสดงข้อมูลอย่างมีประสิทธิภาพด้วย MUI สำหรับมือใหม่! 📊
Table
List
Card
Chip & Badge
💡 ทำไม Data Display ถึงสำคัญ?
• 📈 Data Visualization: ทำให้ข้อมูลเข้าใจง่ายและสื่อความหมายชัดเจน
• 👀 User Experience: ผู้ใช้หาข้อมูลที่ต้องการได้รวดเร็ว
• 📱 Responsive Display: แสดงข้อมูลได้ดีในทุกขนาดหน้าจอ
• ⚡ Performance: จัดการข้อมูลจำนวนมากได้อย่างมีประสิทธิภาพ
🎯 เมื่อเรียนจบบทนี้ คุณจะสามารถ:
- สร้าง Table ที่มีประสิทธิภาพ
pagination, sorting, filtering
- ใช้ List แบบต่างๆ
simple list, nested list, interactive list
- ออกแบบ Card ที่สวยงาม
product card, profile card, dashboard card
- ใช้ Chip และ Badge อย่างมืออาชีพ
tags, status, notifications
- จัดการข้อมูลจำนวนมาก
pagination, infinite scroll, virtualization
- Responsive Data Display
ปรับแสดงผลตามขนาดหน้าจอ
📊 Table Components
Table เป็น component สำหรับแสดงข้อมูลในรูปแบบตารางที่เป็นระเบียบ
👥 ตาราง User Management
| ID | ชื่อ | อีเมล | บทบาท | สถานะ | จัดการ |
|---|---|---|---|---|---|
| 1 | สมชาย ใจดี | somchai@email.com | Admin | ใช้งาน | |
| 2 | สมหญิง รักเรียน | somying@email.com | User | ใช้งาน | |
| 3 | วิทยา สมาร์ท | witaya@email.com | Manager | ไม่ใช้งาน | |
| 4 | ประกาย ขยัน | prakkai@email.com | User | ใช้งาน | |
| 5 | มานพ อุตสาห์ | manop@email.com | Admin | รอดำเนินการ |
💻 Code Example
🎨 Table with Pagination
// Table with Pagination
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow sx={{ bgcolor: 'grey.100' }}>
<TableCell><strong>ID</strong></TableCell>
<TableCell><strong>ชื่อ</strong></TableCell>
<TableCell><strong>อีเมล</strong></TableCell>
<TableCell><strong>สถานะ</strong></TableCell>
<TableCell align="center"><strong>จัดการ</strong></TableCell>
</TableRow>
</TableHead>
<TableBody>
{data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((row) => (
<TableRow key={row.id} hover>
<TableCell>{row.id}</TableCell>
<TableCell>{row.name}</TableCell>
<TableCell>{row.email}</TableCell>
<TableCell>
<Chip
label={row.status}
color={getStatusColor(row.status)}
/>
</TableCell>
<TableCell align="center">
<IconButton size="small" color="primary">
<Edit fontSize="small" />
</IconButton>
<IconButton size="small" color="error">
<Delete fontSize="small" />
</IconButton>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
<TablePagination
component="div"
count={data.length}
page={page}
onPageChange={handleChangePage}
rowsPerPage={rowsPerPage}
onRowsPerPageChange={handleChangeRowsPerPage}
rowsPerPageOptions={[5, 10, 25]}
labelRowsPerPage="แถวต่อหน้า:"
/>