DataTable

Playground

Đổi brand, theme và trạng thái. Khung bảng lấy đúng bề rộng cột nội dung; cột dư cuộn bên trong, không đẩy trang ngang.

import { DropdownMenuItem } from "@nexobox/ui";
import { DataTable, DataTableRowMenu, type DataTableColumn } from "@nexobox/ui/data-table";

<DataTable
  columns={columns}
  data={rows}
  getRowId={(row) => row.id}
  label="Khách hàng"
  selectable
  rowActions={(row) => (
    <DataTableRowMenu label={"Thao tác " + row.name}>
      <DropdownMenuItem>Xem hồ sơ</DropdownMenuItem>
    </DataTableRowMenu>
  )}
/>

Khi nào sử dụng

Nên dùng

Danh sách có cột, cần sắp xếp, chọn theo id ổn định, và phân trang 25, 50 hoặc 100 hàng.

Khi nào không dùng

Tránh dùng

Anatomy

Một vùng có nhãn. Khung lấy bề rộng của cha và cuộn phần cột dư bên trong. Shadow của header chỉ xuất hiện sau khi vùng đã cuộn dọc. Ô tiêu đề phủ kín ô. Nền header trùng màu ghost hover, nên hover chuyển sang ghost pressed. Vạch đổi rộng cột dùng màu focus và chỉ hiện dần khi hover đúng tay nắm, không hiện khi hover cả ô tiêu đề. Hàng dữ liệu có viền subtle; hàng chẵn nền nhạt hơn header một bậc. Nút cột nằm ở cuối hàng tiêu đề. Bảng cuộn ngang khi tổng bề rộng cột lớn hơn khung. Cỡ trang và nút trước/sau cao 36px.

Variants

chrome="card" là mặc định: khung có viền, bo góc và vùng cuộn theo maxHeight. chrome="plain" bỏ khung đó. Hàng chạy tới mép phần tử cha. Vùng cuộn là chính bảng: chiếm phần cao còn lại của cha, tiêu đề dính trong vùng đó, pager nằm dưới. maxHeight không áp dụng. Khi mọi hàng nằm trên một trang, pager không hiện — host để số lượng cạnh bộ lọc của mình. Sang trang thứ hai thì pager trở lại, không có thẻ.

mode="local" là mặc định: sắp xếp và phân trang trên dữ liệu đã nằm trong trình duyệt. mode="server" yêu cầu phân trang và sắp xếp điều khiển từ ngoài, cộng rowCount hoặc pageCount. Host cấp cột, dữ liệu và id. Lọc, phân quyền, fetch, huỷ request và xuất file không nằm trong composite.

States

Các trạng thái đứng yên bên dưới, theo brand và theme của playground. Chọn một hàng ở bảng sẵn sàng để thấy nền selected.

Reduced motion: skeleton, spinner và vạch đổi rộng cột đứng yên.

Bàn phím & trợ năng

API & triển khai

Design tokens

Màu, tiêu điểm, khoảng cách và chuyển động dùng token bảng và token nền đã có. Không token dùng chung mới. Chữ giao diện 14px, metadata 12px. Chiều cao hàng theo token hàng của Table.

Do / Don't