<>Tables (Bảng dữ liệu) là một dạng trình bày thông tin theo hàng (rows) và cột (columns), giúp người dùng so sánh và phân tích dữ liệu dễ dàng. Chúng thường xuất hiện trong dashboard, báo cáo, danh sách sản phẩm, bảng giá, quản lý dữ liệu, v.v.
🚀 Mục tiêu chính của tables trong UI/UX:
✅ Cung cấp cấu trúc dữ liệu rõ ràng, dễ đọc.
✅ Giúp người dùng tìm kiếm, so sánh thông tin nhanh chóng.
✅ Tăng tính tương tác với các tính năng như lọc (filter), sắp xếp (sorting), tìm kiếm (search), chỉnh sửa (editable tables).
/Các loại Tables phổ biến
1. Simple Table (Bảng đơn giản) 📝
👉 Một bảng tĩnh, hiển thị thông tin cơ bản mà không có tương tác.
✅ Phù hợp với bảng giá, danh sách liên hệ, danh sách sản phẩm đơn giản.
🔹 Ví dụ UI thực tế:
| Tên sản phẩm | Giá | Trạng thái |
|---|---|---|
| iPhone 15 Pro | 30 triệu VND | Còn hàng |
| Samsung S24 Ultra | 28 triệu VND | Hết hàng |
| MacBook Air M2 | 25 triệu VND | Còn hàng |
2. Data Table (Bảng dữ liệu động) 📊
👉 Bảng có thể tương tác với các tính năng lọc, tìm kiếm, sắp xếp, phân trang.
✅ Phù hợp với dashboard, bảng quản lý đơn hàng, danh sách người dùng.
🔹 Ví dụ UI thực tế (Data Table có tương tác):
| ID | Tên khách hàng | Số điện thoại | Trạng thái đơn hàng |
|---|---|---|---|
| 101 | Nguyễn Văn A | 0987654321 | ✅ Đã giao |
| 102 | Trần Thị B | 0971234567 | ⏳ Đang xử lý |
| 103 | Lê Văn C | 0909988776 | ❌ Đã hủy |
🛠 Các tính năng có thể thêm vào Data Table:
🔍 Search: Cho phép người dùng tìm kiếm thông tin nhanh chóng.
🔽 Sort: Sắp xếp dữ liệu theo cột (A → Z, Z → A).
📌 Pagination: Phân trang khi dữ liệu quá lớn.
🏷 Filters: Lọc dữ liệu theo các tiêu chí cụ thể.
✏ Editable Fields: Cho phép chỉnh sửa trực tiếp trong bảng.
3. Comparison Table (Bảng so sánh) ⚖️
👉 Bảng giúp người dùng so sánh nhiều lựa chọn khác nhau theo tiêu chí cụ thể.
✅ Phù hợp với so sánh sản phẩm, dịch vụ, tính năng phần mềm.
🔹 Ví dụ UI thực tế:
| Tính năng | iPhone 15 Pro | Samsung S24 Ultra | Google Pixel 8 Pro |
|---|---|---|---|
| Màn hình | 6.1 inch OLED | 6.8 inch Dynamic AMOLED | 6.7 inch OLED |
| Camera | 48MP + 12MP | 200MP + 12MP | 50MP + 48MP |
| Chip | Apple A17 Pro | Snapdragon 8 Gen 3 | Google Tensor G3 |
| Giá | 30 triệu VND | 28 triệu VND | 27 triệu VND |
4. Pricing Table (Bảng giá) 💰
👉 Dùng để trình bày mức giá của sản phẩm/dịch vụ theo gói khác nhau.
✅ Phù hợp với SaaS (phần mềm), dịch vụ đăng ký (subscription services), hosting, v.v.
🔹 Ví dụ UI thực tế:
| Gói | Free | Pro | Enterprise |
|---|---|---|---|
| Giá | 0 VND | 299K/tháng | Liên hệ |
| Dung lượng | 5GB | 100GB | Không giới hạn |
| Hỗ trợ | ❌ Không có | ✅ 24/7 |
/Best Practices khi thiết kế Tables 📌
✅ Căn chỉnh hợp lý:
– Văn bản căn trái (Tên, mô tả).
– Số liệu căn phải (Giá, số lượng).
– Tiêu đề cột căn giữa để dễ đọc.
✅ Tăng khả năng quét mắt (scannability):
– Dùng màu sắc, icon để làm nổi bật trạng thái (✅, ❌, ⏳).
– Thêm khoảng cách (padding, line height) giúp bảng thoáng hơn.
✅ Cung cấp tính năng tương tác:
– Sorting & Filtering để người dùng tìm dữ liệu nhanh.
– Pagination để tránh bảng quá dài.
– Sticky Header khi bảng có nhiều dữ liệu.
✅ Thiết kế tối ưu cho mobile:
– Chuyển bảng thành danh sách trên màn hình nhỏ 📱.
– Cuộn ngang (horizontal scroll) nếu có quá nhiều cột.
– Ẩn bớt cột không cần thiết trên mobile.
