Yugen UI

Table

Table sắp xếp dữ liệu thành hàng và cột để người dùng quét, so sánh và thao tác trên từng bản ghi.

Gồm Table, TableHeader, TableHeaderCell (sắp xếp với aria-sort), TableBody, TableRow, TableCell, TableCellLayout, TableSelectionCell và TableCellActions. Ví dụ đầu là một DataTable hoàn chỉnh: lọc, sắp xếp, chọn hàng, menu thao tác và phân trang.
0 / 12 hoá đơn đã chọn
Trạng tháiThao tác
Nguyễn Văn Anan.nguyen@contoso.com
Đã thanh toán18 thg 10, 20262.490,00 US$
Trần Thị Bìnhbinh.tran@contoso.com
Đang xử lý17 thg 10, 20261.350,00 US$
Lê Hoàng Cườngcuong.le@contoso.com
Đã thanh toán15 thg 10, 20265.820,00 US$
Phạm Minh Dũngdung.pham@contoso.com
Thất bại14 thg 10, 2026760,00 US$
Hoàng Thu Hàha.hoang@contoso.com
Đã thanh toán12 thg 10, 20263.150,00 US$
Trang 1 / 3 · 12 kết quả

Import

Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.

TSX
// npm install yugen-uiimport {  Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell,  TableCellLayout, TableSelectionCell, TableCellActions,} from "yugen-ui";

Biến thể

Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.

TệpSửa lần cuối
Báo cáo quý 3.docx
2 giờ trước
Tài liệu dự án
Hôm qua
Hợp đồng.pdf
3 ngày trước

Cơ bản

TableCellLayout ghép icon với nội dung chính.

TênVai trò
Nguyễn Văn AnKỹ sư
Trần Thị BìnhNhà thiết kế
TênVai trò
Nguyễn Văn AnKỹ sư
Trần Thị BìnhNhà thiết kế

Kích thước

extra-small (24px) và small (34px); medium mặc định cao 44px.

Thành viên
Nguyễn Văn An
Trần Thị Bình
Lê Hoàng Cường

Chọn hàng & thao tác

TableSelectionCell subtle chỉ hiện checkbox khi hover; TableCellActions hiện nút khi hover / focus hàng.

Thành viênVai trò
Nguyễn Văn AnKỹ sư phần mềm
Trần Thị BìnhNhà thiết kế
Lê Hoàng CườngQuản lý sản phẩm

Chọn cột hiển thị

Table không có định nghĩa cột: giữ tập id cột ẩn trong state, render ô theo điều kiện và dùng DataGridColumnPicker làm nút chọn cột. Cột hideable: false luôn hiện.

Cách dùng

Nên
  • Căn tiêu đề cột cùng phía với dữ liệu; cột số căn về cuối dòng.
  • Cho phép sắp xếp ở cột người dùng hay so sánh; header phản ánh hướng sắp xếp.
  • Đặt thao tác hàng vào Menu “…” hoặc TableCellActions để bảng gọn.
Không nên
  • Không dùng Table để dàn bố cục trang.
  • Không nhồi quá nhiều cột trên màn hẹp — bọc overflow-x-auto hoặc ẩn cột phụ.
  • Không chỉ dùng màu nền để báo hàng đã chọn — luôn có checkbox.

Props

Prop · KiểuMặc địnhMô tả
Table.size"extra-small" | "small" | "medium"Mặc định: "medium"Chiều cao hàng 24 / 34 / 44px.
Table.sortablebooleanMặc định: falseMọi TableHeaderCell thành nút sắp xếp.
TableHeaderCell.sortDirection"ascending" | "descending"Mặc định: —Hiện icon ArrowSortUp/Down và aria-sort.
TableHeaderCell.sortable / onClickboolean / MouseEventHandlerMặc định: —Bật / tắt sắp xếp riêng cột; onClick gắn vào nút trong header.
TableRow.selected / appearanceboolean / "none" | "neutral" | "brand"Mặc định: —Trạng thái nền của hàng.
TableCellLayout.media / description / appearance / truncateReactNode / ReactNode / "primary" / booleanMặc định: —Bố cục ô: media + nội dung chính + mô tả.
TableSelectionCell.checked / onCheckedChange / subtleboolean | "mixed" / (checked) => void / booleanMặc định: —Checkbox chọn hàng; trong TableHeader thành ô chọn tất cả.

Messages

Chữ có sẵn của component: nhãn, aria-label, thông báo cho trình đọc màn hình.

Mặc định là tiếng Anh. Đổi qua prop messages của YugenProvider, theo namespace bên dưới; messagesVi chứa bản tiếng Việt. Xem Ngôn ngữ giao diện.

messages.table

Khoá · KiểuMặc định (tiếng Anh)messagesVi
selectAllRowsstring

aria-label của checkbox TableSelectionCell ở hàng tiêu đề.

Mặc định (tiếng Anh)"Select all rows"messagesVi"Chọn tất cả hàng"
selectRowstring

aria-label của checkbox TableSelectionCell ở từng hàng.

Mặc định (tiếng Anh)"Select row"messagesVi"Chọn hàng"