Nếu có một cuộc bình chọn “Thành phần UI nào gây ức chế nhất khi thiết kế”, chắc chắn Table (Bảng biểu) sẽ đứng top 1. Tại sao ư? Vì mỗi lần cần thêm một cột, sửa độ rộng một dòng, hay khách hàng đòi đổi nội dung… là cả cái bảng vỡ tung tóe. Bạn phải ngồi chỉnh lại Grid, kéo lại từng cái đường kẻ (divider) rất mất thời gian.

Đừng để những chiếc bảng thủ công làm chậm tiến độ của bạn. Responsive Dynamic Table là bộ Component được xây dựng hoàn toàn bằng Auto-layout, giúp bạn tạo ra những bảng dữ liệu co giãn linh hoạt, bất chấp mọi kích thước màn hình.

1. Trong “chiếc hộp” này có gì?

Tác giả đã đóng gói sẵn một hệ thống bảng thông minh, giải quyết được hai bài toán lớn nhất: Responsive (Co giãn) và Dynamic (Linh hoạt).

  • 100% Auto-layout: Quên đi việc chia cột bằng Grid lưới cố định. Cấu trúc bảng này được xây dựng từ các Row (Hàng) và Cell (Ô) xếp chồng lên nhau. Khi bạn kéo giãn chiều ngang của bảng, các cột sẽ tự động chia lại tỉ lệ cho vừa vặn.
  • Module hóa từng thành phần: File chia nhỏ bảng thành các component con: Header Cell (Ô tiêu đề), Body Cell (Ô nội dung), Status Tag (Nhãn trạng thái)… giúp bạn dễ dàng quản lý và chỉnh sửa đồng loạt.
  • Trạng thái đa dạng: Cung cấp sẵn các biến thể (Variants) cho các tình huống thường gặp: Dòng tiêu đề, dòng đang chọn (Hover/Selected), dòng chẵn/lẻ (Zebra striping) để bảng dễ đọc hơn.

Bạn có thể tìm resource này bằng cách:

2. Hướng dẫn khai thác tối đa

Resource này cực kỳ hữu ích cho các bạn đang thiết kế SaaS, Admin Dashboard hay các phần mềm quản lý (CRM/ERP):

  • Bước 1: Lấy về (Duplicate): Mở link resource và nhấn “Open in Figma” để nhân bản file về Drafts.
  • Bước 2: Xây dựng bảng (Build):
    • Copy Component bảng mẫu ra file làm việc.
    • Để thêm hàng: Chọn một dòng (Row), nhấn Cmd + D (hoặc Ctrl + D) để nhân bản. Bảng sẽ tự động dài ra mà không vỡ layout.
    • Để chỉnh sửa nội dung: Click thẳng vào Text để gõ lại số liệu.
  • Bước 3: Tùy biến cột (Customize Columns):
    • Muốn ẩn bớt một cột? Chỉ cần chọn các ô của cột đó và nhấn icon “Con mắt” (Hide layer) hoặc xóa đi, các cột còn lại sẽ tự động tràn ra lấp đầy khoảng trống.
    • Thay thế nội dung: Dùng tính năng “Swap Instance” để đổi từ ô chứa Text sang ô chứa Avatar hoặc Checkbox tùy theo nhu cầu dữ liệu.

3. Kết luận

Responsive Dynamic Table giúp biến công việc thiết kế bảng biểu từ “cực hình” trở thành “trò chơi xếp hình”. Mọi thứ đều tự động, thẳng hàng và ngay ngắn.

Sở hữu bộ component này trong tay, bạn sẽ tự tin xử lý mọi yêu cầu về hiển thị dữ liệu phức tạp mà không lo phải “đập đi xây lại” mỗi khi có thay đổi nhỏ.