Table

Playground

Đổi brand, theme và dữ liệu để xem cùng một Table thích ứng với nhận diện và ngữ cảnh.

import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@nexobox/ui";

<Table>
  <TableCaption>Giao dịch gần đây</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Khách hàng</TableHead>
      <TableHead>Trạng thái</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Nguyễn Thị Lan</TableCell>
      <TableCell>Hoàn tất</TableCell>
    </TableRow>
  </TableBody>
</Table>

Khi nào sử dụng

Dữ liệu đọc theo cả hai chiều — hàng và cột cùng mang nghĩa, và người dùng so sánh giữa các hàng. Danh sách giao dịch, người dùng, đơn hàng với nhiều thuộc tính cùng cấp.

Khi nào không dùng

Danh sách thẻ không có quan hệ cột — dùng Card lặp lại. Bố cục thuần layout không mang dữ liệu bảng — dùng CSS grid của trang. Bảng cần sắp xếp, chọn hàng, hoặc phân trang — dùng DataTable. Bậc Table không có cả ba, xem mục Variants.

Anatomy

Variants

Không có. Table không nhận prop biến thể — một cách trình bày duy nhất cho mọi ngữ cảnh. Ba khả năng sau không có ở bậc này: sắp xếp cột (cần trạng thái hướng sort chưa đặc tả), chọn hàng (cần checkbox cột đầu và hành vi bàn phím chưa quyết), phân trang (component riêng — Pagination — không import vào đây, chỉ đi kèm trên cùng một trang danh sách).

Header dính — không có. Bật đúng cách cần theo dõi vị trí cuộn để chỉ hiện --nf-foundation-shadow-raised khi có nội dung cuộn bên dưới; không component nào khác trong gói này theo dõi cuộn bằng JS, và một sticky tĩnh cộng shadow luôn bật sẽ vi phạm điều kiện đó.

Hàng nhấn được — không có. Không hàng nào nhận press-scale hay outline tiêu điểm; hover chỉ đổi nền để dễ dò dòng, không đổi con trỏ.

States

Hàng thứ hai mô phỏng nền hover — không cần rê chuột thật để xem.

Không có loading hay error ở bậc primitive: đó là trạng thái của vùng gọi Table, không phải của chính <table>.

Keyboard & accessibility

Design tokens

Giá trị theo NexoCRM / light đang chọn trong playground. Bề mặt đọc --nf-component-table-header-background, -row-background, -row-hover. Chiều cao hàng đọc --nf-component-table-row-height. Đệm ô đọc --nf-component-table-cell-padding-inline, caption đọc thêm -cell-padding-block. Khung đọc --nf-component-card-radius và --nf-semantic-border-subtle.

Kiểu chữ: --nf-foundation-typography-ui-* cho tiêu đề cột (0.875rem, weight 500). Ô dữ liệu cùng cỡ, weight 400. Số trong ô bind thêm vai data (tabular-nums). --nf-foundation-typography-caption-* cho caption.

API & triển khai

Do / Don't