Grid Table v1.0.8: Tối ưu bảng dữ liệu trên mobile và phân trang server

Grid Table, thư viện bảng dữ liệu thuộc bộ Forge Dev Stack, vừa ra mắt phiên bản v1.0.8 hướng tới các quy trình sản xuất thực tế. Thay vì thêm các tính năng ngẫu nhiên, bản cập nhật tập trung giải quyết các vấn đề thường gặp trong ứng dụng thật: hành vi trên thiết bị di động, phân trang dữ liệu trên server, và trải nghiệm người dùng cho các bảng có mật độ cao.

Các điểm nổi bật của phiên bản

1) Thuộc tính điều khiển layout trên mobile: mobileLayout

Thay vì chỉ có một cách hiển thị bảng trên mobile, bản mới cho phép lựa chọn rõ ràng giữa:

• "scroll" (mặc định): giữ nguyên bảng với khả năng cuộn ngang
• "stacked": chuyển đổi bảng thành dạng thẻ, thân thiện với màn hình nhỏ hẹp

Điều này giúp các nhóm phát triển sản phẩm có thể tùy biến hợp lý thay vì bị giới hạn bởi một cách hiển thị cố định.

<GridTable
  data={rows}
  columns={columns}
  mobileBreakpoint="tablet"
  mobileLayout="stacked"
/>

2) Phân trang thủ công riêng cho API

Việc phân trang phía server được hỗ trợ tích hợp:

• Sử dụng paginationConfig.manualPagination để kích hoạt phân trang thủ công
• Xác định tổng số hàng dữ liệu với paginationConfig.totalRowCount

Điều này giúp duy trì trải nghiệm người dùng mượt mà phía client trong khi số liệu phân trang phản ánh chính xác backend.

<GridTable
  data={rowsFromApi}
  columns={columns}
  paginationConfig={{
    manualPagination: true,
    totalRowCount: totalFromApi,
    initialPage: 1,
    initialPageSize: 10,
  }}
  onPageChange={(page, pageSize) => refetch(page, pageSize)}
/>

3) Cải thiện UX và độ ổn định

Nhóm phát triển đã tinh chỉnh để bảng dễ theo dõi hơn và thao tác trên thiết bị cảm ứng chuẩn hơn:

• Hiệu ứng hover nhẹ nhàng, giúp dễ dàng quét nội dung
• Kích thước icon trên thanh công cụ phù hợp layout chạm
• Tổng hợp số liệu được đồng bộ với phân trang thủ công
• Sửa lỗi hiển thị do vấn đề sắp xếp hook trong GridTableContent

4) Nâng cấp portal và tài liệu

Portal giờ đây bao gồm các demo thực tiễn cho các tính năng như:

• Accessibility (tiếp cận người dùng khuyết tật)
• Master-detail rows (hàng chi tiết)
• Phân trang giữ trạng thái và phân trang server-driven
• Gom nhóm cột
• Danh sách lớn/lười tải dữ liệu (lazy loading)
• Trung tâm thử nghiệm và chủ đề giao diện

Điểm cộng lớn là tất cả có sẵn đoạn mã sử dụng nhanh giúp tăng tốc độ tích hợp.

Tại sao phiên bản này quan trọng?

Nhiều thư viện bảng dữ liệu vẫn chỉ nhắm vào trường hợp sử dụng đơn giản với dữ liệu tĩnh và desktop. Phiên bản v1.0.8 dành cho những nhóm phát triển cần triển khai ứng dụng thực:

• Quản lý trạng thái phức tạp
• Phân trang backend
• Quyết định thiết kế mobile đa dạng
• Trải nghiệm tương tác cao

Hệ sinh thái đi kèm

Grid Table là một phần của Forge Dev Stack, đồng hành cùng các công cụ như:

• Bear UI
• Forge Compass
• Synapse
• Harbor
• Forge CLI

Cách trải nghiệm Grid Table

Cài đặt nhanh qua npm:

npm i @forgedevstack/grid-table

• Website: https://grid-table.com
• GitHub: https://github.com/yaghobieh/grid-table
• Changelog: https://github.com/yaghobieh/grid-table/blob/main/CHANGELOG.md

Nếu bạn quan tâm, có thể theo dõi thêm các bài viết chia sẻ về các mẫu thiết kế dùng phân trang API với chỉnh sửa tối ưu, thẻ mobile dạng stacked cho ứng dụng vận hành, hoặc giao diện hybrid dạng cây và master-detail.

Phiên bản này thực sự nâng tầm trải nghiệm làm việc với bảng dữ liệu trong các ứng dụng thực tế, nhất là nhóm phát triển web và di động muốn hiện đại hoá UX mà không phải xây dựng mọi thứ từ đầu.