ComponentHiển thị dữ liệu
Bắt đầu nhanh
Import DataTable (with i18n) từ entry công khai. Các ví dụ bên dưới thể hiện những kiểu tương tác và cấu hình được hỗ trợ.
component.tsxtsx
import { DataTable } from '@underverse-ui/underverse';Ví dụ tương tác
Dùng thử DataTable (with i18n) thật, xem mã ví dụ và tra cứu các prop đã được mô tả.
Đang tải ví dụ tương tác…
Tham chiếu
Tham chiếu API
Tra cứu các thuộc tính, kiểu dữ liệu được chấp nhận, giá trị mặc định và lưu ý về hành vi.
Dữ liệu được sinh từ API TypeScript công khai của thư viện. Kiểu dữ liệu, thuộc tính bắt buộc và giá trị mặc định luôn đồng bộ với mã nguồn.
DataTable
Component| Thuộc tính | Mô tả | Kiểu | Mặc định |
|---|---|---|---|
columnsBắt buộc | Định nghĩa cột. | DataTableColumn<T>[] | Bắt buộc |
dataBắt buộc | Dữ liệu hàng. | T[] | Bắt buộc |
rowKey | Hàm lấy khoá hàng. | ((row: T) => string | number) | keyof T | — |
loading | Hiển thị trạng thái đang tải. | boolean | — |
total | Tổng số hàng (server). | number | 0 |
page | Trang hiện tại. | number | 1 |
pageSize | Số hàng/trang. | number | 20 |
pageSizeOptions | Danh sách tuỳ chọn số mục/trang. | number[] | — |
onQueryChange | Hàm thay đổi truy vấn (server). | (q: DataTableQuery) => void | — |
caption | Nội dung caption. | React.ReactNode | — |
toolbar | Thanh công cụ. | React.ReactNode | — |
showToolbar | Show the toolbar row above the table. Default: true | boolean | true |
columnColorGroups | Define color groups for the column visibility dropdown legend. Key = color value used in column's `colorTag` (e.g. "#1e40af"). If not provided, columns with colorTag still get colored but won't be grouped in dropdown. | Record<string, ColumnColorGroup> | — |
size | Visual size preset. Maps to component scales in the table UI. | DataTableSize | "md" |
enableColumnVisibilityToggle | Bật ẩn/hiện cột. | boolean | true |
enableDensityToggle | Bật đổi density. | boolean | true |
enableHeaderAlignToggle | Mã nguồn chưa cung cấp mô tả bổ sung. | boolean | false |
uppercaseHeader | Uppercase all text displayed in table headers. Default: false | boolean | false |
striped | Hàng kẻ sọc. | boolean | true |
columnDividers | Hiển thị đường kẻ dọc ngăn cách giữa các cột | boolean | false |
className | Class tuỳ chỉnh. | string | — |
storageKey | Key để lưu pageSize vào localStorage. Nếu không cung cấp, pageSize sẽ không được persist | string | — |
stickyHeader | Bật sticky header khi cuộn. Mặc định là false | boolean | true |
maxHeight | Chiều cao tối đa của bảng khi bật stickyHeader (mặc định: 500px) | number | string | 500 |
horizontalMode | Horizontal sizing strategy for the table viewport. - "auto": default, prefer fitting the container and only scroll when content truly overflows - "scroll": preserve explicit column widths and force horizontal scrolling via min-width aggregation - "fit": use fixed table layout and suppress horizontal scrolling | DataTableHorizontalMode | "auto" |
overflowHidden | Clip overflow của outer wrapper. Tắt khi cần cho phép shadow/focus ring tràn ra ngoài. | boolean | true |
useOverlayScrollbar | Enable OverlayScrollbars on table viewport. Default: false | boolean | false |
virtualizedRows | Virtualize body rows for large page sizes. Default: false | boolean | false |
estimatedRowHeight | Estimated row height used by virtualized rendering. Defaults to the active density row height. | number | — |
overscan | Number of extra rows rendered above and below the visible range. Default: 8 | number | 8 |
paginationAlign | Alignment of the page navigation controls. Default: "right" | DataTablePaginationAlign | "right" |
paginationRange | Number of page buttons pinned at each end. Defaults to 3 below 14 pages, otherwise 5. | number | — |
enableHeaderAutoFit | Double-click leaf headers to auto-fit column width based on visible content. Default: true | boolean | true |
labels | Nhãn i18n cho density tuỳ chọn. | DataTableLabels | — |
borderMode | Mã nguồn chưa cung cấp mô tả bổ sung. | BorderMode | — |
Hướng dẫn sử dụng
Dùng DataTable (with i18n) để trình bày dữ liệu có cấu trúc dễ quét. Cần tiêu đề có nghĩa, thứ tự ổn định và hành vi responsive phù hợp với dữ liệu dày.
Trợ năng
Khi dùng DataTable (with i18n), hãy giữ trạng thái focus dễ nhận biết, cung cấp tên truy cập khi cần và kiểm tra bàn phím cùng trình đọc màn hình trong ngữ cảnh thực tế.