Data Table

Giới thiệu

Component bảng dữ liệu mạnh mẽ được xây dựng trên @tanstack/react-table (TanStack Table). Hỗ trợ:

• Sorting: Sắp xếp cột (client-side)
• Pagination: Phân trang client-side hoặc server-side
• Row Selection: Chọn hàng với checkbox
• Expandable Rows: Mở rộng hàng để xem chi tiết
• Column Resizing: Kéo đổi kích thước cột
• Loading State: Hiển thị overlay spinner
• Empty State: Tự động hiển thị khi không có dữ liệu

Cài đặt

Import component từ @/components/ui/table/Table:

Định nghĩa Column

Sử dụng ColumnDef[] để định nghĩa các cột cho bảng. Mỗi cột bao gồm:

• accessorKey: Key của dữ liệu trong row
• header: Tiêu đề cột
• size: Kích thước cột (auto hoặc fixed)
• meta: Metadata cho styling (align, className)
• cell: Custom cell renderer (optional)

Các props quan trọng trong cell

Hàm cell nhận vào một object CellContext từ TanStack Table. Dưới đây là các props thường dùng nhất:

• getValue() — Lấy giá trị của cell hiện tại (theo accessorKey).
  Ví dụ: cell: ({ getValue }) => <span>{getValue<string>()}</span>
• row.original — Truy cập toàn bộ object dữ liệu gốc của hàng. Dùng khi cần lấy nhiều field cùng lúc.
  Ví dụ: cell: ({ row }) => <span>{row.original.firstName} {row.original.lastName}</span>
• row.index — Chỉ số (index) của hàng trong trang hiện tại (bắt đầu từ 0).
  Ví dụ: cell: ({ row }) => <span>{row.index + 1}</span>
• row.id — ID duy nhất của hàng do TanStack Table tạo ra (dạng string).
• renderValue() — Tương tự getValue() nhưng trả về null thay vì undefined khi không có giá trị. An toàn hơn khi render.
• table — Tham chiếu đến toàn bộ table instance. Dùng để truy cập table.options.meta (custom callbacks như onEdit, onDelete).
  Ví dụ: cell: ({ row, table }) => <Button onClick={() => table.options.meta?.onDelete(row.original)} />
• column.id — ID của cột, thường là giá trị accessorKey.

Data Demo

Dữ liệu ví dụ cho bảng:

Basic Table

Bảng đơn giản với sort + pagination client-side mặc định.

Row Selection

Checkbox chọn hàng. Callback onSelectionChange trả về danh sách đã chọn.

Expandable Rows

Click mũi tên để mở rộng hàng, hiển thị thông tin chi tiết.

Column Resizing

Kéo đường viền giữa các cột header để thay đổi kích thước.

Loading State

isLoading=true hiển thị overlay spinner.

Empty State

data=[] tự động hiển thị trạng thái trống.

Server Pagination

Truyền total từ BE → tự động bật server mode. onChange nhận (page, pageSize) 1-based để gọi API.

Tùy biến Pagination

Tùy chỉnh showTotal, pageSizeOptions, showSizeChanger=false để ẩn size selector.

Props & API